Fixes for Dawn Onboarding toast messages (#660)

* Fixes for Dawn toast styling and layout

* Add missing toast error message for Step 1

* Ensure toast remains above step progress bar

* Comment update

* Update snapshot for ToastMessage component

* Fix toast not clearing after block settings submit

* Move setToast code up in if block

* Center tooltip info icon

* Make toast message i18n-friendly

_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"
 	}
 }

app/ghostery-browser-hub/Views/AppView/AppView.jsx

@@ -38,7 +38,7 @@ const AppView = (props) => {
 	return (
 		<div className="App full-height full-width flex-container">
 			<div className="App__mainContent full-height full-width">
-				{<ToastMessage toastText={toastMessage} toastClass={toastClass} toastExit={exitToast} />}
+				{<ToastMessage toastText={toastMessage} toastClass={toastClass} dawnHub toastExit={exitToast} />}
 				{children}
 			</div>
 		</div>

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: ''

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'
 			});
 		}
 	}

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;

app/images/hub/toast/toast-alert.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="wy9qqssfxa" d="M3.5 22c-.5 0-1-.1-1.5-.4C.6 20.8.1 18.9.9 17.5L9.4 3.3c.2-.4.6-.8 1-1 .7-.4 1.5-.5 2.3-.3.8.2 1.4.7 1.9 1.4L23 17.5c.3.5.4 1 .4 1.5 0 .8-.3 1.6-.9 2.1-.5.6-1.2.9-2 .9h-17zm7.6-17.6L2.7 18.5c-.3.5-.1 1.1.4 1.4.1.1.3.1.4.1h16.9c.3 0 .5-.1.7-.3.2-.2.3-.4.3-.7 0-.2 0-.3-.1-.5L12.9 4.4c-.3-.5-.9-.6-1.4-.4-.2.1-.3.2-.4.4zM13 13V9c0-.6-.4-1-1-1s-1 .4-1 1v4c0 .6.4 1 1 1s1-.4 1-1zm-.3 4.7c.2-.2.3-.4.3-.7 0-.1 0-.3-.1-.4 0-.1-.1-.2-.2-.3 0 0-.1-.1-.2-.1s-.1-.1-.2-.1-.1 0-.2-.1c-.2 0-.4 0-.6.1-.1 0-.2.1-.3.2-.1.1-.2.2-.2.3 0 .1-.1.2-.1.4 0 .3.1.5.3.7.2.2.4.3.7.3.4 0 .6-.1.8-.3z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-165 -71) translate(165 71)">
+                <mask id="8dw5swpdwb" fill="#fff">
+                    <use xlink:href="#wy9qqssfxa"/>
+                </mask>
+                <use fill="#000" fill-rule="nonzero" xlink:href="#wy9qqssfxa"/>
+                <g fill="#9F4948" mask="url(#8dw5swpdwb)">
+                    <path d="M0 0H24V24H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

app/images/hub/toast/toast-success.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="o0o06k6tda" d="M23 11.1v.9c0 6.1-4.9 11-11 11S1 18.1 1 12 5.9 1 12 1c1.5 0 3.1.3 4.5 1 .5.2.7.8.5 1.3-.2.5-.8.7-1.3.5-1.2-.5-2.4-.8-3.7-.8-5 0-9 4-9 9s4 9 9 9 9-4 9-9v-.9c0-.6.4-1 1-1s1 .4 1 1zm.7-8.8c-.4-.4-1-.4-1.4 0L12 12.6l-2.3-2.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l3 3c.2.2.5.3.7.3.2 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-165 -71) translate(165 71)">
+                <mask id="subc7yvwab" fill="#fff">
+                    <use xlink:href="#o0o06k6tda"/>
+                </mask>
+                <use fill="#000" fill-rule="nonzero" xlink:href="#o0o06k6tda"/>
+                <g fill="#417505" mask="url(#subc7yvwab)">
+                    <path d="M0 0H24V24H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

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 }) => (
-	<div className="ToastMessage full-width">
-		{toastText && (
-			<div className="callout-container">
-				<div className={`callout toast ${toastClass}`}>
-					<div className="flex-container align-center-middle">
-						<div className="callout-text">
-							{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 (
+		<div className={`ToastMessage full-width ${dawnHubClass}`}>
+			{toastText && (
+				<div className="callout-container">
+					<div className={`callout toast ${toastClass}`}>
+						<div className={`flex-container ${dawnLayout}`}>
+							<div className="flex-container align-middle">
+								{dawnHub && (
+									<img className="ToastMessage_classIcon" src={`/app/images/hub/toast/toast-${toastClass}.svg`} />
+								)}
+								<div className="callout-text">
+									{`${dawnToastText}${toastText}`}
+								</div>
+							</div>
+							{toastExit && (
+								<div className="ToastMessage__close clickable" onClick={toastExit} />
+							)}
 						</div>
-						{toastExit && (
-							<div className="ToastMessage__close clickable" onClick={toastExit} />
-						)}
 					</div>
 				</div>
-			</div>
-		)}
-	</div>
-);
+			)}
+		</div>
+	);
+};
 
 // 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;

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;

app/shared-components/ToastMessage/__tests__/__snapshots__/ToastMessage.test.jsx.snap

@@ -2,15 +2,15 @@
 
 exports[`app/shared-components/ToastMessage More Snapshot tests with react-test-renderer, but for edge cases edge case where text is empty string 1`] = `
 <div
-  className="ToastMessage full-width"
+  className="ToastMessage full-width "
 >
 
 </div>
 `;
 
 exports[`app/shared-components/ToastMessage Snapshot tests with react-test-renderer toast message is rendered correctly 1`] = `
 <div
-  className="ToastMessage full-width"
+  className="ToastMessage full-width "
 >
   <div
     className="callout-container"
@@ -22,9 +22,13 @@ exports[`app/shared-components/ToastMessage Snapshot tests with react-test-rende
         className="flex-container align-center-middle"
       >
         <div
-          className="callout-text"
+          className="flex-container align-middle"
         >
-          sample text
+          <div
+            className="callout-text"
+          >
+            sample text
+          </div>
         </div>
       </div>
     </div>
@@ -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`] = `
 <div
-  className="ToastMessage full-width"
+  className="ToastMessage full-width "
 >
   <div
     className="callout-container"
@@ -46,9 +50,13 @@ exports[`app/shared-components/ToastMessage Snapshot tests with react-test-rende
         className="flex-container align-center-middle"
       >
         <div
-          className="callout-text"
+          className="flex-container align-middle"
         >
-          example text
+          <div
+            className="callout-text"
+          >
+            example text
+          </div>
         </div>
         <div
           className="ToastMessage__close clickable"