From 034389f754ab2bc9233464f216af62de1b56a065 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 21 Jan 2021 03:34:48 -0500 Subject: [PATCH 1/3] Use leet tool for character limits, make toast index higher, fix step progress bar dots on large screens --- .../Views/OnboardingView/OnboardingView.jsx | 11 +++++++++-- .../Views/OnboardingView/OnboardingView.scss | 6 ++++++ .../Step0_WelcomeView/WelcomeView.scss | 3 ++- .../Step1_CreateAccountForm.scss | 5 ++++- .../Step1_CreateAccountView.jsx | 5 ++--- .../Step1_CreateAccountView.scss | 2 +- .../Step1_LogInForm/Step1_LogInForm.scss | 2 +- .../Step2_BlockSettingsView/BlockSettingsView.scss | 8 ++++++-- .../ChooseDefaultSearchView.scss | 6 +++++- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 4 +++- .../Step4_ChoosePlanView/ChoosePlanView.scss | 14 +++++--------- .../Step5_SuccessView/SuccessView.scss | 8 ++++---- .../StepProgressBar/StepProgressBar.scss | 4 ++-- .../ToastMessage/ToastMessage.scss | 1 + 14 files changed, 51 insertions(+), 28 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx index dc265c27b..220d7aaba 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx @@ -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 + }); + return (
@@ -36,7 +43,7 @@ const OnboardingView = (props) => { key={`route-${step.index}`} path={step.path} render={() => ( -
+
diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss index e05ccd34f..9e5972221 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss @@ -3,6 +3,12 @@ margin: 0 auto; padding: 0 20px; + &.step2 { + max-width: 714px; + } + &.step3 { + max-width: 728px; + } &.step4 { max-width: 910px; } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss index 935bc6de3..e327db797 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss index c7e02dcfd..ab27dedf5 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index ca105bfa4..e4c1cd4e3 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -91,12 +91,11 @@ const Step1_CreateAccountView = (props) => {
{ t('ghostery_browser_hub_onboarding_sync_settings') }
{view === CREATE_ACCOUNT && ( -
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
+
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
)} {view === SIGN_IN && ( -
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
+
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
)} -
{view === CREATE_ACCOUNT ? ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss index 9239c1012..59be428f7 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss index bb8bfdf30..b532fa9a5 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss index 8482b7f7a..cce8403c5 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 3c66218d3..33279ce15 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -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 { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 6ca34da40..8683e77b0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -54,7 +54,9 @@ const basicCard = (checked, handleClick) => {
- {t('ghostery_browser_hub_onboarding_private_search')} + + {t('ghostery_browser_hub_onboarding_private_search')} +
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 02a71cd6b..bf32d41c8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -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,15 +327,12 @@ $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; @@ -345,6 +340,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t height: 20px; background-repeat: no-repeat; margin-top: 3px; + padding-right: 20px; &.blue { background-image: buildCheckIcon($price-blue); } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss index 9ac706a72..274c1e33a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -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; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index da4abb86e..21ff9504d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -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; } diff --git a/app/shared-components/ToastMessage/ToastMessage.scss b/app/shared-components/ToastMessage/ToastMessage.scss index 4040110fa..598035b5e 100644 --- a/app/shared-components/ToastMessage/ToastMessage.scss +++ b/app/shared-components/ToastMessage/ToastMessage.scss @@ -16,6 +16,7 @@ position: relative; top: 30px; height: 0; + z-index: 30; } .ToastMessage__close { height: 13px; From 34daf595f66d3cb91a583524bf209526f3cc37e2 Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 21 Jan 2021 10:49:17 -0500 Subject: [PATCH 2/3] Add password match error --- .../Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx index de260dd49..cbfad3293 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx @@ -141,6 +141,7 @@ class CreateAccountFormContainer extends Component { legalConsentNotCheckedError: !legalConsentChecked, passwordInvalidError: invalidChars, passwordLengthError: invalidLength, + confirmPasswordError, validateInput: true, }); From 682e1ae0f97ecc0604bf01d14a6e8bdf230af55b Mon Sep 17 00:00:00 2001 From: Ben Date: Thu, 21 Jan 2021 13:20:33 -0500 Subject: [PATCH 3/3] Fix back button spacings --- .../ChooseDefaultSearchView.scss | 6 +++--- .../Step4_ChoosePlanView/ChoosePlanView.scss | 4 +++- .../OnboardingViews/Step5_SuccessView/SuccessView.scss | 3 +++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 33279ce15..03138388a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -29,9 +29,9 @@ position: absolute; display: flex; width: 68px; - margin-top: 61px; - @include breakpoint(xlarge down) { - margin-top: 20px; + margin-top: 15px; + @include breakpoint(small down) { + margin-top: -21px; } .ChooseSearchView__back { margin-top: 8px; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 9b4fd65bc..8a5eb64ec 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -18,6 +18,8 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t padding-bottom: 20px; } .ChoosePlanView__relativeContainer { + width: 724px; + margin: auto; position: relative; } .ChoosePlanView__caret.left { @@ -33,7 +35,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t position: absolute; display: flex; width: 68px; - margin-top: 10px; + margin-top: 7px; .ChoosePlanView__back { margin-top: 8px; font-size: 16px; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss index 274c1e33a..fbc607f97 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -37,6 +37,9 @@ display: flex; width: 68px; margin-top: 142px; + @include breakpoint(medium down) { + margin-top: 100px; + } .SuccessView__back { margin-top: 8px; font-size: 16px;