GH-1895 and GH-1896: CSS and string fixes for Edge

_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"

app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx

@@ -56,7 +56,7 @@ const PremiumPromoModal = (props) => {
 						<span>{t('try_ghostery_midnight')}</span>
 						<div className="PremiumPromoModal__header-beta-icon" />
 					</div>
-					<div className="PremiumPromoModal__header-text">{t('seven_day_free_trial')}</div>
+					<div className="PremiumPromoModal__header-text" dangerouslySetInnerHTML={{ __html: t('seven_day_free_trial') }} />
 				</div>
 				<div className="PremiumPromoModal__sub-header">
 					{t('full_coverage_protection_promise')}
@@ -99,9 +99,7 @@ const PremiumPromoModal = (props) => {
 					</div>
 					<div className="PremiumPromoModal__text-link-container">
 						{!isPlus && (
-							<div onClick={handleGetPlusClick} className="PremiumPromoModal__text-link">
-								{t('support_ghostery_for_2_instead')}
-							</div>
+							<div onClick={handleGetPlusClick} className="PremiumPromoModal__text-link" dangerouslySetInnerHTML={{ __html: t('support_ghostery_for_2_instead') }} />
 						)}
 						{isInHub && (
 							<div onClick={handleKeepBasicClick} className="PremiumPromoModal__text-link">

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-around; // Edge does not support 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;
 }