From 67ed262f8d7e0d261695829b6fbc7ddfb799a954 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 16:08:05 -0500 Subject: [PATCH 1/8] Prevent Welcome CTA button from breaking to two lines with longer translated strings --- .../Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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( From 6c2c967d4ec766619f04aca23591fed62bb71bc0 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 16:39:00 -0500 Subject: [PATCH 2/8] Improve layout when onboarding view headers break to a second line --- .../Step2_BlockSettingsView/BlockSettingsView.scss | 7 ++++--- .../ChooseDefaultSearchView.jsx | 4 ++-- .../ChooseDefaultSearchView.scss | 7 ++----- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss index 54a00adcc..194b1d4d3 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -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; } } diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 74ad2145f..3a4a15808 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -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..54e930ee5 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; From c93d82d129ac203e87e87eb86906e081f1a23e13 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 16:48:50 -0500 Subject: [PATCH 3/8] Improve search option container formatting when translated description copy breaks to a 2nd line --- .../ChooseDefaultSearchView.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 54e930ee5..7006b3861 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -30,7 +30,7 @@ display: flex; width: 68px; margin-top: 22px; - + .ChooseSearchView__back { margin-top: 8px; font-size: 16px; @@ -129,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 { From b19f3dafd3d171df107ebc902352052fe7c6755a Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 17:07:52 -0500 Subject: [PATCH 4/8] Make layout of search selection confirmation modals look better and more consistent across locales --- .../ChooseDefaultSearchView.jsx | 2 +- .../ChooseDefaultSearchView.scss | 13 ++++++++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 3a4a15808..73000a4bb 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -280,7 +280,7 @@ class ChooseDefaultSearchView extends Component { return (
- +
{searchBeingConsidered === SEARCH_OTHER ? (
diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 7006b3861..184ecd0f4 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -290,7 +290,12 @@ } .ChooseSearchView__modalOptionLogo { - padding: 70px 0; + padding-bottom: 70px; +} + +.ChooseSearchView__modalDawnLogo { + position: absolute; + top: 20px; } .ChooseSearchView__modalDescription { @@ -300,11 +305,13 @@ text-align: center; color: $tundora; width: 70%; - margin-bottom: 113px; - white-space: pre-line; + margin-bottom: 70px; + white-space: pre-line; } .ChooseSearchView__modalContent { + display: flex; + align-items: center; position: relative; width: 901px; min-height: 632px; From 148b3a20e1c7c9272f76d6d42a0626167be9b6d4 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 17:30:56 -0500 Subject: [PATCH 5/8] Refine search selection modal layout to guard against element overlaps at narrow widths. Rework plan selection header CSS to guard against element overlaps at narrow widths and across locales --- .../ChooseDefaultSearchView.scss | 6 +++--- .../OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx | 4 ++-- .../Step4_ChoosePlanView/ChoosePlanView.scss | 6 ++++-- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 184ecd0f4..7788b0f6d 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -290,7 +290,7 @@ } .ChooseSearchView__modalOptionLogo { - padding-bottom: 70px; + padding-bottom: 40px; } .ChooseSearchView__modalDawnLogo { @@ -301,11 +301,11 @@ .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: 70px; + margin-bottom: 40px; white-space: pre-line; } diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 4094b5468..6f9bd9549 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 ( -
+
@@ -389,7 +389,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..9ae68bb89 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,10 +45,11 @@ $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 { From 4b89786c551e95f473a03c1f0cb9e635ff1065d5 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 17:36:29 -0500 Subject: [PATCH 6/8] Update test snapshot --- .../__tests__/__snapshots__/ChoosePlanView.test.jsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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..3ae900fbd 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.
-
+
,
@@ -86,6 +86,6 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView. className="ChoosePlanView__arrow up" onClick={[Function]} /> -
-
+
, +] `; From ccbf17d969518caf71b9d58b99590b98f4ce2277 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 18:02:08 -0500 Subject: [PATCH 7/8] Make sure Start Trial CTA button label fully visible in other languages. Other minor adjustment to Select Plan view layout to better deal with string length variation. --- .../Step4_ChoosePlanView/ChoosePlanView.jsx | 4 +++- .../Step4_ChoosePlanView/ChoosePlanView.scss | 14 ++++++++++---- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 6f9bd9549..cafc203c9 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -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')}
diff --git a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 9ae68bb89..e3a8e3962 100644 --- a/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/dawn-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -56,6 +56,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t margin-top: 12px; display: flex; justify-content: center; + text-align: center; font-size: 18px; } .ChoosePlanView__searchPromoContainer { @@ -68,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 { @@ -95,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( From cd545dcc7203ff57933945aae77246c457cb58b4 Mon Sep 17 00:00:00 2001 From: wlycdgr Date: Thu, 11 Feb 2021 18:32:42 -0500 Subject: [PATCH 8/8] Prevent UI breakage if Create Account form field labels break to a second line --- .../Step1_CreateAccountForm.jsx | 30 ++++++++----------- .../Step1_CreateAccountForm.scss | 5 +++- .../Step1_CreateAccountForm.test.jsx.snap | 24 +++++++++++---- .../ChoosePlanView.test.jsx.snap | 20 ++++++++----- 4 files changed, 46 insertions(+), 33 deletions(-) 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 +
- - ghostery_dawn_onboarding_start_trial - + + ghostery_dawn_onboarding_start_trial + +