GH-339 Ghostery Hub Home View

Minor fixes

_locales/en/messages.json

@@ -1596,6 +1596,57 @@
 	"hub_home_page_title": {
 		"message": "Ghostery Hub - Home"
 	},
+	"hub_home_header_text": {
+		"message": "Ghostery is ready!"
+	},
+	"hub_home_header_tagline": {
+		"message": "You are now protected with our default settings."
+	},
+	"hub_home_header_tagline_2": {
+		"message": "Start Browsing!"
+	},
+	"hub_home_header_checkbox_label": {
+		"message": "Share analytics and Human Web data to improve Ghostery’s performance. "
+	},
+	"hub_home_header_checkbox_link": {
+		"message": "Learn More."
+	},
+	"hub_home_subheader_optimize": {
+		"message": "Optimize your Ghostery experience"
+	},
+	"hub_home_subheader_create_account": {
+		"message": "Create Account"
+	},
+	"hub_home_feature_tutorial_title": {
+		"message": "Take a Tutorial"
+	},
+	"hub_home_feature_tutorial_text": {
+		"message": "Walk through Ghostery's main features."
+	},
+	"hub_home_feature_tutorial_button": {
+		"message": "Start"
+	},
+	"hub_home_feature_tutorial_button_alt": {
+		"message": "Tutorial Complete"
+	},
+	"hub_home_feature_setup_title": {
+		"message": "Customize Setup"
+	},
+	"hub_home_feature_setup_text": {
+		"message": "Edit your settings and blocking preferences."
+	},
+	"hub_home_feature_setup_button": {
+		"message": "Edit Setup"
+	},
+	"hub_home_feature_setup_button_alt": {
+		"message": "Custom Setup Complete"
+	},
+	"hub_home_feature_supporter_text": {
+		"message": "Become a Ghostery Supporter and unlock special features."
+	},
+	"hub_home_feature_supporter_button": {
+		"message": "Become a Supporter"
+	},
 	"hub_setup_page_title": {
 		"message": "Ghostery Hub - Setup"
 	},

app/hub/App.jsx

@@ -14,7 +14,7 @@
  */
 
 import React, { Component } from 'react';
-import SideNavigation from './Views/SideNavigationView/SideNavigationView';
+import SideNavigation from './Views/SideNavigationView';
 
 /**
  * @class Implements the container App for the Ghostery Hub

app/hub/Views/HomeView/HomeView.jsx

@@ -9,59 +9,136 @@
  * 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
- *
- * ToDo: Update this file.
  */
 
 import React from 'react';
+import ClassNames from 'classnames';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import { ToggleCheckbox } from '../../../shared-components';
 
 /**
- * @class Implement the Home View for the Ghostery Hub
+ * A Functional React component for rendering the Home View
+ * @return {JSX} JSX for rendering the Home View of the Hub app
  * @memberof HubComponents
  */
-const HomeView = () => (
-	<div>
-		<div className="row ready-header">
-			<div className="columns small-6">
-				<div className="ghosty-dialogue" />
-			</div>
-			<div className="columns small-6">
-				<h1>Ghostery is Ready!</h1>
-				<p>you are now protected with the Ghostery recommended default settings.</p>
-				<span className="bold">Start browsing!</span>
-				<label>
-					<input type="checkbox" />
-					Support Ghostery by sharing Human Web & Analytics data.
-					<a>Learn more.</a>
-				</label>
-			</div>
-		</div>
-		<div className="row optimize-create">
-			<div className="columns small-6">
-				<span>Optimze your ghostery experience</span>
-			</div>
-			<div className="columns small-6">
-				<a>Create Account</a>
-			</div>
-		</div>
-		<div className="row tutorial-custom">
-			<div className="columns small-6">
-				tutorial
-			</div>
-			<div className="columns small-6">
-				customize setup
-			</div>
-		</div>
-		<div className="row supporter">
-			<div className="columns small-6">
-				become a ghostery support text
-			</div>
-			<div className="columns small-6">
-				support button
+const HomeView = (props) => {
+	const {
+		justInstalled,
+		setup_complete,
+		tutorial_complete,
+		enable_human_web,
+		changeHumanWeb,
+		account_text,
+		account_link,
+	} = props;
+	const tutorialFeatureClassNames = ClassNames('HomeView__onboardingFeature columns flex-container align-middle flex-dir-column', {
+		'feature-tutorial-complete': tutorial_complete,
+		'feature-tutorial': !tutorial_complete,
+	});
+	const tutorialButtonClassNames = ClassNames('HomeView__featureButton button primary', {
+		hollow: tutorial_complete,
+	});
+	const setupFeatureClassNames = ClassNames('HomeView__onboardingFeature columns flex-container align-middle flex-dir-column', {
+		'feature-setup-complete': setup_complete,
+		'feature-setup': !setup_complete,
+	});
+	const setupButtonClassNames = ClassNames('HomeView__featureButton button primary', {
+		hollow: setup_complete,
+	});
+
+	return (
+		<div className="HomeView row align-center">
+			<div className="columns small-12 medium-10 large-8">
+				<div className="HomeView__header row align-center-middle">
+					<img className="columns" src="/app/images/hub/home/ghosty-bubble-heart.svg" />
+					<div className="HomeView__title columns">
+						<h1>
+							{t('hub_home_header_text')}
+						</h1>
+						{justInstalled && (
+							<div className="HomeView__headerTagline">
+								{t('hub_home_header_tagline')}
+							</div>
+						)}
+						<div className="HomeView__headerTagline HomeView--bolded">
+							{t('hub_home_header_tagline_2')}
+						</div>
+						<div className="HomeView__supportContainer flex-container align-middle">
+							<ToggleCheckbox
+								checked={enable_human_web}
+								onChange={changeHumanWeb}
+							/>
+							<div>
+								<span>{t('hub_home_header_checkbox_label')}</span>
+								<NavLink to="/faq">
+									{t('hub_home_header_checkbox_link')}
+								</NavLink>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div className="HomeView__subHeader row align-justify">
+					<div>
+						{t('hub_home_subheader_optimize')}
+					</div>
+					<NavLink to={account_link}>
+						{account_text}
+					</NavLink>
+				</div>
+				<div className="HomeView__onboarding row">
+					<div className={tutorialFeatureClassNames}>
+						<div className="HomeView__featureIcon" />
+						<div className="HomeView__featureTitle">
+							{t('hub_home_feature_tutorial_title')}
+						</div>
+						<div className="HomeView__featureText flex-child-grow">
+							{t('hub_home_feature_tutorial_text')}
+						</div>
+						<NavLink to="/tutorial" className={tutorialButtonClassNames}>
+							{tutorial_complete ? t('hub_home_feature_tutorial_button_alt') : t('hub_home_feature_tutorial_button')}
+						</NavLink>
+					</div>
+					<div className="HomeView__onboardingFeatureDivider column shrink" />
+					<div className={setupFeatureClassNames}>
+						<div className="HomeView__featureIcon" />
+						<div className="HomeView__featureTitle">
+							{t('hub_home_feature_setup_title')}
+						</div>
+						<div className="HomeView__featureText flex-child-grow">
+							{t('hub_home_feature_setup_text')}
+						</div>
+						<NavLink to="/setup" className={setupButtonClassNames}>
+							{setup_complete ? t('hub_home_feature_setup_button_alt') : t('hub_home_feature_setup_button')}
+						</NavLink>
+					</div>
+				</div>
+				<div className="HomeView__supporter row">
+					<div className="HomeView__supporterFeature columns flex-container align-middle">
+						<div className="HomeView__featureText columns">
+							{t('hub_home_feature_supporter_text')}
+						</div>
+						<div className="HomeView__featureIcon columns shrink feature-supporter" />
+						<div className="columns flex-container align-center-middle">
+							<NavLink to="/supporter" className="HomeView__featureButton button primary">
+								{t('hub_home_feature_supporter_button')}
+							</NavLink>
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
-	</div>
-);
+	);
+};
 
+// PropTypes ensure we pass required props of the correct type
+HomeView.propTypes = {
+	setup_complete: PropTypes.bool.isRequired,
+	tutorial_complete: PropTypes.bool.isRequired,
+	enable_human_web: PropTypes.bool.isRequired,
+	changeHumanWeb: PropTypes.func.isRequired,
+	account_text: PropTypes.string.isRequired,
+	account_link: PropTypes.string.isRequired,
+};
 
 export default HomeView;

app/hub/Views/HomeView/HomeView.scss

@@ -1,6 +1,121 @@
-.ghosty-dialogue {
-	height: 156px;
-	background-image: url('../images/hub/ghosty-dialogue.svg');
+/**
+ * Home View Sass
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2018 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
+ */
+
+// Home View
+.HomeView {
+	padding-top: 45px;
+	padding-bottom: 25px;
+	color: #4a4a4a;
+}
+.HomeView--bolded {
+	font-weight: 700;
+}
+.HomeView__header img {
+	max-width: 156px;
+	margin-right: 23px;
+}
+.HomeView__header h1 {
+	color: #4a4a4a;
+	margin-bottom: 19px;
+}
+.HomeView__headerTagline {
+	font-size: 20px;
+	line-height: 38px;
+	color: #4a4a4a;
+}
+.HomeView__supportContainer {
+	margin-top: 12px;
+	margin-left: -12px;
+}
+.HomeView__subHeader {
+	margin-top: 12px;
+	font-size: 16px;
+	font-weight: 500;
+	line-height: 32px;
+}
+.HomeView__subHeader a {
+	text-decoration: underline;
+}
+.HomeView__onboarding {
+	margin-top: 7px;
+	padding: 27px 12px 30px;
+	border-radius: 4px;
+	background-color: #f0f3f4;
+}
+.HomeView__onboardingFeature {
+	margin: 0 8px;
+	padding: 0 36px;
+}
+.HomeView__onboardingFeatureDivider {
+	margin: 7px 0 4px;
+	width: 1px;
+	padding: 0;
+	background-color: #979797;
+}
+.HomeView__supporter {
+	margin-top: 22px;
+	padding: 22px 12px;
+	background-color: #f0f3f4;
+	border-radius: 4px;
+}
+.HomeView__supporterFeature {
+	padding: 0 36px;
+}
+.HomeView__featureIcon {
+	height: 50px;
+	width: 50px;
+	margin: 0 24px;
 	background-repeat: no-repeat;
-	background-size: contain;
+	background-position: center center;
+}
+.HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon {
+	background-image: buildIconWand(#4a4a4a);
+}
+.HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconWandCheck(#4a4a4a);
+}
+.HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
+	background-image: buildIconClipboard(#4a4a4a);
+}
+.HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
+	width: 100px;
+	margin: 0 0 0 50px;
+	background-image: buildIconClipboardCheck(#4a4a4a);
+}
+.HomeView__featureIcon.feature-supporter {
+	background-image: buildIconFlag(#4a4a4a);
+}
+.HomeView__featureTitle {
+	text-align: center;
+	font-size: 18px;
+	padding: 22px 0 10px;
+}
+.HomeView__featureText {
+	text-align: center;
+	font-size: 14px;
+	line-height: 27px;
+}
+.HomeView__featureButton {
+	margin: 0;
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1.3;
+	text-transform: uppercase;
+	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
+}
+.HomeView__onboarding .HomeView__featureButton {
+	margin-top: 26px;
+	min-width: 130px;
 }