From 1e9c6829a2981e7e016381b76b28141ef6cc244b Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 16 Dec 2019 16:38:55 -0500 Subject: [PATCH 1/2] Ensure dollar sign and formatting look right in Premium promo modal in both Edge and in normal browsers. --- _locales/en/messages.json | 6 +-- .../PremiumPromoModal/PremiumPromoModal.jsx | 6 +-- .../PremiumPromoModal/PremiumPromoModal.scss | 53 ++++++++++--------- 3 files changed, 31 insertions(+), 34 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 11c1830e2..9821059b0 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2353,8 +2353,7 @@ "message": "Try Ghostery Midnight" }, "seven_day_free_trial": { - "message": "7 Day Free Trial ($$14/mo)", - "description": "Do not localize currency. Use the $14 USD amount. The second $ is needed to escape the special meaning of $" + "message": "7 Day Free Trial ($14/mo)" }, "full_coverage_protection_promise": { "message": "Get full-coverage protection across all browsers & apps on your device" @@ -2375,8 +2374,7 @@ "message": "Download for free" }, "support_ghostery_for_2_instead": { - "message": "Support Ghostery for $$2/mo instead", - "description": "Do not localize currency. Use the $2 USD amount. The second $ is needed to escape the special meaning of $" + "message": "Support Ghostery for $2/mo instead" }, "no_thanks_continue_with_basic": { "message": "No thanks, continue with basic" diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx index 600195aeb..be9f72553 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx @@ -56,7 +56,7 @@ const PremiumPromoModal = (props) => { {t('try_ghostery_midnight')}
-
{t('seven_day_free_trial')}
+
{t('full_coverage_protection_promise')} @@ -99,9 +99,7 @@ const PremiumPromoModal = (props) => {
{!isPlus && ( -
- {t('support_ghostery_for_2_instead')} -
+
)} {isInHub && (
diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss index 32817cc9f..b5e588d88 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -16,12 +16,12 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; .PremiumPromoModal__content { - position: relative; - z-index: 10; - width: 518px; - height: 437px; - border: solid 1.9px #720174; - background-color: #f7f7f7; + position: relative; + z-index: 10; + width: 518px; + height: 437px; + border: solid 1.9px #720174; + background-color: #f7f7f7; } .PremiumPromoModal__midnight-logo { @@ -33,8 +33,8 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__header { display: flex; - width: 100%; - justify-content: space-evenly; + width: 95%; + justify-content: space-around; // Edge does not support space-evenly } .PremiumPromoModal__header-text { @@ -106,19 +106,20 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti } .PremiumPromoModal__buttons-background { - background-color: #e7ecee; - margin-bottom: 3px; - width: 99%; - height: 107px; - z-index: -1; - display: flex; - flex-direction: column; - justify-content: space-evenly + background-color: #e7ecee; + margin-bottom: 3px; + width: 99%; + height: 107px; + z-index: -1; + display: flex; + flex-direction: column; + justify-content: space-around; // Edge does not support space-evenly } .PremiumPromoModal__button-container { display: flex; justify-content: center; + margin-top: 10px; } .PremiumPromoModal__download-button { @@ -150,17 +151,17 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti } .PremiumPromoModal__text-link-container { - display: flex; - justify-content: space-evenly; + display: flex; + justify-content: space-evenly; } .PremiumPromoModal__text-link { - margin-left: 10px; - margin-right: 10px; - font-size: 15px; - font-family: $standard-font-family; - color: #4a4a4a; - text-decoration: underline; - text-align: center; - cursor: pointer; + margin-left: 10px; + margin-right: 10px; + font-size: 15px; + font-family: $standard-font-family; + color: #4a4a4a; + text-decoration: underline; + text-align: center; + cursor: pointer; } From 6d5d4612b5ff532f41ffa130f7abc3e4ae3e54e6 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Mon, 16 Dec 2019 17:46:37 -0500 Subject: [PATCH 2/2] Text link container CSS fix for Edge --- app/shared-components/PremiumPromoModal/PremiumPromoModal.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss index b5e588d88..c100f37cb 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -152,7 +152,7 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__text-link-container { display: flex; - justify-content: space-evenly; + justify-content: space-around; // Edge does not support space-evenly } .PremiumPromoModal__text-link {