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 1 commit
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
Clear filters
Jump to
Jump to file
Failed to load files.

Always

Just for now

Prev Next
Additional CSS fixes to make sure the Premium modal looks nice in as … 
…many languages as possible
  • Loading branch information
@wlycdgr
wlycdgr committed Dec 17, 2019
commit 40f4ae91eac80f80440812a4359b8d29fbc18a1e
61 app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx
View file
Open in desktop
@@ -51,42 +51,41 @@ 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 id="ivzflex">
<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" dangerouslySetInnerHTML={{ __html: `${t('full_coverage_protection_promise')}. ${t('seven_day_free_trial')}` }} />
<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('custom_whitelist_options')}
</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">
{t('historical_tracking_insights')}
</div>
</div>
</div>
</div>
24 app/shared-components/PremiumPromoModal/PremiumPromoModal.scss
View file
Open in desktop
@@ -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 {
ProTip! Use n and p to navigate between commits in a pull request.