Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-1693: Premium promo modal translation string ui fixes #489

Merged
merged 4 commits into from Dec 18, 2019
+43 −44
Merged

GH-1693: Premium promo modal translation string ui fixes #489

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70662bc
CSS changes to better accommodate different locale strings
wlycdgr Dec 17, 2019
40f4ae9
Additional CSS fixes to make sure the Premium modal looks nice in as …
wlycdgr Dec 17, 2019
1a5a369
CSS cleanup for Premium promo modal
wlycdgr Dec 17, 2019
5920459
Rearrange strings in Premium promo modal based on feedback from product
wlycdgr Dec 18, 2019
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

59 app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx
View file
Open in desktop
@@ -51,42 +51,39 @@ const PremiumPromoModal = (props) => {
<ModalExitButton className="InsightsModal__exitButton" toggleModal={handleXClick} />
)}
<div className="PremiumPromoModal__midnight-logo" />
<div className="PremiumPromoModal__header">
<div className="PremiumPromoModal__header-text">
<span>{t('try_ghostery_midnight')}</span>
<div className="PremiumPromoModal__header-beta-icon" />
<div className="PremiumPromoModal__main-content-container">
<div className="PremiumPromoModal__header">
<div className="PremiumPromoModal__header-text">
<span>{t('try_ghostery_midnight')}</span>
<div className="PremiumPromoModal__header-beta-icon" />
</div>
</div>
<div className="PremiumPromoModal__header-text" dangerouslySetInnerHTML={{ __html: t('seven_day_free_trial') }} />
</div>
<div className="PremiumPromoModal__sub-header">
{t('full_coverage_protection_promise')}
</div>
<div className="PremiumPromoModal__features-container">
<div className="PremiumPromoModal__feature-column">
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('system_wide_tracker_and_ad_blocking')}
<div className="PremiumPromoModal__sub-header">{t('full_coverage_protection_promise')}</div>
<div className="PremiumPromoModal__features-container">
<div className="PremiumPromoModal__feature-column">
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('system_wide_tracker_and_ad_blocking')}
</div>
</div>
</div>
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('built_in_vpn')}
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('built_in_vpn')}
</div>
</div>
</div>
</div>
<div className="PremiumPromoModal__feature-column">
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('custom_whitelist_options')}
<div className="PremiumPromoModal__feature-column">
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('historical_tracking_insights')}
</div>
</div>
</div>
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text">
{t('historical_tracking_insights')}
<div className="PremiumPromoModal__feature">
<span className="PremiumPromoModal__checked-circle-icon" />
<div className="PremiumPromoModal__feature-text" dangerouslySetInnerHTML={{ __html: t('seven_day_free_trial') }} />
</div>
</div>
</div>
28 app/shared-components/PremiumPromoModal/PremiumPromoModal.scss
View file
Open in desktop
@@ -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;
ProTip! Use n and p to navigate between commits in a pull request.