GH-2205: Onboarding - Welcome & Get Started

_locales/en/messages.json

@@ -1749,6 +1749,15 @@
 	"ghostery_browser_hub_onboarding_header_title_plan_choices": {
 	  "message": "Ghostery Browser Hub - Plan Choices"
 	},
+	"ghostery_browser_hub_onboarding_welcome": {
+		"message": "Welcome to Ghostery Browser"
+	},
+	"ghostery_browser_hub_onboarding_lets_begin": {
+		"message": "Let's begin by choosing your privacy settings. This will be quick, we promise!"
+	},
+	"ghostery_browser_hub_onboarding_lets_do_this": {
+		"message": "Let's do this"
+	},
 	"enable_when_paused": {
 		"message": "To use this function, Resume Ghostery."
 	},

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx

@@ -13,6 +13,18 @@
 
 import React from 'react';
 
-const WelcomeView = () => <h1>Step 5: Welcome View</h1>;
+/**
+ * A Functional React component for rendering the Browser Welcome View
+ * @return {JSX} JSX for rendering the Browser Welcome View of the Hub app
+ * @memberof HubComponents
+ */
+const WelcomeView = () => (
+	<div className="WelcomeView__container">
+		<div className="WelcomeView__title">{t('ghostery_browser_hub_onboarding_welcome')}</div>
+		<div className="WelcomeView__subtitle">{t('ghostery_browser_hub_onboarding_lets_begin')}</div>
+		<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
+		<button className="WelcomeView__ctaButton" type="button">{t('ghostery_browser_hub_onboarding_lets_do_this')}</button>
+	</div>
+);
 
 export default WelcomeView;

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss

@@ -0,0 +1,57 @@
+.WelcomeView__container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+
+.WelcomeView__title {
+	margin-top: 125px;
+	font-size: 24px;
+	font-weight: 600;
+	line-height: 2.33;
+}
+
+.WelcomeView__subtitle {
+	margin-bottom: 20px;
+	width: 392px;
+	font-size: 18px;
+	line-height: 2.33;
+	text-align: center;
+}
+
+.WelcomeView__rocketShip {
+	margin-bottom: 84px;
+	height: 330px;
+	width: 545px;
+}
+
+.WelcomeView__ctaButton {
+	display: flex;
+	justify-content: center;
+	margin: 48px auto 0 auto;
+	height: 44px;
+	width: 162px;
+	padding: 7.7px 14px;
+	line-height: 22px;
+	background: linear-gradient(
+		45deg,
+		#ff7e74 50%,
+		#00aef0
+	);
+	background-size: 200% 100%;
+	background-position: 100% 50%;
+	transition: 0.25s all;
+	border: none;
+	&:hover {
+		background-position: 0% 50%;
+		transition: 0.25s all;
+	}
+	color: #FFF;
+	font-size: 14.1px;
+	font-weight: 700;
+	border-radius: 3.5px;
+	text-align: center;
+	line-height: 2.05;
+	cursor: pointer;
+}

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js

@@ -1,16 +1,3 @@
-/**
- * Point of entry index.js file for Ghostery Browser Hub Welcome View
- *
- * Ghostery Browser Extension
- * https://www.ghostery.com/
- *
- * Copyright 2020 Ghostery, Inc. All rights reserved.
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0
- */
-
 import WelcomeView from './WelcomeView';
 
-export default WelcomesView;
+export default WelcomeView;

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.jsx

@@ -0,0 +1,34 @@
+/**
+ * Point of entry index.js file for Browser Welcome View
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import BrowserWelcomeView from './WelcomeView';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => ({});
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({});
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(BrowserWelcomeView));

app/scss/hub.scss

@@ -86,6 +86,7 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../hub/Views/BrowserWelcomeView/BrowserWelcomeView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';

app/scss/hub_ghostery_browser.scss

@@ -87,6 +87,7 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';