@@ -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;