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_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, }); 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 d03416f34..67fa068d7 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_dawn_onboarding_sync_settings') }
{view === CREATE_ACCOUNT && ( -
setView(SIGN_IN)}>{t('ghostery_dawn_onboarding_already_have_account')}
+
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
)} {view === SIGN_IN && ( -
setView(CREATE_ACCOUNT)}>{t('ghostery_dawn_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 d25ecef48..8a50b974a 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..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; + margin-top: 15px; @include breakpoint(small down) { - margin-top: 20px; + margin-top: -21px; } .ChooseSearchView__back { margin-top: 8px; @@ -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.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index a82c80be1..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,10 +35,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: 7px; .ChoosePlanView__back { margin-top: 8px; font-size: 16px; @@ -176,6 +175,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 { @@ -213,7 +213,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; @@ -330,15 +330,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; @@ -346,6 +343,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..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,8 +37,8 @@ display: flex; width: 68px; margin-top: 142px; - @include breakpoint(small down) { - margin-top: 90px; + @include breakpoint(medium down) { + margin-top: 100px; } .SuccessView__back { margin-top: 8px; @@ -52,7 +52,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 +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/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index a8bd86786..5eeee3d12 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -29,7 +29,7 @@ .StepProgressBar__Step { height: 34px; width: 32px; - margin-left: 3px; + margin: auto; &.step-1 { &.current { @@ -88,9 +88,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 7fa82e84b..81faf55fc 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; &.dawn-hub { z-index: 1; max-width: 700px;