From 263def690b9f78dae024bde9eace83f6cbdc697f Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 19:27:28 -1000 Subject: [PATCH 1/9] Updates admin settings to Mailchimp style standards --- css/admin.css | 337 +++++++++++++++++--------------------------------- icon.svg | 1 + 2 files changed, 113 insertions(+), 225 deletions(-) create mode 100644 icon.svg diff --git a/css/admin.css b/css/admin.css index 7bdc54e..09fd511 100644 --- a/css/admin.css +++ b/css/admin.css @@ -1,188 +1,172 @@ -/* Logged Out - --------------------------------------------------------------- */ +:root { + --mailchimp-color-text: #241c15; + --mailchimp-color-white: #fff; + --mailchimp-color-border: #ffe01b; + --mailchimp-color-header-bg: #fbeeca; + --mailchimp-color-link: #007c89; + --mailchimp-color-text-light: #373737; + --mailchimp-color-text-lightest: #5d5c5d; + --mailchimp-max-width: 56.25rem; /* 900 pixels */ +} + +/* Header */ +.mailchimp-header { + align-items: center; + background-color: var(--mailchimp-color-white); + border-top: 2px solid var(--mailchimp-color-border); + box-sizing: border-box; + display: flex; + gap: 1rem; + justify-content: space-between; + max-width: var(--mailchimp-max-width); + padding: 0.75rem 1rem; +} + +/* Sections */ +table.mc-widefat { + background: var(--mailchimp-color-white); + border: 2px solid var(--mailchimp-color-header-bg) !important; + border-radius: 6px; + margin: 2.75rem 0 2.25rem; +} +table.mc-widefat tr:first-child { + background: var(--mailchimp-color-header-bg); +} -/* Errors - --------------------------------------------------------------- */ +table.mc-widefat tr:first-child th { + color: var(--mailchimp-color-text); + font-weight: 500; +} -.error_msg { - background: #fadbd5; - border: 1px solid #db3a1b; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; +/* Buttons */ +#wpbody .button { + border-color: var(--mailchimp-color-link); + color: var(--mailchimp-color-link); +} + +.error_msg { + --mailchimp-error-bg: #fadbd5; + --mailchimp-error-border: #db3a1b; + background: var(--mailchimp-error-bg); + border: 1px solid var(--mailchimp-error-border); border-radius: 6px; box-sizing: border-box; - color: #373737; - font-size: 12px; - line-height: 16px; + color: var(--mailchimp-color-text); + font-size: 0.75rem; + line-height: 1; margin: 12px 0; padding: 9px; width: 900px; } + .success_msg, -.notes_msg { - background: #fff3d4; - border: 1px solid #febe12; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; +.notes_msg { + background: var(--mailchimp-color-header-bg); border-radius: 6px; box-sizing: border-box; - color: #373737; - font-size: 12px; - line-height: 16px; + color: var(--mailchimp-color-text-light); + font-size: 0.75rem; + line-height: 1; margin: 12px 0; padding: 9px; width: 900px; } -/* User - --------------------------------------------------------------- */ - +/* User */ table.mc-user { - width: 900px; margin-top: 19px; + width: 900px; } + table.mc-user tr { + border: 1px solid var(--mailchimp-color-link); + border-radius: 6px; float: right; } + .mc-user td:first-of-type { - border-top: 1px solid #6dc5dc; - border-bottom: 1px solid #6dc5dc; - border-left: 1px solid #6dc5dc; - -webkit-border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-topleft: 6px; - -moz-border-radius-bottomleft: 6px; - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; - min-width: 200px; - font-weight: normal !important; + font-weight: 400 !important; + padding-right: 1rem; } + .mc-user td:last-of-type { - border-top: 1px solid #6dc5dc; - border-right: 1px solid #6dc5dc; - border-bottom: 1px solid #6dc5dc; - -webkit-border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-topright: 6px; - -moz-border-radius-bottomright: 6px; - border-top-right-radius: 6px; - border-bottom-right-radius: 6px; min-width: 75px; } .mc-user h3 { - font-weight: normal; + font-weight: 400; text-indent: 9px; - font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } - - -/* List Selection - --------------------------------------------------------------- */ - +/* List Selection */ .mc-list-row { - width: 900px; margin-bottom: 12px; + width: 900px; } .mc-list-row td:first-of-type { min-width: 200px; padding: 12px 12px 12px 0; } + .mc-list-row td:last-of-type { - width: 80px; padding: 12px 12px 12px 0; + width: 80px; } .mc-list-note { - color: #5D5C5D; - font-size: 13px; - font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: normal; - padding: 0 0 18px; + border-bottom: 2px solid var(--mailchimp-color-text); + color: var(--mailchimp-color-text-lightest); + font-size: 0.8125rem; + font-weight: 400; margin-bottom: 8px; margin-top: 7px; - border-bottom: 2px solid #95D1C4; + padding: 0 0 18px; width: 900px; } + table.mc-list-select { margin-bottom: -40px; } -/* Headings - --------------------------------------------------------------- */ +/* Headings */ +.mailchimp-header h2, +.mc-h2, +.mc-h3, +.mc-p { + color: var(--mailchimp-color-text); +} .mc-h2 { - color: #373737; - font-size: 26px; + font-size: 1.625rem; margin-bottom: 0; } .mc-h3 { - color: #52BAD5; - font-size: 18px; + border-bottom: 2px solid var(--mailchimp-color-text); + font-size: 1.125rem; margin-bottom: 12px; - border-bottom: 2px solid #6DC5DC; - padding-bottom: 12px; margin-top: 36px; + padding-bottom: 12px; } .mc-p { - color: #373737; - font-size: 16px; - font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: normal; + font-size: 1rem; + font-weight: 400; margin-bottom: 0; } .mc-a { - color: #5D5C5D; - font-size: 14px; - font-family: "HelveticaNeue-Regular", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: normal; - margin-bottom: 0; -} - -/* Header - --------------------------------------------------------------- */ - -.mailchimp-header { - background: url(images/mailchimp-header.png) no-repeat; - background-size: 900px 96px; - height: 96px; - width: 900px; - margin-top: 19px; -} - -.mailchimp-header h2 { - float: right; - margin-top: 50px; - margin-right: 12px; - font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-weight: 700; - color: #fff !important; - text-shadow: none; - font-size: 26px !important; + color: var(--mailchimp-color-link); + font-size: 0.875rem; + font-weight: 400; + margin-bottom: 0; } - -/* Table - --------------------------------------------------------------- */ - -table.mc-widefat { - background: #fff !important; - border: 2px solid #95D1C4 !important; - -webkit-border-radius: 6px !important; - -moz-border-radius: 6px !important; - border-radius: 6px !important; - margin: 44px 0 36px; -} +/* Table */ table.mc-widefat td, table.mc-widefat th { - border-bottom: 1px solid #C5E5DE !important; - border-top: none !important; padding: 18px; text-align: left; text-shadow: none; @@ -194,24 +178,23 @@ table.mc-widefat .last-row th { } table.mc-widefat th { - color: #373737 !important; - font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + color: var(--mailchimp-color-text-light) !important; font-weight: 700; - width: 130px; + width: 130px; } table.mc-widefat td label { - padding-left: 24px; display: block; - margin-top: -17px; + font-size: 0.75rem; font-style: normal; - font-size: 12px; + margin-top: -17px; + padding-left: 24px; } table.mc-widefat td { - color: #5D5C5D !important; - font-size: 12px; - line-height: 18px !important; + color: var(--mailchimp-color-text-lightest) !important; + font-size: 0.75rem; + line-height: 1.125 !important; } table.mc-widefat td input { @@ -219,105 +202,29 @@ table.mc-widefat td input { font-style: normal; } - -table.mc-widefat tr:first-child { - background: #95D1C4 !important; -} -table.mc-widefat tr:first-child th { - color: #fff !important; - font-family: "HelveticaNeue-Bold", "Helvetica Neue Bold", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - font-size: 16px; - margin-left: 9px; - text-shadow: none; - border-bottom: none !important; -} - - -.mc-internal-heading { - background: rgba(197,229,222,0.25) !important; -} -table.mc-widefat tr.mc-internal-heading th { - text-shadow: none !important; - color: #449A88 !important; -} - -tr.mc-turned-on th { - color: #449A88 !important; -} -.mc-custom-styling em, -.mc-custom-styling td { - font-style: normal; - font-size: 13px; -} - -.mc-custom-styling td span.mc-pre-input { - width: 14px; - display: inline-block; -} - -.mc-custom-styling td input { - width: 70px; - margin-right: 7px; -} -.mc-custom-styling td input[type="checkbox"] { - width: auto; - margin-right: 7px; -} - - - - -.mc-widefat.mc-blue { - background: #fff !important; - border: 2px solid #6DC5DC !important; -} - -table.mc-widefat.mc-blue td, -table.mc-widefat.mc-blue th { - border-bottom: 1px solid #B1E0EC !important; -} -table.mc-widefat.mc-blue tr:first-child { - background: #6DC5DC !important; -} - -.mc-widefat.mc-yellow { - background: #fff !important; - border: 2px solid #FEDE88 !important; -} - -table.mc-widefat.mc-yellow td, -table.mc-widefat.mc-yellow th { - border-bottom: 1px solid #FFE8AA !important; -} -table.mc-widefat.mc-yellow tr:first-child { - background: #FEDE88 !important; -} - - - -.mc-widefat.mc-api { - border: 2px solid #95D1C4 !important; -} - table.mc-widefat.mc-api { + border-radius: 6px; margin-bottom: 19px; margin-top: 19px; } + table.mc-widefat.mc-api td, table.mc-widefat.mc-api th { border-bottom: none !important; } + table.mc-widefat.mc-api tr:first-child { - background: #95D1C4 !important; + background: var(--mailchimp-color-header-bg) !important; } a.mc-api-key { - color: #fff; + color: var(--mailchimp-color-white); display: block; margin-top: 3px; } + a.mc-api-key:hover { - color: #fff; + color: var(--mailchimp-color-white); text-decoration: underline; } @@ -325,31 +232,11 @@ a.mc-api-key:hover { margin-bottom: 19px; } - .mc-submit { - float: right; clear: both; + float: right; } - -.mailchimp-login { - background: #449A88; - color: #fff; - text-transform: capitalize; - padding: 8px 72px; - border-radius: 4px; - font-weight: 600; - font-size: 14px; - border-bottom: 2px solid #72C1B0; - margin-top: 2px; - position: relative; - box-sizing: border-box; -} -.mailchimp-login:hover { - background: #72C1B0; - border-color: #449A88; - color: #fff; -} th.mailchimp-connect { width: 100% !important; } diff --git a/icon.svg b/icon.svg new file mode 100644 index 0000000..2daea1e --- /dev/null +++ b/icon.svg @@ -0,0 +1 @@ + \ No newline at end of file From 670553c4abf1edbdb8faac2fa004855105923978 Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 19:27:46 -1000 Subject: [PATCH 2/9] Removes IE specific styles --- css/ie.css | 1 - mailchimp.php | 1 - 2 files changed, 2 deletions(-) delete mode 100644 css/ie.css diff --git a/css/ie.css b/css/ie.css deleted file mode 100644 index db832f2..0000000 --- a/css/ie.css +++ /dev/null @@ -1 +0,0 @@ -#mc_message { padding-top:1em; } \ No newline at end of file diff --git a/mailchimp.php b/mailchimp.php index 3acd062..f19ffc6 100644 --- a/mailchimp.php +++ b/mailchimp.php @@ -128,7 +128,6 @@ function mailchimp_sf_load_resources() { if ( get_option( 'mc_nuke_all_styles' ) !== '1' ) { wp_enqueue_style( 'mailchimp_sf_main_css', home_url( '?mcsf_action=main_css&ver=' . MCSF_VER, 'relative' ), array(), MCSF_VER ); - wp_enqueue_style( 'mailchimp_sf_ie_css', MCSF_URL . 'css/ie.css', array(), MCSF_VER ); global $wp_styles; $wp_styles->add_data( 'mailchimp_sf_ie_css', 'conditional', 'IE' ); } From 6950eaada7abf9ead2e3a8c2076a9af2c1f999ed Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 19:28:04 -1000 Subject: [PATCH 3/9] Mailchimp case --- js/mailchimp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/mailchimp.js b/js/mailchimp.js index 1170515..a6c2771 100644 --- a/js/mailchimp.js +++ b/js/mailchimp.js @@ -1,4 +1,4 @@ -/* Form submission functions for the MailChimp Widget */ +/* Form submission functions for the Mailchimp Widget */ (function ($) { function mc_beforeForm() { // Disable the submit button From 93f1e232c3339e28dd4bfbbadb52fa0f851971cd Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 19:28:22 -1000 Subject: [PATCH 4/9] Adds stylelint ignore file --- .stylelintignore | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .stylelintignore diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000..4ee2899 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,3 @@ +vendor/**/*.css +css/flick/** +**/*.png From e40a1e192e9889c9d7b8ef35e02df021e4a317fe Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 19:28:35 -1000 Subject: [PATCH 5/9] Ensures semantic markup --- views/setup_page.php | 121 +++++++++++++++++++++++++++++++------------ 1 file changed, 89 insertions(+), 32 deletions(-) diff --git a/views/setup_page.php b/views/setup_page.php index 884b524..3210334 100644 --- a/views/setup_page.php +++ b/views/setup_page.php @@ -9,7 +9,11 @@
-

+ + + + +

- + @@ -143,7 +147,8 @@ - + - + - - + +
-
Content Options
+ + -
+
+ + -
+
.
- - + + + +
@@ -231,28 +242,65 @@ - +
Remove Mailchimp CSS
onclick="showMe('mc-custom-styling')"/>
onclick="showMe('mc-custom-styling')"/>
- - - - - - - + + + + + + + + + + + + + + + + + + + + + + +
Custom Styling
/>
- px -
# - # -
# - # -
# - # -
Custom Styling
+ + + + /> + +
+ + + + px +
+ + + # + + # +
+ + + # + + # +
+ + + # + + # +

@@ -305,7 +353,7 @@ id="mc_update_existing" class="code" /> - + @@ -357,6 +405,15 @@ if ( ! $mv_var['required'] ) { $opt = 'mc_mv_' . $mv_var['tag']; ?> + /> - +
@@ -400,9 +457,9 @@ - @@ -431,7 +488,7 @@ } ?>
-
+ /> - +
+
From fd30c290da6c4382f9990f395fa58e1ae85d5d4f Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Sun, 16 Jun 2024 20:06:59 -1000 Subject: [PATCH 6/9] PHP syntax --- views/setup_page.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/views/setup_page.php b/views/setup_page.php index 3210334..6194e0d 100644 --- a/views/setup_page.php +++ b/views/setup_page.php @@ -405,7 +405,8 @@ if ( ! $mv_var['required'] ) { $opt = 'mc_mv_' . $mv_var['tag']; ?> - + ?> + /> Date: Mon, 17 Jun 2024 08:46:15 -0600 Subject: [PATCH 7/9] Ensure the href tag doesn't get removed; remove inline line-height style --- views/setup_page.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/views/setup_page.php b/views/setup_page.php index 6194e0d..64b562b 100644 --- a/views/setup_page.php +++ b/views/setup_page.php @@ -35,7 +35,7 @@ ?>

-

+

[ - 'href', + 'href' => [], ], 'strong' => [], ] From 412b786dce01b91ac5d56bf6326865ab4b33b243 Mon Sep 17 00:00:00 2001 From: Nate Conley Date: Tue, 18 Jun 2024 08:57:10 -1000 Subject: [PATCH 8/9] Admin page style updates --- css/admin.css | 34 ++++++++++++++++++++++------------ icon.svg | 1 - views/setup_page.php | 29 ++++++++++++++++------------- 3 files changed, 38 insertions(+), 26 deletions(-) delete mode 100644 icon.svg diff --git a/css/admin.css b/css/admin.css index 09fd511..1a8e1cc 100644 --- a/css/admin.css +++ b/css/admin.css @@ -9,6 +9,17 @@ --mailchimp-max-width: 56.25rem; /* 900 pixels */ } +.error_msg, +.success_msg, +.notes_msg, +table.mc-user, +.mc-list-row, +.mc-list-note, +.mc-section { + max-width: 900px; + width: 100%; +} + /* Header */ .mailchimp-header { align-items: center; @@ -57,7 +68,6 @@ table.mc-widefat tr:first-child th { line-height: 1; margin: 12px 0; padding: 9px; - width: 900px; } .success_msg, @@ -70,13 +80,11 @@ table.mc-widefat tr:first-child th { line-height: 1; margin: 12px 0; padding: 9px; - width: 900px; } /* User */ table.mc-user { margin-top: 19px; - width: 900px; } table.mc-user tr { @@ -102,7 +110,6 @@ table.mc-user tr { /* List Selection */ .mc-list-row { margin-bottom: 12px; - width: 900px; } .mc-list-row td:first-of-type { @@ -123,7 +130,6 @@ table.mc-user tr { margin-bottom: 8px; margin-top: 7px; padding: 0 0 18px; - width: 900px; } table.mc-list-select { @@ -131,7 +137,13 @@ table.mc-list-select { } /* Headings */ -.mailchimp-header h2, +.mailchimp-header h1 { + font-weight: 600; + margin: 0.75em 0; + padding: 0; +} + +.mailchimp-header h1, .mc-h2, .mc-h3, .mc-p { @@ -157,11 +169,9 @@ table.mc-list-select { margin-bottom: 0; } -.mc-a { +.mc-p a { color: var(--mailchimp-color-link); - font-size: 0.875rem; font-weight: 400; - margin-bottom: 0; } /* Table */ @@ -179,7 +189,7 @@ table.mc-widefat .last-row th { table.mc-widefat th { color: var(--mailchimp-color-text-light) !important; - font-weight: 700; + font-weight: 700 !important; width: 130px; } @@ -241,6 +251,6 @@ th.mailchimp-connect { width: 100% !important; } -#wpfooter { - margin-left: 0 !important; +#mc-message { + margin-top: 26px; } diff --git a/icon.svg b/icon.svg deleted file mode 100644 index 2daea1e..0000000 --- a/icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/views/setup_page.php b/views/setup_page.php index 9958b6d..7c7d724 100644 --- a/views/setup_page.php +++ b/views/setup_page.php @@ -13,7 +13,7 @@ <?php esc_html_e( 'Mailchimp Freddie', 'mailchimp_i18n' ); ?> -

+

-
+

-

+

%2$s', @@ -60,7 +60,7 @@ ); ?>

-
+
CSS Cheat Sheet
.widget_mailchimpsf_widget
@@ -95,7 +95,7 @@ // End of login form } else { // Start logout form ?> -
+
@@ -144,7 +144,7 @@ -

:

+
@@ -222,7 +222,7 @@ @@ -233,7 +233,7 @@
@@ -201,7 +201,7 @@
-
+
@@ -212,7 +212,7 @@
-
+
-
+
.
 - +
@@ -346,7 +346,7 @@
-
+

@@ -417,7 +417,9 @@ $igs = get_option( 'mc_interest_groups' ); if ( is_array( $igs ) && ! isset( $igs['id'] ) ) { ?> -

+
+

+
-
+
@@ -518,3 +520,4 @@
CSS Cheat Sheet
+
From 5c0967c7891770fce00e1de71b8ae84b51b4eb3d Mon Sep 17 00:00:00 2001 From: Darin Kotter Date: Tue, 18 Jun 2024 13:55:46 -0600 Subject: [PATCH 9/9] Ensure the admin error messages are styled a bit more so they are obviously errors --- mailchimp.php | 4 ++-- views/setup_page.php | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/mailchimp.php b/mailchimp.php index 2779cf6..44cc127 100644 --- a/mailchimp.php +++ b/mailchimp.php @@ -227,14 +227,14 @@ function mailchimp_sf_request_handler() { try { $api = new MailChimp_API( $key ); } catch ( Exception $e ) { - $msg = '' . $e->getMessage() . ''; + $msg = '' . $e->getMessage() . ''; mailchimp_sf_global_msg( $msg ); break; } $key = mailchimp_sf_verify_key( $api ); if ( is_wp_error( $key ) ) { - $msg = '' . $key->get_error_message() . ''; + $msg = '' . $key->get_error_message() . ''; mailchimp_sf_global_msg( $msg ); } diff --git a/views/setup_page.php b/views/setup_page.php index 7c7d724..5da18ff 100644 --- a/views/setup_page.php +++ b/views/setup_page.php @@ -132,7 +132,7 @@ if ( count( $lists ) === 0 ) { ?> - +
Mailchimp" ); ?> - +