@@ -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 (
-
+
);
}
}
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