Skip to content
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

GH-2232: localization-related UI fixes #686

Merged
merged 8 commits into from Feb 12, 2021

Make sure Start Trial CTA button label fully visible in other languag…

…es. Other minor adjustment to Select Plan view layout to better deal with string length variation.
  • Loading branch information
wlycdgr committed Feb 11, 2021
commit ccbf17d969518caf71b9d58b99590b98f4ce2277
@@ -336,7 +336,9 @@ class ChoosePlanView extends React.Component {
{selectedGhosteryGlow && isBasic && (
<Fragment>
{searchPromo()}
<a className="ChoosePlanView__searchCTAButton" href={glowFreeTrialLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(FREE_USER_PLUS_TRIAL)}>{t('ghostery_dawn_onboarding_start_trial')}</a>
<div className="ChoosePlanView__searchCTAButtonContainer">
<a className="ChoosePlanView__searchCTAButton" href={glowFreeTrialLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(FREE_USER_PLUS_TRIAL)}>{t('ghostery_dawn_onboarding_start_trial')}</a>
</div>
<div className="ChoosePlanView__seeAllPlans" onClick={this.toggleSection}>{t('ghostery_dawn_onboarding_see_all_plans')}</div>
<div className={arrowClassNames} onClick={this.toggleSection} />
</Fragment>
@@ -56,6 +56,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
margin-top: 12px;
display: flex;
justify-content: center;
text-align: center;
font-size: 18px;
}
.ChoosePlanView__searchPromoContainer {
@@ -68,7 +69,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
.ChoosePlanView__searchLogo {
height: 36px;
width: 166px;
margin: 65px auto 0 auto;
margin: 50px auto 0 auto;
background-image: url('/app/images/hub/ChooseDefaultSearchView/search-engine-logo-ghosteryglow.svg');
}
.ChoosePlanView__adFree {
@@ -95,12 +96,17 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
text-align: center;
color: $tundora;
}

.ChoosePlanView__searchCTAButtonContainer {
display: flex;
justify-content: center;
}

.ChoosePlanView__searchCTAButton {
display: flex;
justify-content: center;
margin: 48px auto 0 auto;
height: 44px;
width: 162px;
min-height: 44px;
min-width: 162px;
padding: 7.7px 14px;
line-height: 22px;
background: linear-gradient(
ProTip! Use n and p to navigate between commits in a pull request.