GH-2236: Update onboarding branding (#658)

* Update Dawn copy, add new logos, minor CSS change

* Add message for install page copy change

_locales/en/messages.json

@@ -1740,20 +1740,23 @@
 	"hub_create_account_toast_error": {
 		"message": "That email address is already in use. Please choose another."
 	},
+	"ghostery_browser_hub_onboarding_install_heading": {
+		"message": "Ghostery Dawn now installing..."
+	},
 	"ghostery_browser_hub_onboarding_page_title": {
-	  "message": "Ghostery Browser Hub - Welcome"
+	  "message": "Ghostery Dawn Hub - Welcome"
 	},
   	"ghostery_browser_hub_onboarding_header_title_login": {
-	  "message": "Ghostery Browser Hub - Login"
+	  "message": "Ghostery Dawn Hub - Login"
 	},
 	"ghostery_browser_hub_onboarding_header_title_block_settings": {
-	  "message": "Ghostery Browser Hub - Block Settings"
+	  "message": "Ghostery Dawn Hub - Block Settings"
 	},
 	"ghostery_browser_hub_onboarding_header_title_search_choice": {
-	  "message": "Ghostery Browser Hub - Search Choice"
+	  "message": "Ghostery Dawn Hub - Search Choice"
 	},
 	"ghostery_browser_hub_onboarding_header_title_plan_choices": {
-	  "message": "Ghostery Browser Hub - Plan Choices"
+	  "message": "Ghostery Dawn Hub - Plan Choices"
 	},
 	"ghostery_browser_hub_onboarding_privacy": {
 		"message": "Privacy"
@@ -1765,7 +1768,7 @@
 		"message": "Plan"
 	},
 	"ghostery_browser_hub_onboarding_welcome": {
-		"message": "Welcome to Ghostery Browser!"
+		"message": "Welcome to Ghostery Dawn!"
 	},
 	"ghostery_browser_hub_onboarding_lets_begin": {
 		"message": "We've centralized online privacy by integrating our signature as well as novel technologies."

app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx

@@ -141,6 +141,7 @@ class ChooseDefaultSearchView extends Component {
 		return (
 			<Modal show>
 				<div className="ChooseSearchViewModal__content">
+					<img src="/app/images/hub/ChooseDefaultSearchView/ghostery-browser-logo.svg" />
 					<div className="ChooseSearchView__confirmationModalDescription">
 						Modal of type
 						{searchBeingConsidered}

app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.scss

@@ -90,7 +90,8 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 75%;
+	width: 75%;
+	padding-right: 15%;
 }
 
 .ChooseSearchView__customURLTitle {
@@ -154,7 +155,7 @@
   position: relative;
   width: 901px;
   min-height: 632px;
-  padding-top: 45px;
+  padding: 20px;
   color: #4a4a4a;
   background-color: #f7f7f7;
   border: 1px solid $tundora;

app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss

@@ -54,7 +54,7 @@ $medium-large-breakpoint: 1118px; // Break when 3 cards on the screen overflow t
 	height: 37px;
 	width: 193px;
 	margin: 65px auto 0 auto;
-	background-image: url('/app/images/hub/ChoosePlanView/search.svg');
+	background-image: url('/app/images/hub/ChooseDefaultSearchView/search-engine-logo-ghostery.svg');
 }
 .ChoosePlanView__adFree {
 	margin: 16px auto 0 auto;

app/images/hub/ChooseDefaultSearchView/ghostery-browser-logo.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="126" height="26" viewBox="0 0 126 26">
+    <defs>
+        <linearGradient id="v08zr7vdja" x1="31.127%" x2="89.415%" y1="8.085%" y2="88.961%">
+            <stop offset="0%" stop-color="#FF7E74"/>
+            <stop offset="100%" stop-color="#00AEF0"/>
+        </linearGradient>
+        <path id="eybazfdgqb" d="M4.831.032C2.17.032.032 2.17.032 4.832c0 2.66 2.138 4.798 4.8 4.798 2.66 0 4.798-2.138 4.798-4.799C9.63 2.17 7.492.032 4.831.032zm3.883 4.363H6.969c-.087-1.222-.48-2.356-1.178-3.36 1.57.393 2.748 1.746 2.923 3.36zm-5.148.872H6.14c-.131 1.178-.567 2.313-1.265 3.229-.786-.916-1.222-2.05-1.31-3.229zm0-.872c.13-1.178.567-2.312 1.265-3.229.742.96 1.178 2.095 1.265 3.229h-2.53zm.262-3.36C3.173 2.04 2.78 3.174 2.693 4.396H.948c.175-1.614 1.353-2.967 2.88-3.36zM.948 5.268h1.745c.088 1.222.48 2.356 1.178 3.36-1.57-.393-2.748-1.745-2.923-3.36zm4.886 3.36c.655-1.004 1.048-2.138 1.178-3.36h1.745c-.218 1.615-1.396 2.967-2.923 3.36z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g>
+                <g stroke="#FFF" stroke-linecap="round" stroke-width=".886">
+                    <path d="M0 .074L1.565.074M0 7.756L1.565 7.756" transform="translate(-20 -19) translate(20 19) rotate(90 3.102 12.41)"/>
+                </g>
+                <path fill="#000" fill-rule="nonzero" d="M92.87 18.466c2.11 0 3.029-1.387 3.029-3.4V8.188c0-2.012-.919-3.4-3.029-3.4h-3.009v13.678h3.01zm-.02-.82h-2.09V5.608h2.09c1.505 0 2.15 1.036 2.15 2.54v6.956c0 1.505-.625 2.54-2.15 2.54zm5.597.82l.684-3.029h4.26l.683 3.029h.9l-3.049-13.697h-1.309l-2.99 13.697h.821zm4.807-3.81h-3.986l1.973-8.851 2.013 8.85zm6.827 3.81l1.915-11.196 1.837 11.196h1.172l2.189-13.677h-.802l-1.973 12.426-1.915-12.368h-.957l-1.993 12.407-2.052-12.465h-.879l2.208 13.677h1.25zm9.778 0V6.274l4.28 12.192h.996V4.789h-.82v11.547L120.21 4.79h-1.172v13.677h.82z" transform="translate(-20 -19) translate(20 19)"/>
+                <g fill="#1D1D1B">
+                    <path d="M3.443 6.168h3.048v4.305c0 2.173-1.108 3.414-3.246 3.414C1.108 13.887 0 12.646 0 10.473v-7.06C0 1.241 1.108 0 3.245 0c2.138 0 3.246 1.24 3.246 3.413v1.32H4.433V3.277c0-.97-.435-1.338-1.128-1.338-.693 0-1.128.368-1.128 1.338v7.331c0 .97.435 1.32 1.128 1.32.693 0 1.128-.35 1.128-1.32V8.107h-.99v-1.94zM10.154 13.724L7.977 13.724 7.977.148 10.154.148 10.154 5.966 12.627 5.966 12.627.148 14.844.148 14.844 13.724 12.627 13.724 12.627 7.905 10.154 7.905zM16.25 3.414C16.25 1.24 17.418 0 19.555 0c2.138 0 3.305 1.242 3.305 3.414v7.06c0 2.172-1.167 3.414-3.305 3.414-2.137 0-3.305-1.242-3.305-3.414v-7.06zm2.177 7.196c0 .97.436 1.338 1.128 1.338.693 0 1.128-.369 1.128-1.338V3.278c0-.97-.435-1.339-1.128-1.339-.692 0-1.128.37-1.128 1.339v7.332zM27.197 0c2.118 0 3.207 1.242 3.207 3.414v.426h-2.059v-.562c0-.97-.396-1.338-1.089-1.338-.692 0-1.088.368-1.088 1.338 0 2.793 4.255 3.317 4.255 7.196 0 2.172-1.108 3.413-3.246 3.413-2.136 0-3.245-1.24-3.245-3.413V9.64h2.058v.97c0 .969.436 1.318 1.128 1.318.693 0 1.128-.35 1.128-1.319 0-2.793-4.255-3.317-4.255-7.195C23.991 1.242 25.08 0 27.197 0M30.875.148L37.603.148 37.603 2.088 35.328 2.088 35.328 13.725 33.151 13.725 33.151 2.088 30.875 2.088zM40.881 5.869L43.869 5.869 43.869 7.809 40.881 7.809 40.881 11.785 44.641 11.785 44.641 13.725 38.705 13.725 38.705.148 44.641.148 44.641 2.087 40.881 2.087zM50.495 13.724c-.118-.35-.198-.563-.198-1.667V9.923c0-1.26-.435-1.726-1.425-1.726h-.752v5.527h-2.177V.148h3.286c2.255 0 3.226 1.028 3.226 3.123v1.066c0 1.396-.456 2.308-1.425 2.754 1.088.446 1.444 1.474 1.444 2.89v2.095c0 .66.02 1.144.237 1.648h-2.216zM48.12 2.087v4.17h.851c.812 0 1.306-.349 1.306-1.435V3.483c0-.97-.336-1.396-1.108-1.396H48.12zM55.785 9.225L53.034.148 55.31.148 56.973 6.335 58.635.148 60.713.148 57.962 9.225 57.962 13.724 55.785 13.724z" transform="translate(-20 -19) translate(20 19) translate(26.148 4.58)"/>
+                </g>
+                <g>
+                    <g fill="url(#v08zr7vdja)" transform="translate(-20 -19) translate(20 19)">
+                        <path d="M21.113 16.18V9.39c0-5.186-4.288-9.39-9.576-9.39C6.247 0 1.96 4.204 1.96 9.39v6.888c-.041.888-.256 2.924-1.307 5.306-1.414 3.2-.244 2.82.804 2.556 1.047-.262 3.387-1.29 4.118-.024.73 1.266 1.34 2.365 3.045 1.648 1.706-.716 2.51-.955 2.753-.955h.331c.244 0 1.048.24 2.753.955 1.706.717 2.315-.382 3.046-1.648.73-1.266 3.07-.238 4.118.024 1.047.263 2.216.645.803-2.556-1.093-2.479-1.282-4.579-1.311-5.404z"/>
+                    </g>
+                    <g transform="translate(-20 -19) translate(20 19) translate(6.71 5.06)">
+                        <use fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width=".5" xlink:href="#eybazfdgqb"/>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

app/images/hub/ChooseDefaultSearchView/search-engine-logo-ghostery.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="167" height="36" viewBox="0 0 167 36">
     <defs>
-        <linearGradient id="tez6bbwc4a" x1="23.581%" x2="89.415%" y1="8.335%" y2="92.702%">
+        <linearGradient id="30wcgaegca" x1="23.581%" x2="89.415%" y1="8.335%" y2="92.702%">
             <stop offset="0%" stop-color="#67A73A"/>
             <stop offset="100%" stop-color="#00AEF0"/>
         </linearGradient>
@@ -9,20 +9,18 @@
         <g>
             <g>
                 <g stroke="#FFF" stroke-linecap="round" stroke-width="1.19">
-                    <path d="M0 .099L2.101.099M0 10.412L2.101 10.412" transform="translate(-229 -275) translate(229 275) rotate(90 4.091 16.732)"/>
+                    <path d="M0 .099L2.101.099M0 10.412L2.101 10.412" transform="translate(-238 -279) translate(238 279) rotate(90 4.091 16.732)"/>
                 </g>
-                <text fill="#000" font-family="BebasNeueBook, Bebas Neue" font-size="26.23" font-weight="300" letter-spacing=".615" transform="translate(-229 -275) translate(229 275)">
-                    <tspan x="119.388" y="25">GLOW</tspan>
-                </text>
+                <path fill="#000" fill-rule="nonzero" d="M124.32 25.157c2.806 0 3.96-1.993 3.96-4.642V15.53h-3.593v1.102h2.44v3.96c0 1.968-.761 3.436-2.781 3.436s-2.78-1.468-2.78-3.436v-9.548c0-1.967.76-3.462 2.78-3.462 2.02 0 2.78 1.495 2.78 3.462v1.443h1.154v-1.364c0-2.65-1.154-4.643-3.96-4.643-2.807 0-3.961 1.994-3.961 4.643v9.39c0 2.65 1.154 4.643 3.96 4.643zM137.892 25v-1.102h-5.77V6.638h-1.207V25h6.977zm6.36.157c2.832 0 4.065-1.967 4.065-4.642v-9.39c0-2.676-1.233-4.644-4.065-4.644-2.78 0-4.014 1.968-4.014 4.643v9.39c0 2.676 1.233 4.643 4.014 4.643zm0-1.101c-2.02 0-2.807-1.47-2.807-3.463v-9.548c0-1.993.787-3.462 2.807-3.462 2.045 0 2.859 1.469 2.859 3.462v9.548c0 1.994-.814 3.463-2.86 3.463zm11.08.944l2.57-15.03L160.369 25h1.574l2.938-18.361h-1.075l-2.65 16.682-2.57-16.604H157.3l-2.676 16.657-2.754-16.735h-1.18L153.652 25h1.68z" transform="translate(-238 -279) translate(238 279)"/>
                 <g fill="#1D1D1B">
-                    <path d="M4.623 8.28h4.092v5.78c0 2.917-1.489 4.583-4.358 4.583C1.487 18.643 0 16.977 0 14.06V4.582C0 1.666 1.488 0 4.357 0c2.87 0 4.358 1.666 4.358 4.582v1.771H5.95V4.4c0-1.301-.584-1.796-1.514-1.796S2.922 3.1 2.922 4.4v9.843c0 1.302.585 1.77 1.515 1.77.93 0 1.514-.468 1.514-1.77v-3.359H4.623V8.28zM13.631 18.424L10.709 18.424 10.709.198 13.631.198 13.631 8.009 16.952 8.009 16.952.198 19.928.198 19.928 18.424 16.952 18.424 16.952 10.613 13.631 10.613zM21.815 4.583C21.815 1.667 23.383 0 26.252 0c2.87 0 4.437 1.667 4.437 4.583v9.478c0 2.916-1.567 4.583-4.437 4.583s-4.437-1.667-4.437-4.583V4.583zm2.923 9.66c0 1.302.585 1.797 1.514 1.797.93 0 1.514-.495 1.514-1.797V4.4c0-1.301-.584-1.796-1.514-1.796-.929 0-1.514.495-1.514 1.796v9.843zM36.512 0c2.843 0 4.304 1.667 4.304 4.583v.573h-2.763V4.4c0-1.301-.532-1.796-1.463-1.796-.929 0-1.46.495-1.46 1.796 0 3.75 5.712 4.453 5.712 9.66 0 2.917-1.487 4.583-4.357 4.583-2.869 0-4.357-1.666-4.357-4.582v-1.12h2.763v1.302c0 1.301.585 1.77 1.514 1.77.93 0 1.514-.469 1.514-1.77 0-3.75-5.712-4.453-5.712-9.66C32.207 1.667 33.668 0 36.512 0M41.449.198L50.481.198 50.481 2.803 47.427 2.803 47.427 18.425 44.504 18.425 44.504 2.803 41.449 2.803zM54.881 7.879L58.893 7.879 58.893 10.483 54.881 10.483 54.881 15.821 59.93 15.821 59.93 18.425 51.96 18.425 51.96.198 59.93.198 59.93 2.802 54.881 2.802zM67.788 18.424c-.159-.469-.266-.755-.266-2.238V13.32c0-1.692-.584-2.317-1.913-2.317H64.6v7.42h-2.923V.198h4.411c3.028 0 4.331 1.38 4.331 4.193v1.432c0 1.874-.611 3.098-1.913 3.697 1.46.598 1.938 1.978 1.938 3.88v2.811c0 .886.027 1.537.32 2.213h-2.976zM64.6 2.802V8.4h1.142c1.09 0 1.753-.468 1.753-1.927V4.676c0-1.302-.451-1.874-1.487-1.874H64.6zM74.89 12.384L71.197.198 74.251.198 76.485 8.505 78.716.198 81.506.198 77.813 12.384 77.813 18.424 74.89 18.424z" transform="translate(-229 -275) translate(229 275) translate(35.103 6.295)"/>
+                    <path d="M4.623 8.28h4.092v5.78c0 2.917-1.489 4.583-4.358 4.583C1.487 18.643 0 16.977 0 14.06V4.582C0 1.666 1.488 0 4.357 0c2.87 0 4.358 1.666 4.358 4.582v1.771H5.95V4.4c0-1.301-.584-1.796-1.514-1.796S2.922 3.1 2.922 4.4v9.843c0 1.302.585 1.77 1.515 1.77.93 0 1.514-.468 1.514-1.77v-3.359H4.623V8.28zM13.631 18.424L10.709 18.424 10.709.198 13.631.198 13.631 8.009 16.952 8.009 16.952.198 19.928.198 19.928 18.424 16.952 18.424 16.952 10.613 13.631 10.613zM21.815 4.583C21.815 1.667 23.383 0 26.252 0c2.87 0 4.437 1.667 4.437 4.583v9.478c0 2.916-1.567 4.583-4.437 4.583s-4.437-1.667-4.437-4.583V4.583zm2.923 9.66c0 1.302.585 1.797 1.514 1.797.93 0 1.514-.495 1.514-1.797V4.4c0-1.301-.584-1.796-1.514-1.796-.929 0-1.514.495-1.514 1.796v9.843zM36.512 0c2.843 0 4.304 1.667 4.304 4.583v.573h-2.763V4.4c0-1.301-.532-1.796-1.463-1.796-.929 0-1.46.495-1.46 1.796 0 3.75 5.712 4.453 5.712 9.66 0 2.917-1.487 4.583-4.357 4.583-2.869 0-4.357-1.666-4.357-4.582v-1.12h2.763v1.302c0 1.301.585 1.77 1.514 1.77.93 0 1.514-.469 1.514-1.77 0-3.75-5.712-4.453-5.712-9.66C32.207 1.667 33.668 0 36.512 0M41.449.198L50.481.198 50.481 2.803 47.427 2.803 47.427 18.425 44.504 18.425 44.504 2.803 41.449 2.803zM54.881 7.879L58.893 7.879 58.893 10.483 54.881 10.483 54.881 15.821 59.93 15.821 59.93 18.425 51.96 18.425 51.96.198 59.93.198 59.93 2.802 54.881 2.802zM67.788 18.424c-.159-.469-.266-.755-.266-2.238V13.32c0-1.692-.584-2.317-1.913-2.317H64.6v7.42h-2.923V.198h4.411c3.028 0 4.331 1.38 4.331 4.193v1.432c0 1.874-.611 3.098-1.913 3.697 1.46.598 1.938 1.978 1.938 3.88v2.811c0 .886.027 1.537.32 2.213h-2.976zM64.6 2.802V8.4h1.142c1.09 0 1.753-.468 1.753-1.927V4.676c0-1.302-.451-1.874-1.487-1.874H64.6zM74.89 12.384L71.197.198 74.251.198 76.485 8.505 78.716.198 81.506.198 77.813 12.384 77.813 18.424 74.89 18.424z" transform="translate(-238 -279) translate(238 279) translate(35.103 6.295)"/>
                 </g>
                 <g>
-                    <g fill="url(#tez6bbwc4a)" transform="translate(-229 -275) translate(229 275) translate(0 .147)">
+                    <g fill="url(#30wcgaegca)" transform="translate(-238 -279) translate(238 279) translate(0 .147)">
                         <path d="M30.104 28.976c-1.468-3.328-1.721-6.147-1.76-7.255v-9.114C28.343 5.644 22.587 0 15.487 0S2.63 5.644 2.63 12.607v9.246c-.055 1.192-.344 3.925-1.755 7.123-1.897 4.297-.327 3.785 1.08 3.431 1.406-.352 4.546-1.732 5.528-.032.98 1.7 1.799 3.175 4.088 2.213 2.29-.962 3.369-1.282 3.696-1.282h.444c.327 0 1.407.32 3.696 1.282 2.29.962 3.108-.514 4.089-2.213.98-1.7 4.121-.32 5.528.032 1.407.354 2.976.866 1.079-3.431"/>
                     </g>
                     <g fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width=".5">
-                        <path d="M14.459 13.043L11.406 9.97c.748-1.031 1.193-2.305 1.193-3.68C12.599 2.812 9.768 0 6.31 0 2.852.001.022 2.832.022 6.29c0 3.478 2.83 6.288 6.288 6.288 1.375 0 2.649-.444 3.68-1.193l3.053 3.074c.203.202.466.303.708.303.243 0 .526-.1.708-.303.404-.384.404-1.031 0-1.416zm-8.17-2.466c-2.365 0-4.266-1.921-4.266-4.267 0-2.366 1.921-4.266 4.267-4.266 2.345 0 4.287 1.9 4.287 4.246 0 2.366-1.921 4.287-4.287 4.287z" transform="translate(-229 -275) translate(229 275) translate(0 .147) translate(9.198 5.802)"/>
+                        <path d="M14.459 13.043L11.406 9.97c.748-1.031 1.193-2.305 1.193-3.68C12.599 2.812 9.768 0 6.31 0 2.852.001.022 2.832.022 6.29c0 3.478 2.83 6.288 6.288 6.288 1.375 0 2.649-.444 3.68-1.193l3.053 3.074c.203.202.466.303.708.303.243 0 .526-.1.708-.303.404-.384.404-1.031 0-1.416zm-8.17-2.466c-2.365 0-4.266-1.921-4.266-4.267 0-2.366 1.921-4.266 4.267-4.266 2.345 0 4.287 1.9 4.287 4.246 0 2.366-1.921 4.287-4.287 4.287z" transform="translate(-238 -279) translate(238 279) translate(0 .147) translate(9.198 5.802)"/>
                     </g>
                 </g>
             </g>