ghostery · christophertino · Feb 12, 2021 · Feb 11, 2021 · Feb 11, 2021 · Feb 11, 2021
@@ -45,7 +45,7 @@
 	justify-content: center;
 	margin: 0 auto;
 	min-height: 44px;
-	width: 162px;
+	min-width: 162px;
 	padding: 7.7px 14px;
 	line-height: 22px;
 	background: linear-gradient(

@@ -16,6 +16,12 @@ import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
 import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox';
 
+const renderLabel = (htmlFor, labelCopy) => (
+	<label htmlFor={htmlFor} className="Step1_CreateAccountForm__inputLabel">
+		<span>{labelCopy}</span>
+	</label>
+);
+
 /**
  * A Functional React component for rendering the Browser Create Account View
  * @return {JSX} JSX for rendering the Browser Create Account View of the Dawn Hub app
@@ -58,9 +64,7 @@ export const Step1_CreateAccountForm = (props) => {
 		<form onSubmit={handleSubmit}>
 			<div className="Step1_CreateAccountForm--addPaddingTop row align-center-middle">
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-email" className="Step1_CreateAccountForm__inputLabel">
-						{t('email_colon')}
-					</label>
+					{renderLabel('create-account-email', t('email_colon'))}
 					<input
 						id="create-account-email"
 						className={emailInputClassNames}
@@ -81,9 +85,7 @@ export const Step1_CreateAccountForm = (props) => {
 					)}
 				</div>
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-confirmEmail" className="Step1_CreateAccountForm__inputLabel">
-						{t('confirm_email_colon')}
-					</label>
+					{renderLabel('create-account-confirmEmail', t('confirm_email_colon'))}
 					<input
 						id="create-account-confirmEmail"
 						className={confirmInputClassNames}
@@ -105,9 +107,7 @@ export const Step1_CreateAccountForm = (props) => {
 			</div>
 			<div className="row align-center-middle">
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-firstName" className="Step1_CreateAccountForm__inputLabel">
-						{t('hub_create_account_label_first_name')}
-					</label>
+					{renderLabel('create-account-firstName', t('hub_create_account_label_first_name'))}
 					<input
 						id="create-account-firstName"
 						className="Step1_CreateAccountForm__inputBox"
@@ -120,9 +120,7 @@ export const Step1_CreateAccountForm = (props) => {
 					/>
 				</div>
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-lastName" className="Step1_CreateAccountForm__inputLabel">
-						{t('hub_create_account_label_email_last_name')}
-					</label>
+					{renderLabel('create-account-lastName', t('hub_create_account_label_email_last_name'))}
 					<input
 						id="create-account-lastName"
 						className="Step1_CreateAccountForm__inputBox"
@@ -137,9 +135,7 @@ export const Step1_CreateAccountForm = (props) => {
 			</div>
 			<div className="row align-center-middle">
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-password" className="Step1_CreateAccountForm__inputLabel">
-						{t('password_colon')}
-					</label>
+					{renderLabel('create-account-password', t('password_colon'))}
 					<input
 						id="create-account-password"
 						className={passwordInputClassNames}
@@ -166,9 +162,7 @@ export const Step1_CreateAccountForm = (props) => {
 					)}
 				</div>
 				<div className="columns small-10 medium-6">
-					<label htmlFor="create-account-password" className="Step1_CreateAccountForm__inputLabel">
-						{t('confirm_password_colon')}
-					</label>
+					{renderLabel('create-account-password', t('confirm_password_colon'))}
 					<input
 						id="create-account-password"
 						className={passwordInputClassNames}

@@ -15,9 +15,12 @@
 	padding-top: 20px;
 }
 .Step1_CreateAccountForm__inputLabel {
+  	display: flex;
 	font-size: 14px;
 	font-weight: 500;
-	line-height: 2.86;
+	line-height: 1.4;
+  	align-items: flex-end;
+  	height: 28px;
 	text-transform: uppercase;
 	color: #4a4a4a;
 }

@@ -16,7 +16,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-email"
       >
-        email_colon
+        <span>
+          email_colon
+        </span>
       </label>
       <input
         autoComplete="off"
@@ -37,7 +39,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-confirmEmail"
       >
-        confirm_email_colon
+        <span>
+          confirm_email_colon
+        </span>
       </label>
       <input
         autoComplete="off"
@@ -61,7 +65,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-firstName"
       >
-        hub_create_account_label_first_name
+        <span>
+          hub_create_account_label_first_name
+        </span>
       </label>
       <input
         autoComplete="off"
@@ -81,7 +87,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-lastName"
       >
-        hub_create_account_label_email_last_name
+        <span>
+          hub_create_account_label_email_last_name
+        </span>
       </label>
       <input
         autoComplete="off"
@@ -105,7 +113,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-password"
       >
-        password_colon
+        <span>
+          password_colon
+        </span>
       </label>
       <input
         autoComplete="off"
@@ -125,7 +135,9 @@ exports[`app/hub/Views/Step1_CreateAccountForm component Snapshot tests with rea
         className="Step1_CreateAccountForm__inputLabel"
         htmlFor="create-account-password"
       >
-        confirm_password_colon
+        <span>
+          confirm_password_colon
+        </span>
       </label>
       <input
         autoComplete="off"

@@ -52,13 +52,14 @@
 }
 
 .BlockSettingsView__title {
+  	margin-top: 30px;
 	font-size: 24px;
 	font-weight: 500;
-	line-height: 2.33;
+	line-height: 1.3;
 	text-align: center;
 	@include breakpoint(xxlarge down) {
-		max-width: 580px;
-		margin: auto;
+		max-width: 450px;
+		margin: 30px auto auto auto;
 	}
 }
 

@@ -280,7 +280,7 @@ class ChooseDefaultSearchView extends Component {
 		return (
 			<Modal show>
 				<div className="ChooseSearchView__modalContent">
-					<img src="/app/images/hub/ChooseDefaultSearchView/ghostery-browser-logo.svg" />
+					<img className="ChooseSearchView__modalDawnLogo" src="/app/images/hub/ChooseDefaultSearchView/ghostery-browser-logo.svg" />
 					<div className="ChooseSearchView__modalMain">
 						{searchBeingConsidered === SEARCH_OTHER ? (
 							<div className="ChooseSearchView__modalHeader">
@@ -371,10 +371,10 @@ class ChooseDefaultSearchView extends Component {
 		if (!otherSearchOptionsFetched) return null;
 
 		return (
-			<div className="full-height">
+			<Fragment>
 				{modalActive && this.renderConfirmationModal()}
 				{!modalActive && this.renderSearchOptions()}
-			</div>
+			</Fragment>
 		);
 	}
 }

@@ -29,10 +29,8 @@
 	position: absolute;
 	display: flex;
 	width: 68px;
-	margin-top: 15px;
-	@include breakpoint(small down) {
-		margin-top: -21px;
-	}
+	margin-top: 22px;
+
 	.ChooseSearchView__back {
 		margin-top: 8px;
 		font-size: 16px;
@@ -41,7 +39,6 @@
 	}
 }
 
-
 .ChooseSearchView__title {
   font-size: 24px;
   font-weight: 500;
@@ -132,14 +129,18 @@
 }
 
 .ChooseSearchView__optionDescriptionTitle {
-	padding-top: 10px;
-  line-height: 0.8;
+  padding-top: 10px;
+  margin-bottom: 2px;
+  line-height: 1.0;
   font-size: 14px;
   font-weight: 500;
+  text-align: center;
 }
 
 .ChooseSearchView__optionDescriptionSubtitle {
   font-size: 14px;
+  line-height: 1.0;
+  text-align: center;
 }
 
 .ChooseSearchView__optionDropdownContainer {
@@ -289,21 +290,28 @@
 }
 
 .ChooseSearchView__modalOptionLogo {
-  padding: 70px 0;
+  padding-bottom: 40px;
+}
+
+.ChooseSearchView__modalDawnLogo {
+  position: absolute;
+  top: 20px;
 }
 
 .ChooseSearchView__modalDescription {
   font-size: 24px;
   font-weight: 500;
-  line-height: 1.75;
+  line-height: 1.6;
   text-align: center;
   color: $tundora;
   width: 70%;
-	margin-bottom: 113px;
-	white-space: pre-line;
+  margin-bottom: 40px;
+  white-space: pre-line;
 }
 
 .ChooseSearchView__modalContent {
+  display: flex;
+  align-items: center;
   position: relative;
   width: 901px;
   min-height: 632px;

@@ -321,7 +321,7 @@ class ChoosePlanView extends React.Component {
 		const selectedGhosteryGlow = (defaultSearch === SEARCH_GHOSTERY);
 
 		return (
-			<div>
+			<Fragment>
 				<div className="ChoosePlanView__relativeContainer">
 					<div className="ChoosePlanView__backContainer">
 						<span className="ChoosePlanView__caret left" />
@@ -336,7 +336,9 @@ class ChoosePlanView extends React.Component {
 					{selectedGhosteryGlow && isBasic && (
 						<Fragment>
 							{searchPromo()}
-							<a className="ChoosePlanView__searchCTAButton" href={glowFreeTrialLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(FREE_USER_PLUS_TRIAL)}>{t('ghostery_dawn_onboarding_start_trial')}</a>
+							<div className="ChoosePlanView__searchCTAButtonContainer">
+								<a className="ChoosePlanView__searchCTAButton" href={glowFreeTrialLink} target="_blank" rel="noreferrer" onClick={() => this.setSetupStepAndMoveToSuccessView(FREE_USER_PLUS_TRIAL)}>{t('ghostery_dawn_onboarding_start_trial')}</a>
+							</div>
 							<div className="ChoosePlanView__seeAllPlans" onClick={this.toggleSection}>{t('ghostery_dawn_onboarding_see_all_plans')}</div>
 							<div className={arrowClassNames} onClick={this.toggleSection} />
 						</Fragment>
@@ -389,7 +391,7 @@ class ChoosePlanView extends React.Component {
 						</div>
 					)}
 				</div>
-			</div>
+			</Fragment>
 		);
 	}
 }

@@ -35,7 +35,8 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
 	position: absolute;
 	display: flex;
 	width: 68px;
-	margin-top: 7px;
+	margin-top: 22px;
+  	margin-left: 22px;
 	.ChoosePlanView__back {
 		margin-top: 8px;
 		font-size: 16px;
@@ -44,16 +45,18 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
 	}
 }
 .ChoosePlanView__yourPrivacyPlan {
-	margin: auto;
+	margin: 60px auto auto auto;
 	font-size: 24px;
 	display: flex;
 	justify-content: center;
+  	text-align: center;
   	font-weight: 500;
 }
 .ChoosePlanView__subtitle {
 	margin-top: 12px;
 	display: flex;
 	justify-content: center;
+  	text-align: center;
 	font-size: 18px;
 }
 .ChoosePlanView__searchPromoContainer {
@@ -66,7 +69,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
 .ChoosePlanView__searchLogo {
 	height: 36px;
 	width: 166px;
-	margin: 65px auto 0 auto;
+	margin: 50px auto 0 auto;
 	background-image: url('/app/images/hub/ChooseDefaultSearchView/search-engine-logo-ghosteryglow.svg');
 }
 .ChoosePlanView__adFree {
@@ -93,12 +96,17 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
 	text-align: center;
 	color: $tundora;
 }
+
+.ChoosePlanView__searchCTAButtonContainer {
+  display: flex;
+  justify-content: center;
+}
+
 .ChoosePlanView__searchCTAButton {
-	display: flex;
 	justify-content: center;
 	margin: 48px auto 0 auto;
-	height: 44px;
-	width: 162px;
+	min-height: 44px;
+	min-width: 162px;
 	padding: 7.7px 14px;
 	line-height: 22px;
 	background: linear-gradient(