From fee8a343c706d0ac472eefc3d2e8305e4ef231fe Mon Sep 17 00:00:00 2001
From: wlycdgr <ilya.zarembsky@gmail.com>
Date: Mon, 22 Mar 2021 12:09:33 -0400
Subject: [PATCH] Make plan cards same size when Basic user chooses Glow to
 match specs & improve appearance. Tweak some margins on Default Search and
 Choose Plan views to match specs and improve appearance.

---
 .../ChooseDefaultSearchView.scss                |  3 ++-
 .../Step4_ChoosePlanView/ChoosePlanView.jsx     | 12 ++++++++----
 .../Step4_ChoosePlanView/ChoosePlanView.scss    | 17 ++++++++++++-----
 3 files changed, 22 insertions(+), 10 deletions(-)

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 {
 					</div>
 				</div>
 				{showCTAButton && (
-					<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, dawn_setup_number: PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
-						<span>{t('ghostery_dawn_onboarding_keep')}</span>
-					</NavLink>
+					<div className="ChoosePlanView__searchCTAButtonContainer">
+						<NavLink className="ChoosePlanView__searchCTAButton" to="/onboarding/5" onClick={() => setSetupStep({ setup_step: CHOOSE_PLAN, dawn_setup_number: PLUS_SUBSCRIBER_KEEP_SUBSCRIPTION, origin: ONBOARDING })}>
+							<span>{t('ghostery_dawn_onboarding_keep')}</span>
+						</NavLink>
+					</div>
 				)}
 			</Fragment>
 		);
@@ -266,7 +268,9 @@ class ChoosePlanView extends React.Component {
 					</div>
 				</div>
 				{showCTAButton && (
-					<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION)}>{t('ghostery_dawn_onboarding_upgrade')}</a>
+					<div className="ChoosePlanView__searchCTAButtonContainer">
+						<a className="ChoosePlanView__premiumCTAButton" href={premiumCheckoutLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(PLUS_SUBSCRIBER_PREMIUM_SUBSCRIPTION)}>{t('ghostery_dawn_onboarding_upgrade')}</a>
+					</div>
 				)}
 			</Fragment>
 		);
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;