diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7c87a4a6d..1840ff7de 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_dawn_onboarding_toast_fix_errors": { + "message": "Please fix errors before proceeding." + }, "ghostery_dawn_onboarding_install_heading": { "message": "Ghostery Dawn now installing..." }, @@ -1926,7 +1929,7 @@ "ghostery_dawn_onboarding_info_smart_browsing": { "message": "Smart-browsing adjusts your blocking settings to decrease page breakage and accelerate page loads." }, - "ghostery_browser_hub__onboarding_choose_your_default_search": { + "ghostery_dawn_hub__onboarding_choose_your_default_search": { "message": "Choose your default search" }, "ghostery_dawn_onboarding_pick_a_default_search_engine": { @@ -1959,8 +1962,11 @@ "ghostery_dawn_onboarding_other": { "message": "Other" }, - "ghostery_dawn_onboarding_toast_error": { - "message": "Please answer all questions" + "ghostery_dawn_onboarding_toast_success": { + "message": "Success: " + }, + "ghostery_dawn_onboarding_toast_alert": { + "message": "Error: " }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." @@ -2415,7 +2421,7 @@ "pick_a_default_search_engine": { "message": "Pick a default engine for all your searches." }, - "ghostery_browser_hub_blocking_settings_view_toast_error_message": { - "message": "Error: Please answer all questions" + "ghostery_dawn_hub_blocking_settings_view_toast_error_message": { + "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 108d77346..8978d1cb3 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/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx index 0cd3e4fac..de260dd49 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 @@ -144,10 +144,15 @@ class CreateAccountFormContainer extends Component { validateInput: true, }); + const { actions } = this.props; if (!emailIsValid || !confirmIsValid || !legalConsentChecked || !passwordIsValid || confirmPasswordError) { + actions.setToast({ + toastMessage: t('ghostery_dawn_onboarding_toast_fix_errors'), + toastClass: 'alert' + }); return; } - const { actions } = this.props; + actions.setToast({ toastMessage: '', toastClass: '' 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 1e8242294..330463407 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -66,9 +66,16 @@ 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; + setToast({ + toastMessage: '', + toastClass: '' + }); + const { setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep } = actions; @@ -93,15 +100,13 @@ class BlockSettingsView extends Component { break; } setBlockingPolicy({ blockingPolicy }); + 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: 'error' + toastMessage: t('ghostery_dawn_hub_blocking_settings_view_toast_error_message'), + toastClass: 'alert' }); } } 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 8482b7f7a..d25ecef48 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -121,12 +121,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; 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..95a092ac7 100644 --- a/app/shared-components/ToastMessage/ToastMessage.jsx +++ b/app/shared-components/ToastMessage/ToastMessage.jsx @@ -19,24 +19,40 @@ 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 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'; + + const dawnToastText = dawnHub ? t(`ghostery_dawn_onboarding_toast_${toastClass}`) : ''; + + return ( +
+ {toastText && ( +
+
+
+
+ {dawnHub && ( + + )} +
+ {`${dawnToastText}${toastText}`} +
+
+ {toastExit && ( +
+ )}
- {toastExit && ( -
- )}
-
- )} -
-); + )} +
+ ); +}; // PropTypes ensure we pass required props of the correct type ToastMessage.propTypes = { @@ -46,11 +62,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..7fa82e84b 100644 --- a/app/shared-components/ToastMessage/ToastMessage.scss +++ b/app/shared-components/ToastMessage/ToastMessage.scss @@ -16,7 +16,31 @@ position: relative; top: 30px; height: 0; + &.dawn-hub { + z-index: 1; + 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; 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 +