Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ghostery Dawn Intro Hub Miscellaneous Fixes #653

Merged
merged 21 commits into from Jan 7, 2021
+401 −202
Merged

Ghostery Dawn Intro Hub Miscellaneous Fixes #653

Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
7210997
Fix the StepProgressBar width for each screen, step4 needs to be a li…
benstrumeyer Jan 5, 2021
69b62f6
Add back button to all pages
benstrumeyer Jan 5, 2021
fc6fbf2
Add margin top to Step Progress Bar
benstrumeyer Jan 5, 2021
9266a97
Add back button for success view
benstrumeyer Jan 5, 2021
065d70c
Refactor back button for all pages
benstrumeyer Jan 5, 2021
a20f0d2
Log the user out if they are returning to step 1
benstrumeyer Jan 5, 2021
010b3d9
Add logout behavior to navbar
benstrumeyer Jan 5, 2021
b7cdd1e
Add highestSetupStepReached() method to next buttons
benstrumeyer Jan 5, 2021
fd2fb31
Trying to add setup_step to SetupLifeCycleReducer
benstrumeyer Jan 5, 2021
271e0ed
Revert "Trying to add setup_step to SetupLifeCycleReducer"
benstrumeyer Jan 6, 2021
581e83f
Revert "Add highestSetupStepReached() method to next buttons"
benstrumeyer Jan 6, 2021
94d8d36
Prevent user from moving forwards in the StepProgress bar, only back
benstrumeyer Jan 6, 2021
c04012f
Add back console log
benstrumeyer Jan 6, 2021
e8ade34
Remove test class
benstrumeyer Jan 6, 2021
fd9fa6d
Merge branch 'ghostery-browser-intro-hub' into misc-fixes
benstrumeyer Jan 6, 2021
7d8c57a
Fix tooltips
benstrumeyer Jan 6, 2021
d946e2e
Get rid of margin-left on all screens. Fix success view strings. Cent…
benstrumeyer Jan 6, 2021
9c126d9
Fix back button on small screen sizes for SuccessView
benstrumeyer Jan 6, 2021
ecb8d98
Bold <StepProgressBar /> current step label
benstrumeyer Jan 6, 2021
17448c4
Fix ChoosePlanView price font sizes
benstrumeyer Jan 6, 2021
f34b748
Merge branch 'ghostery-browser-intro-hub' into misc-fixes
wlycdgr Jan 7, 2021
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

3 app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx
View file
Open in desktop
@@ -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={() => (
<div>
<div className={step.index === 4 ? 'OnboardingView__screenContainer step4' : 'OnboardingView__screenContainer'}>
<StepProgressBar currentStep={step.index} />
<StepNavigator step={step.index} components={step.bodyComponents} sendMountActions={sendMountActions} />
</div>
9 app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.scss
View file
Open in desktop
@@ -0,0 +1,9 @@
.OnboardingView__screenContainer {
max-width: 724px;
margin: 0 auto;
padding: 0 20px;

&.step4 {
max-width: 910px;
}
}
12 ...ery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.jsx
View file
Open in desktop
@@ -61,7 +61,7 @@ const Step1_CreateAccountForm = (props) => {
return (
<form onSubmit={handleSubmit}>
<div className="Step1_CreateAccountForm--addPaddingTop row align-center-middle">
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-email" className="Step1_CreateAccountForm__inputLabel">
{t('email_colon')}
</label>
@@ -84,7 +84,7 @@ const Step1_CreateAccountForm = (props) => {
</div>
)}
</div>
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-confirmEmail" className="Step1_CreateAccountForm__inputLabel">
{t('confirm_email_colon')}
</label>
@@ -108,7 +108,7 @@ const Step1_CreateAccountForm = (props) => {
</div>
</div>
<div className="row align-center-middle">
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-firstName" className="Step1_CreateAccountForm__inputLabel">
{t('hub_create_account_label_first_name')}
</label>
@@ -123,7 +123,7 @@ const Step1_CreateAccountForm = (props) => {
autoComplete="off"
/>
</div>
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-lastName" className="Step1_CreateAccountForm__inputLabel">
{t('hub_create_account_label_email_last_name')}
</label>
@@ -140,7 +140,7 @@ const Step1_CreateAccountForm = (props) => {
</div>
</div>
<div className="row align-center-middle">
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-password" className="Step1_CreateAccountForm__inputLabel">
{t('password_colon')}
</label>
@@ -169,7 +169,7 @@ const Step1_CreateAccountForm = (props) => {
</div>
)}
</div>
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6">
<label htmlFor="create-account-password" className="Step1_CreateAccountForm__inputLabel">
{t('confirm_password_colon')}
</label>
10 ...ery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx
View file
Open in desktop
@@ -78,8 +78,8 @@ const Step1_CreateAccountView = (props) => {

const renderSkipLink = () => (
<div className="row align-center-middle">
<div className="columns small-10 medium-5" />
<div className="columns small-10 medium-5">
<div className="columns small-10 medium-6" />
<div className="columns small-10 medium-6">
<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}>
<span>{t('ghostery_browser_hub_onboarding_skip')}</span>
</NavLink>
@@ -108,12 +108,12 @@ const Step1_CreateAccountView = (props) => {
<div className="Step1_CreateAccountView__subtitle">{ t('ghostery_browser_hub_onboarding_sync_settings') }</div>
<div className="row align-center-middle">
{view === CREATE_ACCOUNT && (
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}</div>
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" onClick={() => setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}</div>
)}
{view === SIGN_IN && (
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}</div>
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" onClick={() => setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}</div>
)}
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-5" />
<div className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6" />
</div>
{view === CREATE_ACCOUNT ? (
<Fragment>
6 app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.jsx
View file
Open in desktop
@@ -41,7 +41,7 @@ const Step1_LogInForm = (props) => {
return (
<form className="Step1_LogInForm" onSubmit={handleSubmit}>
<div className="Step1_LogInForm__item row align-center-middle">
<div className="columns small-10">
<div className="columns small-12">
<label htmlFor="login-email" className="Step1_LogInForm__inputLabel">
{t('email_colon')}
</label>
@@ -64,7 +64,7 @@ const Step1_LogInForm = (props) => {
</div>
</div>
<div className="Step1_LogInForm__item row align-center-middle">
<div className="columns small-10">
<div className="columns small-12">
<label htmlFor="login-password" className="Step1_LogInForm__inputLabel">
{t('password_colon')}
</label>
@@ -85,7 +85,7 @@ const Step1_LogInForm = (props) => {
</div>
</div>
<div className="Step1_LogInForm__item row align-center-middle">
<div className="columns small-10">
<div className="columns small-12">
<span className="Step1_LogInForm__link">
<div className="Step1_LogInForm__forgotPassword" onClick={handleForgotPassword}>
{t('forgot_password')}
203 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx
View file
Open in desktop
@@ -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 (
<div className="BlockSettingsView__container">
<div className="BlockSettingsView__title">{t('ghostery_browser_hub_onboarding_which_privacy_plan')}</div>
<div className="BlockSettingsView__subtitle">{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}</div>
<div className="BlockSettingsView_formBlock">
<div className="BlockSettingsView_checkboxBlock">
<ToggleCheckbox
className="BlockSettingsView_checkbox"
checked={recommendedChoices}
onChange={() => this.toggleRecommendedChoices(!recommendedChoices)}
/>
<div>{t('ghostery_browser_hub_onboarding_recommended_choices')}</div>
<Fragment>
<div className="BlockSettingsView__relativeContainer">
<div className="BlockSettingsView__backContainer">
<span className="BlockSettingsView__caret left" />
<NavLink to="/onboarding/1" onClick={() => logout()}>
<span className="BlockSettingsView__back">{t('ghostery_browser_hub_onboarding_back')}</span>
</NavLink>
</div>
<ol>
<li className="BlockSettingsView_question">{t('ghostery_browser_hub_onboarding_question_block_ads')}</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === true} handleClick={() => this.handleAnswerChange('blockAds', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === false} handleClick={() => this.handleAnswerChange('blockAds', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<div className="BlockSettingsView__container">
<div className="BlockSettingsView__title">{t('ghostery_browser_hub_onboarding_which_privacy_plan')}</div>
<div className="BlockSettingsView__subtitle">{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}</div>
<div className="BlockSettingsView_formBlock">
<div className="BlockSettingsView_checkboxBlock">
<ToggleCheckbox
className="BlockSettingsView_checkbox"
checked={recommendedChoices}
onChange={() => this.toggleRecommendedChoices(!recommendedChoices)}
/>
<div>{t('ghostery_browser_hub_onboarding_recommended_choices')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_info_blocking_all')} position="top" isOnboardingHub />
<ol>
<li className="BlockSettingsView_question">{t('ghostery_browser_hub_onboarding_question_block_ads')}</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === true} handleClick={() => this.handleAnswerChange('blockAds', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_info_anti_tracking')} position="top" isOnboardingHub />
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === false} handleClick={() => this.handleAnswerChange('blockAds', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === true} handleClick={() => this.handleAnswerChange('antiTracking', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === false} handleClick={() => this.handleAnswerChange('antiTracking', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_info_smart_browsing')} position="top" isOnboardingHub />
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_onboarding_info_blocking_all')} position="top" isOnboardingHub />
</div>
</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === true} handleClick={() => this.handleAnswerChange('smartBrowsing', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === false} handleClick={() => this.handleAnswerChange('smartBrowsing', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</ol>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_onboarding_info_anti_tracking')} position="top" isOnboardingHub />
</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === true} handleClick={() => this.handleAnswerChange('antiTracking', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === false} handleClick={() => this.handleAnswerChange('antiTracking', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
<div className="BlockSettingsView__infoIcon g-tooltip">
<Tooltip header={t('ghostery_browser_hub_onboarding_info_smart_browsing')} position="top" isOnboardingHub />
</div>
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === true} handleClick={() => this.handleAnswerChange('smartBrowsing', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === false} handleClick={() => this.handleAnswerChange('smartBrowsing', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</li>
</ol>
</div>
<button
className="BlockSettingsView__ctaButton"
type="button"
onClick={() => this.handleSubmit()}
>
{t('next')}
</button>
</div>
<button
className="BlockSettingsView__ctaButton"
type="button"
onClick={() => this.handleSubmit()}
>
{t('next')}
</button>
</div>
</Fragment>
);
}
}
ProTip! Use n and p to navigate between commits in a pull request.