diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx index bb224f6fe..2a3ee0c9d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx @@ -25,7 +25,6 @@ import StepNavigator from '../OnboardingViews/StepNavigator'; */ const OnboardingView = (props) => { const { sendMountActions, steps } = props; - console.log('in OnboardingView'); return ( @@ -36,7 +35,7 @@ const OnboardingView = (props) => { key={`route-${step.index}`} path={step.path} render={() => ( -
+
diff --git a/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss new file mode 100644 index 000000000..e05ccd34f --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss @@ -0,0 +1,9 @@ +.OnboardingView__screenContainer { + max-width: 724px; + margin: 0 auto; + padding: 0 20px; + + &.step4 { + max-width: 910px; + } +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx index 5cfdfdc89..33c96999c 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx @@ -61,7 +61,7 @@ const Step1_CreateAccountForm = (props) => { return (
-
+
@@ -84,7 +84,7 @@ const Step1_CreateAccountForm = (props) => {
)}
-
+
@@ -108,7 +108,7 @@ const Step1_CreateAccountForm = (props) => {
-
+
@@ -123,7 +123,7 @@ const Step1_CreateAccountForm = (props) => { autoComplete="off" />
-
+
@@ -140,7 +140,7 @@ const Step1_CreateAccountForm = (props) => {
-
+
@@ -169,7 +169,7 @@ const Step1_CreateAccountForm = (props) => {
)}
-
+
diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 13400c4e8..1f8044c43 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -78,8 +78,8 @@ const Step1_CreateAccountView = (props) => { const renderSkipLink = () => (
-
-
+
+
setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}> {t('ghostery_browser_hub_onboarding_skip')} @@ -108,12 +108,12 @@ const Step1_CreateAccountView = (props) => {
{ t('ghostery_browser_hub_onboarding_sync_settings') }
{view === CREATE_ACCOUNT && ( -
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
+
setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}
)} {view === SIGN_IN && ( -
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
+
setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}
)} -
+
{view === CREATE_ACCOUNT ? ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx index 0f70b5e26..26c86f4f2 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx @@ -41,7 +41,7 @@ const Step1_LogInForm = (props) => { return (
-
+
@@ -64,7 +64,7 @@ const Step1_LogInForm = (props) => {
-
+
@@ -85,7 +85,7 @@ const Step1_LogInForm = (props) => {
-
+
{t('forgot_password')} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index 51bed3a5a..6e74690cb 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -11,7 +11,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React, { Component } from 'react'; +import React, { Fragment, Component } from 'react'; +import { NavLink } from 'react-router-dom'; import Tooltip from '../../../../shared-components/Tooltip'; import RadioButton from '../../../../shared-components/RadioButton/RadioButton'; @@ -107,109 +108,121 @@ class BlockSettingsView extends Component { const { recommendedChoices, blockAds, kindsOfTrackers, antiTracking, smartBrowsing } = this.state; + const { actions } = this.props; + const { logout } = actions; return ( -
-
{t('ghostery_browser_hub_onboarding_which_privacy_plan')}
-
{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
-
-
- this.toggleRecommendedChoices(!recommendedChoices)} - /> -
{t('ghostery_browser_hub_onboarding_recommended_choices')}
+ +
+
+ + logout()}> + {t('ghostery_browser_hub_onboarding_back')} +
-
    -
  1. {t('ghostery_browser_hub_onboarding_question_block_ads')}
    2. -
    -
    - this.handleAnswerChange('blockAds', true)} altDesign /> -
    -
    {t('hub_setup_modal_button_yes')}
    -
    -
    -
    - this.handleAnswerChange('blockAds', false)} altDesign /> -
    -
    {t('hub_setup_modal_button_no')}
    +
    +
    +
    {t('ghostery_browser_hub_onboarding_which_privacy_plan')}
    +
    {t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
    +
    +
    + this.toggleRecommendedChoices(!recommendedChoices)} + /> +
    {t('ghostery_browser_hub_onboarding_recommended_choices')}
    -
  2. -
    - {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} -
    - +
      +
    1. {t('ghostery_browser_hub_onboarding_question_block_ads')}
      2. +
      +
      + this.handleAnswerChange('blockAds', true)} altDesign />
      +
      {t('hub_setup_modal_button_yes')}
      - -
      -
      - this.handleAnswerChange('kindsOfTrackers', 0)} altDesign /> -
      -
      {t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}
      -
      -
      -
      - this.handleAnswerChange('kindsOfTrackers', 1)} altDesign /> -
      -
      {t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}
      -
      -
      -
      - this.handleAnswerChange('kindsOfTrackers', 2)} altDesign /> -
      -
      {t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
      -
      -
    2. -
      - {t('ghostery_browser_hub_onboarding_question_anti_tracking')} -
      - +
      +
      + this.handleAnswerChange('blockAds', false)} altDesign />
      +
      {t('hub_setup_modal_button_no')}
      -
      3. -
      -
      - this.handleAnswerChange('antiTracking', true)} altDesign /> -
      -
      {t('hub_setup_modal_button_yes')}
      -
      -
      -
      - this.handleAnswerChange('antiTracking', false)} altDesign /> -
      -
      {t('hub_setup_modal_button_no')}
      -
      -
    3. -
      - {t('ghostery_browser_hub_onboarding_question_smart_browsing')} -
      - +
    4. +
      + {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} +
      + +
      -
    -
    3. -
    -
    - this.handleAnswerChange('smartBrowsing', true)} altDesign /> -
    -
    {t('hub_setup_modal_button_yes')}
    -
    -
    -
    - this.handleAnswerChange('smartBrowsing', false)} altDesign /> -
    -
    {t('hub_setup_modal_button_no')}
    -
    -
+
+
+ this.handleAnswerChange('kindsOfTrackers', 0)} altDesign /> +
+
{t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}
+
+
+
+ this.handleAnswerChange('kindsOfTrackers', 1)} altDesign /> +
+
{t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}
+
+
+
+ this.handleAnswerChange('kindsOfTrackers', 2)} altDesign /> +
+
{t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
+
+
  • +
    + {t('ghostery_browser_hub_onboarding_question_anti_tracking')} +
    + +
    +
    +
    • +
    +
    + this.handleAnswerChange('antiTracking', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    +
    +
    +
    + this.handleAnswerChange('antiTracking', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    +
    +
  • +
    + {t('ghostery_browser_hub_onboarding_question_smart_browsing')} +
    + +
    +
    +
    • +
    +
    + this.handleAnswerChange('smartBrowsing', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    +
    +
    +
    + this.handleAnswerChange('smartBrowsing', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    +
    + + +
    +
    - -
    + ); } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss index 5f07941d6..85b35e75c 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -1,7 +1,5 @@ .BlockSettingsView__container { display: flex; - justify-content: center; - align-items: center; flex-direction: column; font-size: 18px; line-height: 2.33; @@ -9,6 +7,36 @@ margin: 45px auto 83px auto; } +.BlockSettingsView__relativeContainer { + position: relative; +} + +.BlockSettingsView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.BlockSettingsView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 60px; + @include breakpoint(small down) { + margin-top: 22px; + } + .BlockSettingsView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + .BlockSettingsView__title { font-size: 24px; font-weight: 500; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index 12c2c9950..9394bfdc0 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -13,12 +13,14 @@ import BlockSettingsView from './BlockSettingsView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; +import { logout } from '../../../../Account/AccountActions'; import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions'; import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions'; import setToast from '../../../../shared-hub/actions/ToastActions'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; const actionCreators = { + logout, setAntiTracking, setAdBlock, setSmartBlocking, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx index 3ac9e8a58..bbda9943a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx @@ -12,6 +12,7 @@ */ import React, { Component, Fragment } from 'react'; +import { NavLink } from 'react-router-dom'; import ClassNames from 'classnames'; import RadioButton from '../../../../shared-components/RadioButton'; import { ONBOARDING, CHOOSE_PLAN, CHOOSE_DEFAULT_SEARCH } from '../../OnboardingView/OnboardingConstants'; @@ -117,24 +118,34 @@ class ChooseDefaultSearchView extends Component { const { chosenSearch } = this.state; return ( -
    -
    {t('choose_your_default_search')}
    -
    {t('pick_a_default_search_engine')}
    -
    - {this.renderOptionContainer(chosenSearch, SEARCH_GHOSTERY, 'Ghostery Search')} - {this.renderOptionContainer(chosenSearch, SEARCH_STARTPAGE, 'StartPage')} - {this.renderOptionContainer(chosenSearch, SEARCH_BING, 'Bing')} -
    Choose Your Own
    - {this.renderOptionContainer(chosenSearch, SEARCH_YAHOO, 'Yahoo')} + +
    +
    + + + {t('ghostery_browser_hub_onboarding_back')} + +
    - -
    +
    +
    {t('choose_your_default_search')}
    +
    {t('pick_a_default_search_engine')}
    +
    + {this.renderOptionContainer(chosenSearch, SEARCH_GHOSTERY, 'Ghostery Search')} + {this.renderOptionContainer(chosenSearch, SEARCH_STARTPAGE, 'StartPage')} + {this.renderOptionContainer(chosenSearch, SEARCH_BING, 'Bing')} +
    Choose Your Own
    + {this.renderOptionContainer(chosenSearch, SEARCH_YAHOO, 'Yahoo')} +
    + +
    + ); } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss index 7ec3e9c7b..28f207bfa 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss @@ -9,6 +9,39 @@ margin: 45px auto 83px auto; } +.ChooseSearchView__relativeContainer { + position: relative; + @include breakpoint(small down) { + margin-left: 0; + } +} +.ChooseSearchView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.ChooseSearchView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 61px; + @include breakpoint(small down) { + margin-top: 20px; + } + .ChooseSearchView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + + .ChooseSearchView__title { font-size: 24px; font-weight: 500; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index 93960f467..71ac9b443 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -92,7 +92,7 @@ const premiumCard = (checked, handleClick, showCTAButton = false) => {

    Ghostery Premium

    -

    $11.99

    +

    $11.99

    {t('per_month')}
    @@ -294,70 +294,81 @@ class ChoosePlanView extends React.Component { }); return ( -
    -
    {this.renderTitleText()}
    -
    {this.renderSubtitleText(didNotSelectGhosterySearch)}
    - {didNotSelectGhosterySearch && isBasic && ( - - {searchPromo()} - {/* TODO: For the CTA button below, + +
    +
    + + + {t('ghostery_browser_hub_onboarding_back')} + +
    +
    +
    + +
    {this.renderTitleText()}
    +
    {this.renderSubtitleText(didNotSelectGhosterySearch)}
    + {didNotSelectGhosterySearch && isBasic && ( + + {searchPromo()} + {/* TODO: For the CTA button below, 1. If user is signed in, activate the user’s 7-day free trial for the Ghostery Search Plus plan and move them to Step 5 if signed in 2. If user is signed out, clicking this should take them to Step 4b (linked) */} -
    {t('ghostery_browser_hub_onboarding_start_trial')}
    -
    {t('ghostery_browser_hub_onboarding_see_all_plans')}
    -
    - - )} - {((isBasic && !didNotSelectGhosterySearch) || expanded || isPlus || isPremium) && ( -
    - {(isPlus) ? ( -
    -
    - {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} +
    {t('ghostery_browser_hub_onboarding_start_trial')}
    +
    {t('ghostery_browser_hub_onboarding_see_all_plans')}
    +
    + + )} + {((isBasic && !didNotSelectGhosterySearch) || expanded || isPlus || isPremium) && ( +
    + {(isPlus) ? ( +
    +
    + {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} +
    +
    {t('ghostery_browser_hub_onboarding_or')}
    +
    + {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)} +
    -
    {t('ghostery_browser_hub_onboarding_or')}
    -
    - {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)} + ) : ( +
    + {isBasic && ( + basicCard(this.isBasicPlanChecked(), this.selectBasicPlan) + )} + {!isPremium && ( + + {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} + + )} + {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)}
    -
    - ) : ( -
    - {isBasic && ( - basicCard(this.isBasicPlanChecked(), this.selectBasicPlan) - )} - {!isPremium && ( - - {this.plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} - - )} - {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)} -
    - )} - {(isBasic && ( -
    - {(selectedPlan === BASIC) && ( - setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> - {t('next')} - - )} - {selectedPlan === PLUS && ( - {t('next')} - )} - {selectedPlan === PREMIUM && ( - {t('next')} - )} -
    - ))} - {isPremium && ( - setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> - {t('next')} - - )} -
    - )} -
    + )} + {(isBasic && ( +
    + {(selectedPlan === BASIC) && ( + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> + {t('next')} + + )} + {selectedPlan === PLUS && ( + {t('next')} + )} + {selectedPlan === PREMIUM && ( + {t('next')} + )} +
    + ))} + {isPremium && ( + setSetupStep({ setup_step: CHOOSE_PLAN, origin: ONBOARDING })}> + {t('next')} + + )} +
    + )} +
    + ); } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss index 034fa539f..31312470f 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -1,8 +1,36 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow to next line .ChoosePlanView { + margin: 45px auto 0 auto; padding-bottom: 20px; } +.ChoosePlanView__relativeContainer { + position: relative; +} +.ChoosePlanView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} +.ChoosePlanView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 52px; + @include breakpoint(small down) { + position: relative; + } + .ChoosePlanView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} .ChoosePlanView__yourPrivacyPlan { margin: auto; font-size: 24px; @@ -259,6 +287,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t .ChoosePlanView__price { min-height: 85px; margin-bottom: rem-calc(20); + font-size: 36px; &-blue { color: $price-blue; } @@ -279,6 +308,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t } } &.sub-text { + font-size: 12px; font-weight: 500; } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx index addf3bea4..e4ae3351e 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -11,7 +11,8 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React from 'react'; +import React, { Fragment } from 'react'; +import { NavLink } from 'react-router-dom'; /** * A Functional React component for rendering the Browser Success View @@ -22,12 +23,23 @@ const SuccessView = (props) => { const { actions } = props; const { sendPing } = actions; return ( -
    -
    {t('ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser')}
    -
    {`${t('ghostery_browser_hub_onboarding_surf_with_ease')}`}
    - - -
    + +
    +
    + + + {t('ghostery_browser_hub_onboarding_back')} + +
    +
    +
    +
    {t('ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser')}
    + +
    {`${t('ghostery_browser_hub_onboarding_surf_with_ease')} Ghostery`}
    + + +
    +     ); }; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss index 9ef034fb7..074ce5302 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -5,6 +5,36 @@ flex-direction: column; } +.SuccessView__relativeContainer { + position: relative; +} + +.SuccessView__caret.left { + margin: 7px auto 0 auto; + height: 10px; + width: 10px; + border-left: 2px solid $tundora; + border-top: 2px solid $tundora; + cursor: pointer; + transform: rotate(-45deg); +} + +.SuccessView__backContainer { + position: absolute; + display: flex; + width: 68px; + margin-top: 142px; + @include breakpoint(small down) { + margin-top: 90px; + } + .SuccessView__back { + margin-top: 8px; + font-size: 16px; + color: $tundora; + text-decoration: underline; + } +} + .SuccessView__title { margin-top: 125px; font-size: 24px; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index 93029a213..d4be7e485 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -56,6 +56,12 @@ const StepProgressBar = (props) => { const { currentStep } = props; const totalSteps = steps.length; + const logoutIfStepOne = (stepId) => { + const { actions } = props; + const { logout } = actions; + if (stepId === LOGIN) logout(); + }; + const renderStep = (step, isCurrent, stepClass) => { const labelClasses = ClassNames('StepProgressBar__label', { current: isCurrent, @@ -64,9 +70,18 @@ const StepProgressBar = (props) => { [`step-${step.id}`]: stepClass !== 'step-completed', }); + if (stepClass === 'incomplete') { + return ( +
    +
    {step.label}
    +
    +
    + ); + } + return (
    - + logoutIfStepOne(step.id)}>
    {step.label}
    diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index b6fcdb196..7fbbb2a02 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -12,6 +12,7 @@ */ .StepProgressBarContainer { + margin-top: 40px; display: flex; justify-content: space-around; align-items: center; @@ -19,6 +20,7 @@ margin: auto; padding-top: 10px; } + .StepProgressBar__Step { height: 34px; width: 32px; @@ -78,7 +80,7 @@ width: 38px; font-size: 12px; color: $tundora; - &.currentStep { + &.current { font-weight: 700; } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js index 21d943533..127b75783 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/index.js @@ -12,5 +12,11 @@ */ import StepProgressBar from './StepProgressBar'; +import { buildReduxHOC } from '../../../../shared-hub/utils'; +import { logout } from '../../../../Account/AccountActions'; -export default StepProgressBar; +const actionCreators = { + logout +}; + +export default buildReduxHOC(null, actionCreators, StepProgressBar); diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 19e17a59d..ef1d248c8 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -30,9 +30,6 @@ html, body, #root { overflow-x: hidden; } @media only screen and (max-width: 740px) { - .App__mainContent { - margin-left: 54px; - } .android-relative {position: relative;} } @@ -70,6 +67,7 @@ html, body, #root { @import './partials/radio_button'; // Imports from ../ghostery-browser-hub directory +@import '../ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/StepProgressbar/StepProgressbar.scss'; @import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss';