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

Leet tool character limits and misc fixes #662

Merged
merged 4 commits into from Jan 22, 2021
+54 −27
Merged

Leet tool character limits and misc fixes #662

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
034389f
Use leet tool for character limits, make toast index higher, fix step…
benstrumeyer Jan 21, 2021
d320a18
Merge branch 'ghostery-browser-intro-hub' into leet-tool
benstrumeyer Jan 21, 2021
34daf59
Add password match error
benstrumeyer Jan 21, 2021
682e1ae
Fix back button spacings
benstrumeyer Jan 21, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Next
Loading status checks…

Use leet tool for character limits, make toast index higher, fix step… 

… progress bar dots on large screens
  • Loading branch information
@benstrumeyer
benstrumeyer committed Jan 21, 2021
commit 034389f754ab2bc9233464f216af62de1b56a065
11 app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx
View file
Open in desktop
@@ -13,11 +13,12 @@

import React from 'react';
import PropTypes from 'prop-types';
import ClassNames from 'classnames';
import { Route } from 'react-router-dom';

import StepProgressBar from '../OnboardingViews/StepProgressBar';
import StepNavigator from '../OnboardingViews/StepNavigator';
import { CHOOSE_PLAN } from './OnboardingConstants';
import { BLOCK_SETTINGS, CHOOSE_DEFAULT_SEARCH, CHOOSE_PLAN } from './OnboardingConstants';

/**
* A Functional React component for rendering the Onboarding View
@@ -28,6 +29,12 @@ const OnboardingView = (props) => {
const { sendMountActions, steps } = props;
console.log('in OnboardingView');

const getScreenContainerClassNames = index => ClassNames('OnboardingView__screenContainer', {
step2: index === BLOCK_SETTINGS,
step3: index === CHOOSE_DEFAULT_SEARCH,
step4: index === CHOOSE_PLAN
});

This conversation was marked as resolved by wlycdgr
Comment on lines +32 to +37

This comment has been minimized.

Sign in to view
@wlycdgr

wlycdgr Jan 22, 2021
Member

Nice idea
return (
<div className="full-height flex-container flex-dir-column android-relative">
<div className="flex-child-grow">
@@ -36,7 +43,7 @@ const OnboardingView = (props) => {
key={`route-${step.index}`}
path={step.path}
render={() => (
<div className={step.index === CHOOSE_PLAN ? 'OnboardingView__screenContainer step4' : 'OnboardingView__screenContainer'}>
<div className={getScreenContainerClassNames(step.index)}>
<StepProgressBar currentStep={step.index} />
<StepNavigator step={step.index} components={step.bodyComponents} sendMountActions={sendMountActions} />
</div>
6 app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss
View file
Open in desktop
@@ -3,6 +3,12 @@
margin: 0 auto;
padding: 0 20px;

&.step2 {
max-width: 714px;
}
&.step3 {
max-width: 728px;
}
&.step4 {
max-width: 910px;
}
3 app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss
View file
Open in desktop
@@ -23,6 +23,7 @@
font-size: 24px;
font-weight: 600;
line-height: 2.33;
text-align: center;
}

.WelcomeView__subtitle {
@@ -43,7 +44,7 @@
display: flex;
justify-content: center;
margin: 0 auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
5 ...ry-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss
View file
Open in desktop
@@ -48,6 +48,9 @@
color: red;
}
}
.Step1_CreateAccountForm__checkboxContainer {
margin-top: 36px;
}
.Step1_CreateAccountForm__legalConsentCheckedLabel {
font-size: 14px;
@include breakpoint(small down) {
@@ -64,7 +67,7 @@

.Step1_CreateAccountForm__ctaButton {
margin: 48px auto 0 auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
5 ...ery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx
View file
Open in desktop
@@ -91,12 +91,11 @@ const Step1_CreateAccountView = (props) => {
<div className="Step1_CreateAccountView__subtitle">{ t('ghostery_browser_hub_onboarding_sync_settings') }</div>
<div className="row align-center-middle">
{view === CREATE_ACCOUNT && (
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" onClick={() => setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}</div>
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12" onClick={() => setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}</div>
)}
{view === SIGN_IN && (
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" onClick={() => setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}</div>
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12" onClick={() => setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}</div>
)}
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" />
</div>
{view === CREATE_ACCOUNT ? (
<Fragment>
2 ...ry-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss
View file
Open in desktop
@@ -35,7 +35,7 @@ $color-create-account-form-error-red: #e74055;

.Step1_CreateAccountView__ctaButton {
margin: 48px auto 0 auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
2 app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss
View file
Open in desktop
@@ -76,7 +76,7 @@

.Step1_LogInForm__ctaButton {
margin: 48px auto 0 auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
8 ...ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss
View file
Open in desktop
@@ -40,7 +40,7 @@
display: flex;
width: 68px;
margin-top: 60px;
@include breakpoint(small down) {
@include breakpoint(xlarge down) {
margin-top: 22px;
}
.BlockSettingsView__back {
@@ -56,6 +56,10 @@
font-weight: 500;
line-height: 2.33;
text-align: center;
@include breakpoint(xxlarge down) {
max-width: 580px;
margin: auto;
}
}

.BlockSettingsView__subtitle {
@@ -72,7 +76,7 @@
display: flex;
justify-content: center;
margin: auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
6 ...wser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss
View file
Open in desktop
@@ -30,7 +30,7 @@
display: flex;
width: 68px;
margin-top: 61px;
@include breakpoint(small down) {
@include breakpoint(xlarge down) {
margin-top: 20px;
}
.ChooseSearchView__back {
@@ -47,6 +47,10 @@
font-weight: 500;
line-height: 2.33;
text-align: center;
@include breakpoint(xxlarge down) {
max-width: 400px;
margin: auto;
}
}

.ChooseSearchView__subtitle {
4 app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
View file
Open in desktop
@@ -54,7 +54,9 @@ const basicCard = (checked, handleClick) => {
<div className="ChoosePlanView__valuePropList basic">
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
{t('ghostery_browser_hub_onboarding_private_search')}
<span>
{t('ghostery_browser_hub_onboarding_private_search')}
</span>
</div>
<div className="ChoosePlanView__cardSubCopy">
<span className="check blue" />
14 app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss
View file
Open in desktop
@@ -33,10 +33,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
position: absolute;
display: flex;
width: 68px;
margin-top: 52px;
@include breakpoint(small down) {
position: relative;
}
margin-top: 10px;
.ChoosePlanView__back {
margin-top: 8px;
font-size: 16px;
@@ -175,6 +172,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
flex-direction: column;
justify-content: center;
margin: 0 15px;
min-height: 670px;
}
}
.ChoosePlanView__orCardContainer {
@@ -212,7 +210,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
}
}
.ChoosePlanView__card {
height: 670px;
height: 100%;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5);
margin-bottom: rem-calc(40);
width: 250px;
@@ -329,22 +327,20 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
.ChoosePlanView__valuePropList {
margin: auto;
width: 174px;

&.basic {
width: 145px;
}
}
.ChoosePlanView__cardSubCopy {
display: flex;
justify-content: flex-start;
margin-bottom: 5px;
text-align: left;
}
.check {
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
margin-top: 3px;
padding-right: 20px;
&.blue {
background-image: buildCheckIcon($price-blue);
}
8 app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss
View file
Open in desktop
@@ -37,9 +37,6 @@
display: flex;
width: 68px;
margin-top: 142px;
@include breakpoint(small down) {
margin-top: 90px;
}
.SuccessView__back {
margin-top: 8px;
font-size: 16px;
@@ -52,7 +49,10 @@
margin-top: 125px;
font-size: 24px;
font-weight: 600;
max-width: 450px;
line-height: 2.33;
text-align: center;
max-width: 430px;
}

.SuccessView__subtitle {
@@ -73,7 +73,7 @@
display: flex;
justify-content: center;
margin: auto;
height: 44px;
min-height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
4 app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss
View file
Open in desktop
@@ -24,7 +24,7 @@
.StepProgressBar__Step {
height: 34px;
width: 32px;
margin-left: 3px;
margin: auto;

&.step-1 {
&.current {
@@ -77,9 +77,9 @@
}
.StepProgressBar__label {
margin-bottom: 14px;
width: 38px;
font-size: 12px;
color: $tundora;
white-space: nowrap;
&.current {
font-weight: 700;
}
1 app/shared-components/ToastMessage/ToastMessage.scss
View file
Open in desktop
@@ -16,6 +16,7 @@
position: relative;
top: 30px;
height: 0;
z-index: 30;
}
.ToastMessage__close {
height: 13px;
ProTip! Use n and p to navigate between commits in a pull request.