diff --git a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx index be9f72553..b1fa7018f 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx @@ -51,42 +51,39 @@ const PremiumPromoModal = (props) => { )}
-
-
- {t('try_ghostery_midnight')} -
+
+
+
+ {t('try_ghostery_midnight')} +
+
-
-
-
- {t('full_coverage_protection_promise')} -
-
-
-
- -
- {t('system_wide_tracker_and_ad_blocking')} +
{t('full_coverage_protection_promise')}
+
+
+
+ +
+ {t('system_wide_tracker_and_ad_blocking')} +
-
-
- -
- {t('built_in_vpn')} +
+ +
+ {t('built_in_vpn')} +
-
-
-
- -
- {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 c100f37cb..2efb25e78 100644 --- a/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss +++ b/app/shared-components/PremiumPromoModal/PremiumPromoModal.scss @@ -26,20 +26,22 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__midnight-logo { width: 177px; - height: 106px; - margin: 22px 0px 16px; + height: 103px; + margin: 12px 0px 6px; background-image: url('/app/images/panel/midnight-logo.svg'); } -.PremiumPromoModal__header { +.PremiumPromoModal__main-content-container { + height: 210px; display: flex; - width: 95%; - justify-content: space-around; // Edge does not support space-evenly + flex-direction: column; + align-items: center; + justify-content: space-evenly; } .PremiumPromoModal__header-text { text-align: center; - font-size: 20px; + font-size: 24px; font-weight: bold; font-family: $standard-font-family; } @@ -53,8 +55,8 @@ $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: 18px; font-weight: bold; @@ -65,7 +67,6 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti .PremiumPromoModal__features-container { display: flex; width: 100%; - margin-bottom: 28px; } .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: 107px; + 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 { @@ -123,9 +125,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 +160,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;