From 0325779049d313715f5b858b3794929fda5a6df0 Mon Sep 17 00:00:00 2001 From: leuryr Date: Wed, 13 Jan 2021 13:53:28 -0500 Subject: [PATCH 1/9] Fixes for Dawn toast styling and layout --- _locales/en/messages.json | 2 +- .../Views/AppView/AppView.jsx | 2 +- .../BlockSettingsView.jsx | 2 +- app/images/hub/toast/toast-alert.svg | 18 +++++++ app/images/hub/toast/toast-success.svg | 18 +++++++ .../ToastMessage/ToastMessage.jsx | 53 +++++++++++++------ .../ToastMessage/ToastMessage.scss | 23 ++++++++ 7 files changed, 100 insertions(+), 18 deletions(-) create mode 100644 app/images/hub/toast/toast-alert.svg create mode 100644 app/images/hub/toast/toast-success.svg diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d77171d7e..4265c2d9e 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2419,6 +2419,6 @@ "message": "Pick a default engine for all your searches." }, "ghostery_browser_hub_blocking_settings_view_toast_error_message": { - "message": "Error: Please answer all questions" + "message": "Please answer all questions" } } diff --git a/app/ghostery-browser-hub/Views/AppView/AppView.jsx b/app/ghostery-browser-hub/Views/AppView/AppView.jsx index 6f42793e4..e7a330529 100644 --- a/app/ghostery-browser-hub/Views/AppView/AppView.jsx +++ b/app/ghostery-browser-hub/Views/AppView/AppView.jsx @@ -38,7 +38,7 @@ const AppView = (props) => { return (
- {} + {} {children}
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 8ac15511a..3f9141d3c 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -100,7 +100,7 @@ class BlockSettingsView extends Component { setToast({ toastMessage: t('ghostery_browser_hub_blocking_settings_view_toast_error_message'), - toastClass: 'error' + toastClass: 'alert' }); } } diff --git a/app/images/hub/toast/toast-alert.svg b/app/images/hub/toast/toast-alert.svg new file mode 100644 index 000000000..693f1643b --- /dev/null +++ b/app/images/hub/toast/toast-alert.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/images/hub/toast/toast-success.svg b/app/images/hub/toast/toast-success.svg new file mode 100644 index 000000000..7885c19e8 --- /dev/null +++ b/app/images/hub/toast/toast-success.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/shared-components/ToastMessage/ToastMessage.jsx b/app/shared-components/ToastMessage/ToastMessage.jsx index 2cd45cc12..92b40a0e9 100644 --- a/app/shared-components/ToastMessage/ToastMessage.jsx +++ b/app/shared-components/ToastMessage/ToastMessage.jsx @@ -19,24 +19,45 @@ import PropTypes from 'prop-types'; * @return {JSX} JSX for rendering a Toast Message * @memberof SharedComponents */ -const ToastMessage = ({ toastText, toastClass, toastExit }) => ( -
- {toastText && ( -
-
-
-
- {toastText} +const ToastMessage = ({ + toastText, toastClass, toastExit, dawnHub +}) => { + // These variables will determine whether the toast should display with Dawn onboarding styling + // or the default styling used in GBE + const dawnHubClass = dawnHub ? 'dawn-hub' : ''; + const dawnLayout = dawnHub ? 'align-justify align-middle' : 'align-center-middle'; + + let dawnToastText = ''; + if (dawnHub && toastClass === 'alert') { + dawnToastText = 'Error: '; + } else if (dawnHub && toastClass === 'success') { + dawnToastText = 'Success: '; + } + + return ( +
+ {toastText && ( +
+
+
+
+ {dawnHub && ( + + )} +
+ {`${dawnToastText}${toastText}`} +
+
+ {toastExit && ( +
+ )}
- {toastExit && ( -
- )}
-
- )} -
-); + )} +
+ ); +}; // PropTypes ensure we pass required props of the correct type ToastMessage.propTypes = { @@ -46,11 +67,13 @@ ToastMessage.propTypes = { PropTypes.func, PropTypes.bool, ]), + dawnHub: PropTypes.bool, }; // Default props used in the Toast Message ToastMessage.defaultProps = { toastExit: false, + dawnHub: false, }; export default ToastMessage; diff --git a/app/shared-components/ToastMessage/ToastMessage.scss b/app/shared-components/ToastMessage/ToastMessage.scss index 4040110fa..c204075a0 100644 --- a/app/shared-components/ToastMessage/ToastMessage.scss +++ b/app/shared-components/ToastMessage/ToastMessage.scss @@ -16,7 +16,30 @@ position: relative; top: 30px; height: 0; + &.dawn-hub { + max-width: 700px; + margin: auto; + font-family: Roboto; + font-size: 14px; + font-weight: 500; + .alert { + background-color: #f8e6e6; + .callout-text {color: #9f4948;} + } + .success { + background-color: #dff0d8; + .callout-text {color: #417505;} + } + .ToastMessage__close { + background-image: buildIconX(#000000); + } + } } + +.ToastMessage_classIcon { + margin-right: 20px; +} + .ToastMessage__close { height: 13px; width: 13px; From a86ca654d4f27cb36626ad29fd89a559c6f53318 Mon Sep 17 00:00:00 2001 From: leuryr Date: Wed, 13 Jan 2021 14:26:35 -0500 Subject: [PATCH 2/9] Add missing toast error message for Step 1 --- _locales/en/messages.json | 3 +++ .../Step1_CreateAccountFormContainer.jsx | 7 ++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 4265c2d9e..650b36d2b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1740,6 +1740,9 @@ "hub_create_account_toast_error": { "message": "That email address is already in use. Please choose another." }, + "ghostery_browser_hub_onboarding_toast_fix_errors": { + "message": "Please fix errors before proceeding." + }, "ghostery_browser_hub_onboarding_install_heading": { "message": "Ghostery Dawn now installing..." }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx index 31f9ffc76..d0f6cfe62 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx @@ -152,10 +152,15 @@ class CreateAccountFormContainer extends Component { validateInput: true, }); + const { actions } = this.props; if (!emailIsValid || !confirmIsValid || !legalConsentChecked || !passwordIsValid || confirmPasswordError) { + actions.setToast({ + toastMessage: t('ghostery_browser_hub_onboarding_toast_fix_errors'), + toastClass: 'alert' + }); return; } - const { actions } = this.props; + actions.setToast({ toastMessage: '', toastClass: '' From 9f847ec069498c421ab7c262314847924c5ff9d2 Mon Sep 17 00:00:00 2001 From: leuryr Date: Thu, 14 Jan 2021 10:17:39 -0500 Subject: [PATCH 3/9] Ensure toast remains above step progress bar --- app/shared-components/ToastMessage/ToastMessage.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/shared-components/ToastMessage/ToastMessage.scss b/app/shared-components/ToastMessage/ToastMessage.scss index c204075a0..7fa82e84b 100644 --- a/app/shared-components/ToastMessage/ToastMessage.scss +++ b/app/shared-components/ToastMessage/ToastMessage.scss @@ -17,6 +17,7 @@ top: 30px; height: 0; &.dawn-hub { + z-index: 1; max-width: 700px; margin: auto; font-family: Roboto; From 5e77e3752c0f67c18bfe8104ba927826d5df2a27 Mon Sep 17 00:00:00 2001 From: leuryr Date: Thu, 14 Jan 2021 10:32:09 -0500 Subject: [PATCH 4/9] Comment update --- app/shared-components/ToastMessage/ToastMessage.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/shared-components/ToastMessage/ToastMessage.jsx b/app/shared-components/ToastMessage/ToastMessage.jsx index 92b40a0e9..990e338a7 100644 --- a/app/shared-components/ToastMessage/ToastMessage.jsx +++ b/app/shared-components/ToastMessage/ToastMessage.jsx @@ -22,8 +22,8 @@ import PropTypes from 'prop-types'; const ToastMessage = ({ toastText, toastClass, toastExit, dawnHub }) => { - // These variables will determine whether the toast should display with Dawn onboarding styling - // or the default styling used in GBE + // These variables will be used to determine whether the toast should display with Dawn + // onboarding styling or the default styling used in GBE const dawnHubClass = dawnHub ? 'dawn-hub' : ''; const dawnLayout = dawnHub ? 'align-justify align-middle' : 'align-center-middle'; From 70ded34d6f88f9bae0d7bef5234590180b9b2938 Mon Sep 17 00:00:00 2001 From: leuryr Date: Thu, 14 Jan 2021 10:38:22 -0500 Subject: [PATCH 5/9] Update snapshot for ToastMessage component --- .../__snapshots__/ToastMessage.test.jsx.snap | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/app/shared-components/ToastMessage/__tests__/__snapshots__/ToastMessage.test.jsx.snap b/app/shared-components/ToastMessage/__tests__/__snapshots__/ToastMessage.test.jsx.snap index 0ab06d344..1a5c0fba2 100644 --- a/app/shared-components/ToastMessage/__tests__/__snapshots__/ToastMessage.test.jsx.snap +++ b/app/shared-components/ToastMessage/__tests__/__snapshots__/ToastMessage.test.jsx.snap @@ -2,7 +2,7 @@ exports[`app/shared-components/ToastMessage More Snapshot tests with react-test-renderer, but for edge cases edge case where text is empty string 1`] = `
@@ -10,7 +10,7 @@ exports[`app/shared-components/ToastMessage More Snapshot tests with react-test- exports[`app/shared-components/ToastMessage Snapshot tests with react-test-renderer toast message is rendered correctly 1`] = `
- sample text +
+ sample text +
@@ -34,7 +38,7 @@ exports[`app/shared-components/ToastMessage Snapshot tests with react-test-rende exports[`app/shared-components/ToastMessage Snapshot tests with react-test-renderer toast message is rendered correctly with a close button 1`] = `
- example text +
+ example text +
Date: Thu, 14 Jan 2021 14:53:50 -0500 Subject: [PATCH 6/9] Fix toast not clearing after block settings submit --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) 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 3f9141d3c..16d025a54 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -65,9 +65,11 @@ class BlockSettingsView extends Component { blockAds, kindsOfTrackers, antiTracking, smartBrowsing } = this.state; + const { actions } = this.props; + const { setToast } = actions; + // Will only change user settings if all questions are answered if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) { - const { actions } = this.props; const { setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep } = actions; @@ -92,12 +94,13 @@ class BlockSettingsView extends Component { break; } setBlockingPolicy({ blockingPolicy }); + setToast({ + toastMessage: '', + toastClass: '' + }); setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING }); history.push('/onboarding/3'); } else { - const { actions } = this.props; - const { setToast } = actions; - setToast({ toastMessage: t('ghostery_browser_hub_blocking_settings_view_toast_error_message'), toastClass: 'alert' From a0ed7d8e12ebce2e5b5fa03c88ff2be49570e629 Mon Sep 17 00:00:00 2001 From: leuryr Date: Fri, 15 Jan 2021 09:48:37 -0500 Subject: [PATCH 7/9] Move setToast code up in if block --- .../Step2_BlockSettingsView/BlockSettingsView.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 16d025a54..8cb178c30 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -70,6 +70,11 @@ class BlockSettingsView extends Component { // Will only change user settings if all questions are answered if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) { + setToast({ + toastMessage: '', + toastClass: '' + }); + const { setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep } = actions; @@ -94,10 +99,7 @@ class BlockSettingsView extends Component { break; } setBlockingPolicy({ blockingPolicy }); - setToast({ - toastMessage: '', - toastClass: '' - }); + setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING }); history.push('/onboarding/3'); } else { From d44acefcd1f3fa456397ced9b4e2672aebd0bbd3 Mon Sep 17 00:00:00 2001 From: leuryr Date: Tue, 19 Jan 2021 10:25:22 -0500 Subject: [PATCH 8/9] Center tooltip info icon --- .../Step2_BlockSettingsView/BlockSettingsView.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) 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 85b35e75c..080584168 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -107,12 +107,16 @@ } .BlockSettingsView_checkbox { - width: 18px; - height: 18px; + width: 20px; + height: 20px; + padding: 0; + margin-right: 14px; } .BlockSettingsView__infoIcon { width: 18px; + height: 25px; + background-position: center; background-repeat: no-repeat; background-image: url('/app/images/hub/setup/info.svg'); margin-left: 8px; From b4018495d626d52aedf58f2222a4e0c182ec256f Mon Sep 17 00:00:00 2001 From: leuryr Date: Wed, 20 Jan 2021 13:00:32 -0500 Subject: [PATCH 9/9] Make toast message i18n-friendly --- _locales/en/messages.json | 7 +++++-- app/shared-components/ToastMessage/ToastMessage.jsx | 7 +------ 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index c0bad4259..1aa857f51 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1959,8 +1959,11 @@ "ghostery_browser_hub_onboarding_other": { "message": "Other" }, - "ghostery_browser_hub_onboarding_toast_error": { - "message": "Please answer all questions" + "ghostery_browser_hub_onboarding_toast_success": { + "message": "Success: " + }, + "ghostery_browser_hub_onboarding_toast_alert": { + "message": "Error: " }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." diff --git a/app/shared-components/ToastMessage/ToastMessage.jsx b/app/shared-components/ToastMessage/ToastMessage.jsx index 990e338a7..0ca2f00eb 100644 --- a/app/shared-components/ToastMessage/ToastMessage.jsx +++ b/app/shared-components/ToastMessage/ToastMessage.jsx @@ -27,12 +27,7 @@ const ToastMessage = ({ const dawnHubClass = dawnHub ? 'dawn-hub' : ''; const dawnLayout = dawnHub ? 'align-justify align-middle' : 'align-center-middle'; - let dawnToastText = ''; - if (dawnHub && toastClass === 'alert') { - dawnToastText = 'Error: '; - } else if (dawnHub && toastClass === 'success') { - dawnToastText = 'Success: '; - } + const dawnToastText = dawnHub ? t(`ghostery_browser_hub_onboarding_toast_${toastClass}`) : ''; return (