Skip to content

Commit 8d1a451

Browse files
iamdharmeshiamdharmesh
committed
- Overall design improvements
- Range selector improvements
1 parent 5c48ef9 commit 8d1a451

File tree

4 files changed

+229
-155
lines changed

4 files changed

+229
-155
lines changed

‎assets/css/admin.css‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,8 @@ body.toplevel_page_mailchimp_sf_options #footer-upgrade {
788788

789789
@media screen and (max-width: 782px) {
790790
.mailchimp-sf-header,
791-
.mailchimp-sf-settings-page-hero-wrapper {
791+
.mailchimp-sf-settings-page-hero-wrapper,
792+
.mailchimp-sf-settings-page-header-wrapper {
792793
margin-left: -10px;
793794
}
794795
}
@@ -967,13 +968,15 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
967968
}
968969

969970
/* Settings Page Hero */
970-
.mailchimp-sf-settings-page-hero-wrapper {
971+
.mailchimp-sf-settings-page-hero-wrapper,
972+
.mailchimp-sf-settings-page-header-wrapper {
971973
margin-left: -20px;
972974
background-color: #fff;
973975
border-bottom: 1px solid rgba(36, 28, 21, 0.15);
974976
}
975977

976-
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
978+
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
979+
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
977980
display: flex;
978981
flex-direction: row;
979982
align-items: center;
@@ -985,11 +988,13 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
985988
}
986989

987990
.mailchimp-sf-settings-page-hero-title-wrapper,
991+
.mailchimp-sf-settings-page-header-title-wrapper,
988992
.mailchimp-sf-settings-page-hero-content-wrapper {
989993
flex: 1;
990994
}
991995

992-
.mailchimp-sf-settings-page-hero-title {
996+
.mailchimp-sf-settings-page-hero-title,
997+
.mailchimp-sf-settings-page-header-title {
993998
font-family: "Means Web", serif;
994999
font-size: 36px;
9951000
line-height: 1.1em;
@@ -999,6 +1004,10 @@ a.mailchimp-sf-button.mailchimp-cancel-user-sync-button:hover {
9991004
letter-spacing: -0.72px;
10001005
}
10011006

1007+
.mailchimp-sf-settings-page-header-title {
1008+
margin-bottom: 0px;
1009+
}
1010+
10021011
.mailchimp-sf-settings-page-hero-description,
10031012
.mailchimp-sf-settings-list-note {
10041013
font-size: 16px;
@@ -1161,12 +1170,17 @@ body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover
11611170
}
11621171

11631172
/* Settings Page */
1164-
.mailchimp-sf-settings-page {
1173+
.mailchimp-sf-settings-page,
1174+
.mailchimp-sf-analytics-page {
11651175
max-width: 1200px;
11661176
margin: 0 auto;
11671177
padding: 32px 20px;
11681178
}
11691179

1180+
.mailchimp-sf-analytics-page {
1181+
padding: 22px 20px 32px 20px;
1182+
}
1183+
11701184
.mailchimp-sf-settings-list-wrapper {
11711185
margin-bottom: 20px;
11721186
}
@@ -1334,6 +1348,7 @@ table.widefat.mailchimp-sf-settings-table ul {
13341348
}
13351349

13361350
#mailchimp-sf-settings-page input[type="text"],
1351+
#mailchimp-sf-settings-page input[type="date"],
13371352
#mailchimp-sf-settings-page input[type="tel"] {
13381353
font-size: 16px;
13391354
padding: 10px 12px;
@@ -1349,13 +1364,15 @@ table.widefat.mailchimp-sf-settings-table ul {
13491364
}
13501365

13511366
#mailchimp-sf-settings-page input[type="text"]:hover,
1367+
#mailchimp-sf-settings-page input[type="date"]:hover,
13521368
#mailchimp-sf-settings-page input[type="tel"]:hover {
13531369
background-color: #f8fafb;
13541370
border-color: #3c4348;
13551371
outline: none;
13561372
}
13571373

13581374
#mailchimp-sf-settings-page input[type="text"]:focus,
1375+
#mailchimp-sf-settings-page input[type="date"]:focus,
13591376
#mailchimp-sf-settings-page input[type="tel"]:focus {
13601377
outline-offset: -2px;
13611378
outline: 2px solid var(--mailchimp-color-link);
@@ -1589,12 +1606,14 @@ input:checked + .mailchimp-sf-toggle-slider:before {
15891606
}
15901607

15911608
@media screen and (max-width: 782px) {
1592-
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero {
1609+
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-hero,
1610+
#mailchimp-sf-settings-page .mailchimp-sf-settings-page-header {
15931611
flex-direction: column;
15941612
padding: 32px 20px 32px 30px;
15951613
}
15961614

1597-
.mailchimp-sf-settings-page {
1615+
.mailchimp-sf-settings-page,
1616+
.mailchimp-sf-analytics-page {
15981617
padding: 32px 10px;
15991618
}
16001619

‎assets/css/analytics.css‎

Lines changed: 34 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,11 @@
44
* @package Mailchimp
55
*/
66

7-
/* Filters bar */
8-
.mailchimp-sf-analytics-wrapper {
9-
max-width: 1200px;
10-
margin: 20px 0;
11-
}
12-
137
.mailchimp-sf-analytics-filters {
148
display: flex;
159
flex-wrap: wrap;
1610
align-items: flex-end;
1711
gap: 16px;
18-
padding: 20px;
19-
background: #fff;
20-
border: 1px solid #dcdcde;
21-
border-radius: 4px;
2212
margin-bottom: 20px;
2313
}
2414

@@ -29,11 +19,9 @@
2919
}
3020

3121
.mailchimp-sf-analytics-filter-group > label {
32-
font-size: 12px;
33-
font-weight: 600;
22+
font-size: 14px;
23+
font-weight: 400;
3424
color: #1d2327;
35-
text-transform: uppercase;
36-
letter-spacing: 0.5px;
3725
}
3826

3927
.mailchimp-sf-analytics-filter-group select {
@@ -48,8 +36,8 @@
4836
}
4937

5038
.mailchimp-sf-analytics-filter-group select:focus {
51-
border-color: #007cba;
52-
box-shadow: 0 0 0 1px #007cba;
39+
border-color: var(--mailchimp-color-link, #017e89);
40+
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
5341
outline: none;
5442
}
5543

@@ -64,27 +52,35 @@
6452
justify-content: space-between;
6553
gap: 8px;
6654
min-width: 220px;
67-
height: 36px;
55+
height: 40px;
6856
padding: 0 10px;
69-
border: 1px solid #8c8f94;
70-
border-radius: 4px;
57+
border: 1px solid #c3ced5;
58+
color: var(--mailchimp-color-text);;
59+
border-radius: 6px;
7160
font-size: 14px;
72-
color: #1d2327;
7361
background-color: #fff;
7462
cursor: pointer;
7563
text-align: left;
64+
transition: all 0.2s;
65+
min-width: 200px;
7666
}
7767

7868
.mailchimp-sf-date-picker-trigger:hover {
79-
border-color: #007cba;
69+
border-color: var(--mailchimp-color-link, #017e89);
8070
}
8171

8272
.mailchimp-sf-date-picker-trigger:focus {
83-
border-color: #007cba;
84-
box-shadow: 0 0 0 1px #007cba;
73+
border-color: var(--mailchimp-color-link, #017e89);
74+
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
8575
outline: none;
8676
}
8777

78+
.mailchimp-sf-date-picker.is-open .mailchimp-sf-date-picker-trigger {
79+
border-color: var(--mailchimp-color-link, #017e89);
80+
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
81+
background-color: rgba(1, 126, 137, 0.08);
82+
}
83+
8884
.mailchimp-sf-date-picker-trigger .dashicons {
8985
font-size: 18px;
9086
width: 18px;
@@ -126,75 +122,46 @@
126122
}
127123

128124
.mailchimp-sf-date-picker-field label {
129-
font-size: 12px;
130-
font-weight: 600;
131-
color: #50575e;
125+
font-size: 14px;
126+
font-weight: 400;
127+
color: #4A5565;
132128
}
133129

134-
.mailchimp-sf-date-picker-field select,
135-
.mailchimp-sf-date-picker-field input[type="date"] {
130+
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select,
131+
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="date"] {
136132
height: 36px;
137-
padding: 0 8px;
138-
border: 1px solid #8c8f94;
139-
border-radius: 4px;
140133
font-size: 14px;
141134
color: #1d2327;
142135
background-color: #fff;
143136
width: 100%;
144137
}
145138

146-
.mailchimp-sf-date-picker-field select:focus,
147-
.mailchimp-sf-date-picker-field input[type="date"]:focus {
148-
border-color: #007cba;
149-
box-shadow: 0 0 0 1px #007cba;
139+
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field select:focus,
140+
#mailchimp-sf-settings-page .mailchimp-sf-date-picker-field input[type="date"]:focus {
141+
border-color: var(--mailchimp-color-link, #017e89);
142+
box-shadow: 0 0 0 1px var(--mailchimp-color-link, #017e89);
150143
outline: none;
151144
}
152145

153-
/* Popover actions */
146+
/* Popover actions — .mailchimp-sf-button.btn-primary / .btn-secondary.btn-small; pill shape to match design */
154147
.mailchimp-sf-date-picker-actions {
155148
display: flex;
156149
justify-content: flex-end;
157150
gap: 8px;
158151
}
159152

160-
.mailchimp-sf-date-picker-cancel,
161-
.mailchimp-sf-date-picker-apply {
162-
padding: 6px 16px;
163-
font-size: 14px;
164-
border-radius: 4px;
165-
cursor: pointer;
166-
border: 1px solid transparent;
167-
line-height: 1.4;
168-
}
169-
170-
.mailchimp-sf-date-picker-cancel {
171-
background: #fff;
172-
color: #1d2327;
173-
border-color: #8c8f94;
174-
}
175-
176-
.mailchimp-sf-date-picker-cancel:hover {
177-
background: #f0f0f1;
178-
}
179-
180-
.mailchimp-sf-date-picker-apply {
181-
background: #241c15;
182-
color: #fff;
183-
border-color: #241c15;
184-
}
185-
186-
.mailchimp-sf-date-picker-apply:hover {
187-
background: #3c3226;
188-
}
189153

190154
/* Content area */
191155
.mailchimp-sf-analytics-content {
156+
border: 1px solid #D3D0C8;
157+
border-radius: 8px;
158+
width: 100%;
159+
overflow: auto;
192160
padding: 24px;
193161
background: #fff;
194-
border: 1px solid #dcdcde;
195-
border-radius: 4px;
196162
min-height: 200px;
197163
margin-bottom: 20px;
164+
box-sizing: border-box;
198165
}
199166

200167
.mailchimp-sf-analytics-placeholder {

0 commit comments

Comments
 (0)