diff --git a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss index f25adcef6..a8ec31e7f 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss @@ -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( diff --git a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx b/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx index 21e40f110..7fd5868ba 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx +++ b/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) => ( + +); + /** * 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) => {
- + {renderLabel('create-account-email', t('email_colon'))} { )}
- + {renderLabel('create-account-confirmEmail', t('confirm_email_colon'))} {
- + {renderLabel('create-account-firstName', t('hub_create_account_label_first_name'))} { />
- + {renderLabel('create-account-lastName', t('hub_create_account_label_email_last_name'))} {
- + {renderLabel('create-account-password', t('password_colon'))} { )}
- + {renderLabel('create-account-password', t('confirm_password_colon'))} - email_colon + + email_colon + - confirm_email_colon + + confirm_email_colon + - hub_create_account_label_first_name + + hub_create_account_label_first_name + - hub_create_account_label_email_last_name + + hub_create_account_label_email_last_name + - password_colon + + password_colon + - confirm_password_colon + + confirm_password_colon +
- +
{searchBeingConsidered === SEARCH_OTHER ? (
@@ -371,10 +371,10 @@ class ChooseDefaultSearchView extends Component { if (!otherSearchOptionsFetched) return null; return ( -
+ {modalActive && this.renderConfirmationModal()} {!modalActive && this.renderSearchOptions()} -
+ ); } } diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 291f4666f..7788b0f6d 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -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; diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 4094b5468..cafc203c9 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -321,7 +321,7 @@ class ChoosePlanView extends React.Component { const selectedGhosteryGlow = (defaultSearch === SEARCH_GHOSTERY); return ( -
+
@@ -336,7 +336,9 @@ class ChoosePlanView extends React.Component { {selectedGhosteryGlow && isBasic && ( {searchPromo()} - this.setSetupStepAndMoveToSuccessView(FREE_USER_PLUS_TRIAL)}>{t('ghostery_dawn_onboarding_start_trial')} +
{t('ghostery_dawn_onboarding_see_all_plans')}
@@ -389,7 +391,7 @@ class ChoosePlanView extends React.Component {
)}
-
+
); } } diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 75444a552..e3a8e3962 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -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( diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap index e7ef3d63c..27698192c 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/__tests__/__snapshots__/ChoosePlanView.test.jsx.snap @@ -9,7 +9,7 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView. exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Shallow snapshot tests rendered with Enzyme ChoosePlanView View with user not logged in 1`] = `ShallowWrapper {}`; exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.test.jsx Snapshot tests with react-test-renderer ChoosePlanView is rendered correctly 1`] = ` -
+Array [
@@ -31,7 +31,7 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.
-
+
,
@@ -67,15 +67,19 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView. ghostery_dawn_onboarding_ad_free_promo_description
- - ghostery_dawn_onboarding_start_trial - + + ghostery_dawn_onboarding_start_trial + +
-
-
+
, +] `;