From 70662bcdfb00800a85203df106dcab089fd3e96a Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 17 Dec 2019 15:55:07 -0500 Subject: [PATCH 1/4] CSS changes to better accommodate different locale strings --- .../PremiumPromoModal/PremiumPromoModal.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss index c100f37cb..142e0161d 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -26,7 +26,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__midnight-logo { width: 177px; - height: 106px; + height: 103px; margin: 22px 0px 16px; background-image: url('/app/images/panel/midnight-logo.svg'); } @@ -39,7 +39,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__header-text { text-align: center; - font-size: 20px; + font-size: 16px; font-weight: bold; font-family: $standard-font-family; } @@ -56,7 +56,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti margin: 9px 0px 22px; width: 438px; text-align: center; - font-size: 18px; + font-size: 14px; font-weight: bold; line-height: 1.5; color: #4A4A4A; @@ -65,7 +65,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__features-container { display: flex; width: 100%; - margin-bottom: 28px; + margin-bottom: 18px; } .PremiumPromoModal__feature-column { @@ -109,7 +109,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti background-color: #e7ecee; margin-bottom: 3px; width: 99%; - height: 107px; + height: 100px; z-index: -1; display: flex; flex-direction: column; @@ -123,9 +123,9 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti } .PremiumPromoModal__download-button { - width: 196px; height: 36px; border-radius: 2px; + padding: 0px 20px 0px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); background-image: linear-gradient(101deg, #720174 19%, #00aef0 100%); @@ -158,7 +158,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__text-link { margin-left: 10px; margin-right: 10px; - font-size: 15px; + font-size: 12px; font-family: $standard-font-family; color: #4a4a4a; text-decoration: underline; From 40f4ae91eac80f80440812a4359b8d29fbc18a1e Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 17 Dec 2019 17:59:40 -0500 Subject: [PATCH 2/4] Additional CSS fixes to make sure the Premium modal looks nice in as many languages as possible --- .../PremiumPromoModal/PremiumPromoModal.jsx | 61 +++++++++---------- .../PremiumPromoModal/PremiumPromoModal.scss | 24 ++++---- 2 files changed, 43 insertions(+), 42 deletions(-) diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx index be9f72553..4a8576af1 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx @@ -51,42 +51,41 @@ const PremiumPromoModal = (props) => { )}
-
-
- {t('try_ghostery_midnight')} -
+
+
+
+ {t('try_ghostery_midnight')} +
+
-
-
-
- {t('full_coverage_protection_promise')} -
-
-
-
- -
- {t('system_wide_tracker_and_ad_blocking')} +
+
+
+
+ +
+ {t('system_wide_tracker_and_ad_blocking')} +
-
-
- -
- {t('built_in_vpn')} +
+ +
+ {t('built_in_vpn')} +
-
-
-
- -
- {t('custom_whitelist_options')} +
+
+ +
+ {t('custom_whitelist_options')} +
-
-
- -
- {t('historical_tracking_insights')} +
+ +
+ {t('historical_tracking_insights')} +
diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss index 142e0161d..e34113bb3 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -27,19 +27,21 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__midnight-logo { width: 177px; height: 103px; - margin: 22px 0px 16px; + margin: 12px 0px 6px; background-image: url('/app/images/panel/midnight-logo.svg'); } -.PremiumPromoModal__header { +#ivzflex { display: flex; - width: 95%; - justify-content: space-around; // Edge does not support space-evenly + flex-direction: column; + align-items: center; + height: 210px; + justify-content: space-evenly; } .PremiumPromoModal__header-text { text-align: center; - font-size: 16px; + font-size: 24px; font-weight: bold; font-family: $standard-font-family; } @@ -53,10 +55,10 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti } .PremiumPromoModal__sub-header { - margin: 9px 0px 22px; width: 438px; + margin-bottom: 12px; text-align: center; - font-size: 14px; + font-size: 18px; font-weight: bold; line-height: 1.5; color: #4A4A4A; @@ -65,7 +67,6 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__features-container { display: flex; width: 100%; - margin-bottom: 18px; } .PremiumPromoModal__feature-column { @@ -74,7 +75,6 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti width: 55%; } &:nth-child(even) { - margin-left: -12px; margin-right: 25px; width: 45%; } @@ -84,7 +84,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti display: flex; align-items: center; &:nth-child(1) { - margin-bottom: 20px; + margin-bottom: 4px; } } @@ -109,11 +109,13 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti background-color: #e7ecee; margin-bottom: 3px; width: 99%; - height: 100px; + height: 90px; z-index: -1; display: flex; flex-direction: column; justify-content: space-around; // Edge does not support space-evenly + position: absolute; + bottom: 1px; } .PremiumPromoModal__button-container { From 1a5a3696a0084341f6fc624c9791ccbc3e3f15f6 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Tue, 17 Dec 2019 18:03:31 -0500 Subject: [PATCH 3/4] CSS cleanup for Premium promo modal --- app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx | 2 +- .../PremiumPromoModal/PremiumPromoModal.scss | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx index 4a8576af1..96a3efc3d 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx @@ -51,7 +51,7 @@ const PremiumPromoModal = (props) => { )}
-
+
{t('try_ghostery_midnight')} diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss index e34113bb3..2efb25e78 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -31,11 +31,11 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti background-image: url('/app/images/panel/midnight-logo.svg'); } -#ivzflex { +.PremiumPromoModal__main-content-container { + height: 210px; display: flex; flex-direction: column; align-items: center; - height: 210px; justify-content: space-evenly; } From 592045989abd8af08aaa25ec8e78fbe9fc86e5a6 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Wed, 18 Dec 2019 11:13:06 -0500 Subject: [PATCH 4/4] Rearrange strings in Premium promo modal based on feedback from product --- .../PremiumPromoModal/PremiumPromoModal.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx index 96a3efc3d..b1fa7018f 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx @@ -58,7 +58,7 @@ const PremiumPromoModal = (props) => {
-
+
{t('full_coverage_protection_promise')}
@@ -78,14 +78,12 @@ const PremiumPromoModal = (props) => {
- {t('custom_whitelist_options')} + {t('historical_tracking_insights')}
-
- {t('historical_tracking_insights')} -
+