Prevent UI breakage if Create Account form field labels break to a se…

…cond line

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx

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

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss

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

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/__tests__/__snapshots__/Step1_CreateAccountForm.test.jsx.snap

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

app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap

@@ -67,15 +67,19 @@ Array [
         ghostery_dawn_onboarding_ad_free_promo_description
       </div>
     </div>
-    <a
-      className="ChoosePlanView__searchCTAButton"
-      href="https://staging.glowstery.com/account?utm_source=dawn&utm_medium=introhub&utm_campaign=onboarding"
-      onClick={[Function]}
-      rel="noreferrer"
-      target="_blank"
+    <div
+      className="ChoosePlanView__searchCTAButtonContainer"
     >
-      ghostery_dawn_onboarding_start_trial
-    </a>
+      <a
+        className="ChoosePlanView__searchCTAButton"
+        href="https://staging.glowstery.com/account?utm_source=dawn&utm_medium=introhub&utm_campaign=onboarding"
+        onClick={[Function]}
+        rel="noreferrer"
+        target="_blank"
+      >
+        ghostery_dawn_onboarding_start_trial
+      </a>
+    </div>
     <div
       className="ChoosePlanView__seeAllPlans"
       onClick={[Function]}