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 d3bfb3ae0..1d8b1c048 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -11,6 +11,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +import { withRouter } from 'react-router-dom'; import BlockSettingsView from './BlockSettingsView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import { logout } from '../../../../Account/AccountActions'; @@ -29,4 +30,4 @@ const actionCreators = { setSetupStep, }; -export default buildReduxHOC(null, actionCreators, BlockSettingsView); +export default withRouter(buildReduxHOC(null, actionCreators, BlockSettingsView)); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js index a3a19d61d..e7740acf9 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/index.js @@ -11,6 +11,7 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ +import { withRouter } from 'react-router-dom'; import ChooseDefaultSearchView from './ChooseDefaultSearchView'; import { buildReduxHOC } from '../../../../shared-hub/utils'; import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions'; @@ -19,4 +20,4 @@ const actionCreators = { setSetupStep, }; -export default buildReduxHOC(null, actionCreators, ChooseDefaultSearchView); +export default withRouter(buildReduxHOC(null, actionCreators, ChooseDefaultSearchView)); 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 02a71cd6b..a82c80be1 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -121,6 +121,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t &:hover { background-position: 0% 50%; transition: 0.25s all; + color: $white; } &:focus { color: $white; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx index 7d52f15c1..48ad68076 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx @@ -57,6 +57,10 @@ const StepProgressBar = (props) => { const currentStepNumber = parseInt(currentStep, 10); const totalSteps = steps.length; + const progressBarContainerClasses = ClassNames('StepProgressBarContainer', { + step4: currentStepNumber === 4 + }); + const logoutIfStepOne = (stepId) => { const { actions } = props; const { logout } = actions; @@ -121,7 +125,7 @@ const StepProgressBar = (props) => { ); return ( -
+
{(currentStep !== WELCOME) && renderProgressBar()}
); diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss index da4abb86e..a8bd86786 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.scss @@ -18,7 +18,12 @@ align-items: center; max-width: 800px; margin: auto; - padding-top: 10px; + padding-top: 10px; + + &.step4 { + max-width: 724px; + padding: 10px 20px 0 20px; + } } .StepProgressBar__Step { @@ -40,6 +45,8 @@ &.incomplete { background: url('/app/images/hub/step-progress-bar/step-2-incomplete.svg'); background-repeat: no-repeat; + margin: 0 2px 3px 0; + height: 32px; } } &.step-3 { @@ -50,6 +57,8 @@ &.incomplete { background: url('/app/images/hub/step-progress-bar/step-3-incomplete.svg'); background-repeat: no-repeat; + margin: 0 2px 3px 0; + height: 32px; } } &.step-4 { @@ -60,6 +69,8 @@ &.incomplete { background: url('/app/images/hub/step-progress-bar/step-4-incomplete.svg'); background-repeat: no-repeat; + margin: 0 2px 3px 0; + height: 32px; } } &.step-completed { @@ -89,9 +100,10 @@ width: 100%; &.completed { border: solid 2px $ghosty-blue; + width: 110%; } &.incompleted { - padding: 1em; + padding: 13px; background-image: radial-gradient(circle at 2.5px, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), radial-gradient(circle, $ghosty-blue 1.25px, rgba(255,255,255,0) 2.5px), diff --git a/app/images/hub/step-progress-bar/step-1-current.svg b/app/images/hub/step-progress-bar/step-1-current.svg index 9fb8c8dad..f909351a2 100644 --- a/app/images/hub/step-progress-bar/step-1-current.svg +++ b/app/images/hub/step-progress-bar/step-1-current.svg @@ -1 +1 @@ -1 \ No newline at end of file +1 diff --git a/app/images/hub/step-progress-bar/step-2-current.svg b/app/images/hub/step-progress-bar/step-2-current.svg index 7d8819a59..334222a0f 100644 --- a/app/images/hub/step-progress-bar/step-2-current.svg +++ b/app/images/hub/step-progress-bar/step-2-current.svg @@ -1 +1 @@ -2 \ No newline at end of file +2 diff --git a/app/images/hub/step-progress-bar/step-2-incomplete.svg b/app/images/hub/step-progress-bar/step-2-incomplete.svg index 1dc3fef5f..b85269220 100644 --- a/app/images/hub/step-progress-bar/step-2-incomplete.svg +++ b/app/images/hub/step-progress-bar/step-2-incomplete.svg @@ -1 +1 @@ -2 \ No newline at end of file +2 diff --git a/app/images/hub/step-progress-bar/step-3-current.svg b/app/images/hub/step-progress-bar/step-3-current.svg index 060d61018..6e8c4a48f 100644 --- a/app/images/hub/step-progress-bar/step-3-current.svg +++ b/app/images/hub/step-progress-bar/step-3-current.svg @@ -1 +1 @@ -3 \ No newline at end of file +3 diff --git a/app/images/hub/step-progress-bar/step-3-incomplete.svg b/app/images/hub/step-progress-bar/step-3-incomplete.svg index de1957611..3e5ac18a2 100644 --- a/app/images/hub/step-progress-bar/step-3-incomplete.svg +++ b/app/images/hub/step-progress-bar/step-3-incomplete.svg @@ -1,4 +1,4 @@ - + diff --git a/app/images/hub/step-progress-bar/step-4-current.svg b/app/images/hub/step-progress-bar/step-4-current.svg index 019e8c5a5..e558755dc 100644 --- a/app/images/hub/step-progress-bar/step-4-current.svg +++ b/app/images/hub/step-progress-bar/step-4-current.svg @@ -1 +1 @@ -4 \ No newline at end of file +4 diff --git a/app/images/hub/step-progress-bar/step-4-incomplete.svg b/app/images/hub/step-progress-bar/step-4-incomplete.svg index 73db72f1b..ee06f911b 100644 --- a/app/images/hub/step-progress-bar/step-4-incomplete.svg +++ b/app/images/hub/step-progress-bar/step-4-incomplete.svg @@ -1 +1 @@ -4 \ No newline at end of file +4 diff --git a/app/images/hub/step-progress-bar/step-completed.svg b/app/images/hub/step-progress-bar/step-completed.svg index f4320607c..0ff6754ad 100644 --- a/app/images/hub/step-progress-bar/step-completed.svg +++ b/app/images/hub/step-progress-bar/step-completed.svg @@ -1 +1 @@ - \ No newline at end of file +