diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss
index 49f9b2a01..2628f2ed5 100644
--- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss
+++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss
@@ -51,13 +51,14 @@
}
.ChooseSearchView__subtitle {
- margin-bottom: 47px;
+ margin-bottom: 12px;
text-align: center;
}
.ChooseSearchView__optionsContainer {
display: grid;
grid-template-columns: 1fr 1fr;
+ margin-bottom: 15px;
}
diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
index a8a8210b9..b99f1ce2e 100644
--- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
+++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx
@@ -222,9 +222,11 @@ class ChoosePlanView extends React.Component {
{showCTAButton && (
- setSetupStep({ setup_step: CHOOSE_PLAN, dawn_setup_number: PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
- {t('ghostery_dawn_onboarding_keep')}
-
+
+ setSetupStep({ setup_step: CHOOSE_PLAN, dawn_setup_number: PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
+ {t('ghostery_dawn_onboarding_keep')}
+
+
)}
);
@@ -266,7 +268,9 @@ class ChoosePlanView extends React.Component {
{showCTAButton && (
- this.setSetupStepAndMoveToSuccessView(PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION)}>{t('ghostery_dawn_onboarding_upgrade')}
+
)}
);
diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss
index e3a8e3962..1d12b8aa9 100644
--- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss
+++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss
@@ -12,6 +12,7 @@
*/
$medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow to next line
+$plan-card-width: 250px;
.ChoosePlanView {
margin: 45px auto 0 auto;
@@ -62,7 +63,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
.ChoosePlanView__searchPromoContainer {
width: 354px;
height: 381px;
- margin: 48px auto 0 auto;
+ margin: 48px auto;
border-radius: 4px;
border: solid 4px $ghosty-blue;
}
@@ -103,10 +104,11 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
}
.ChoosePlanView__searchCTAButton {
+ display: flex;
justify-content: center;
- margin: 48px auto 0 auto;
min-height: 44px;
min-width: 162px;
+ max-width: $plan-card-width;
padding: 7.7px 14px;
line-height: 22px;
background: linear-gradient(
@@ -138,9 +140,9 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
.ChoosePlanView__premiumCTAButton {
display: flex;
justify-content: center;
- margin: 48px auto 0 auto;
height: 44px;
- width: 162px;
+ min-width: 162px;
+ max-width: $plan-card-width;
padding: 7.7px 14px;
line-height: 22px;
background: linear-gradient(
@@ -205,6 +207,11 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
}
.ChoosePlanView__keepOrUpgradeContainer {
margin: 40px auto;
+
+ .ChoosePlanView__cardOuter {
+ height: 680px;
+ margin-bottom: rem-calc(50);
+ }
}
.ChoosePlanView__arrow {
margin: 15px auto 0 auto;
@@ -224,7 +231,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
.ChoosePlanView__card {
height: 100%;
box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5);
- margin-bottom: rem-calc(40);
+ margin-bottom: rem-calc(50);
width: 250px;
margin-left: auto;
margin-right: auto;