diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 72389fdc4..2550c9b3e 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -1599,6 +1599,63 @@
"setup_upgrade_button_go": {
"message": "Set Me Up"
},
+ "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 additional anonymous analytics data to improve Ghostery’s performance."
+ },
+ "hub_home_header_info": {
+ "message": "New users are opted in to participating in Human Web and Ghostery Rewards. You may change these settings in custom setup or in the extension. "
+ },
+ "hub_home_header_info_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"
},
@@ -1710,7 +1767,7 @@
"message": "We use anonymous Human Web data to improve Ghostery’s performance. No personal data is ever collected. $LINK_LM_START$Learn More$LINK_LM_END$",
"placeholders": {
"link_lm_start": {
- "content": ""
+ "content": " "
},
"link_lm_end": {
"content": " "
diff --git a/app/hub/App.jsx b/app/hub/App.jsx
new file mode 100644
index 000000000..0487714cd
--- /dev/null
+++ b/app/hub/App.jsx
@@ -0,0 +1,33 @@
+/**
+ * App Component
+ *
+ * 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
+ *
+ * ToDo: Update this file.
+ */
+
+import React from 'react';
+import SideNavigation from './Views/SideNavigationView';
+
+/**
+ * A Functional React Component for rendering the Ghostery Hub App
+ * @return {JSX} JSX for rendering the Ghostery Hub App
+ * @memberof HubComponents
+ */
+const App = props => (
+
+
+
+ {props.children}
+
+
+);
+
+export default App;
diff --git a/app/hub/Views/HomeView/HomeView.jsx b/app/hub/Views/HomeView/HomeView.jsx
index 1dc179ba9..2178ba813 100644
--- a/app/hub/Views/HomeView/HomeView.jsx
+++ b/app/hub/Views/HomeView/HomeView.jsx
@@ -9,42 +9,142 @@
* 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, { Component } from 'react';
+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
- * @extends Component
+ * A Functional React component for rendering the Home View
+ * @return {JSX} JSX for rendering the Home View of the Hub app
* @memberof HubComponents
*/
-class HomeView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
+const HomeView = (props) => {
+ const {
+ justInstalled,
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ changeMetrics,
+ 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,
+ });
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
+ return (
+
+
+
+
+
+
+ {t('hub_home_header_text')}
+
+ {justInstalled && (
+
+ {t('hub_home_header_tagline')}
+
+ )}
+
+ {t('hub_home_header_tagline_2')}
+
+
+
+
+
+ {t('hub_home_header_checkbox_label')}
+
+
+
+
+
+
+ {t('hub_home_subheader_optimize')}
+
+
+ {account_text}
+
+
+
+
+
+
+ {t('hub_home_feature_tutorial_title')}
+
+
+ {t('hub_home_feature_tutorial_text')}
+
+
+ {tutorial_complete ? t('hub_home_feature_tutorial_button_alt') : t('hub_home_feature_tutorial_button')}
+
+
+
+
+
+
+ {t('hub_home_feature_setup_title')}
+
+
+ {t('hub_home_feature_setup_text')}
+
+
+ {setup_complete ? t('hub_home_feature_setup_button_alt') : t('hub_home_feature_setup_button')}
+
+
+
+
+
+
+ {t('hub_home_feature_supporter_text')}
+
+
+
+
+ {t('hub_home_feature_supporter_button')}
+
+
+
+
+
+
+ );
+};
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Home View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
+// PropTypes ensure we pass required props of the correct type
+HomeView.propTypes = {
+ justInstalled: PropTypes.bool.isRequired,
+ setup_complete: PropTypes.bool.isRequired,
+ tutorial_complete: PropTypes.bool.isRequired,
+ enable_metrics: PropTypes.bool.isRequired,
+ changeMetrics: PropTypes.func.isRequired,
+ account_text: PropTypes.string.isRequired,
+ account_link: PropTypes.string.isRequired,
+};
export default HomeView;
diff --git a/app/hub/Views/HomeView/HomeView.scss b/app/hub/Views/HomeView/HomeView.scss
new file mode 100644
index 000000000..a5b4f8098
--- /dev/null
+++ b/app/hub/Views/HomeView/HomeView.scss
@@ -0,0 +1,119 @@
+/**
+ * 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--pad-left {
+ padding-left: 12px;
+}
+.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-position: center center;
+}
+.HomeView__onboardingFeature.feature-tutorial .HomeView__featureIcon {
+ background-image: buildIconWand(#4a4a4a, #daf4ff);
+}
+.HomeView__onboardingFeature.feature-tutorial-complete .HomeView__featureIcon {
+ width: 100px;
+ margin: 0 0 0 50px;
+ background-image: buildIconWandCheck(#4a4a4a, #daf4ff, #1dafed);
+}
+.HomeView__onboardingFeature.feature-setup .HomeView__featureIcon {
+ background-image: buildIconClipboard(#4a4a4a, #daf4ff);
+}
+.HomeView__onboardingFeature.feature-setup-complete .HomeView__featureIcon {
+ width: 100px;
+ margin: 0 0 0 50px;
+ background-image: buildIconClipboardCheck(#4a4a4a, #daf4ff, #1dafed);
+}
+.HomeView__featureIcon.feature-supporter {
+ background-image: buildIconFlag(#4a4a4a, #daf4ff);
+}
+.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;
+}
+.HomeView__onboarding .HomeView__featureButton {
+ margin-top: 26px;
+ min-width: 130px;
+}
diff --git a/app/hub/Views/HomeView/HomeViewActions.js b/app/hub/Views/HomeView/HomeViewActions.js
new file mode 100644
index 000000000..ab86a537b
--- /dev/null
+++ b/app/hub/Views/HomeView/HomeViewActions.js
@@ -0,0 +1,41 @@
+/**
+ * Home View Action creators
+ *
+ * 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
+ */
+
+import { log, sendMessageInPromise } from '../../utils';
+import { GET_HOME_PROPS, SET_METRICS } from './HomeViewConstants';
+
+export function getHomeProps() {
+ return function (dispatch) {
+ return sendMessageInPromise(GET_HOME_PROPS).then((data) => {
+ dispatch({
+ type: GET_HOME_PROPS,
+ data,
+ });
+ }).catch((err) => {
+ log('homeView Action getHomeProps Error', err);
+ });
+ };
+}
+
+export function setMetrics(actionData) {
+ return function (dispatch) {
+ return sendMessageInPromise(SET_METRICS, actionData).then((data) => {
+ dispatch({
+ type: SET_METRICS,
+ data,
+ });
+ }).catch((err) => {
+ log('homeView Action setMetrics Error', err);
+ });
+ };
+}
diff --git a/app/hub/Views/TutorialViews/TutorialSimpleDetailedView/index.js b/app/hub/Views/HomeView/HomeViewConstants.js
similarity index 64%
rename from app/hub/Views/TutorialViews/TutorialSimpleDetailedView/index.js
rename to app/hub/Views/HomeView/HomeViewConstants.js
index 41d76d8af..0d32fd3b6 100644
--- a/app/hub/Views/TutorialViews/TutorialSimpleDetailedView/index.js
+++ b/app/hub/Views/HomeView/HomeViewConstants.js
@@ -1,5 +1,5 @@
/**
- * Point of entry index.js file for Tutorial Simple or Detailed View
+ * Custom Home Constants
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -11,6 +11,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialSimpleDetailedView from './TutorialSimpleDetailedView';
-
-export default TutorialSimpleDetailedView;
+// Home View
+export const GET_HOME_PROPS = 'GET_HOME_PROPS';
+export const SET_METRICS = 'SET_METRICS';
diff --git a/app/hub/Views/HomeView/HomeViewContainer.jsx b/app/hub/Views/HomeView/HomeViewContainer.jsx
new file mode 100644
index 000000000..86cdcade5
--- /dev/null
+++ b/app/hub/Views/HomeView/HomeViewContainer.jsx
@@ -0,0 +1,100 @@
+/**
+ * Tutorial View Container
+ *
+ * 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
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import QueryString from 'query-string';
+import HomeView from './HomeView';
+
+/**
+ * @class Implement the Home View Container for the Ghostery Hub
+ * @extends Component
+ * @memberof HubContainers
+ */
+class HomeViewContainer extends React.Component {
+ constructor(props) {
+ super(props);
+
+ const { justInstalled } = QueryString.parse(window.location.search);
+ this.state = {
+ justInstalled: justInstalled === 'true',
+ };
+
+ const title = t('hub_home_page_title');
+ window.document.title = title;
+
+ this.props.actions.getHomeProps();
+ }
+
+ /**
+ * Function to handle toggling Metrics Opt-In
+ */
+ _handleToggleMetrics = () => {
+ const enable_metrics = !this.props.home.enable_metrics;
+ this.props.actions.setMetrics({ enable_metrics });
+ }
+
+ /**
+ * React's required render function. Returns JSX
+ * @return {JSX} JSX for rendering the Home View of the Hub app
+ */
+ render() {
+ // ToDo: Get these from action, reducer and props. Will be on this.props.home
+ // These are passed as props so we can the user's email and link to their account when they are signed in
+ const account_text = t('hub_home_subheader_create_account');
+ const account_link = '/create-account';
+
+ const { justInstalled } = this.state;
+ const {
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ } = this.props.home;
+ const childProps = {
+ justInstalled,
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ changeMetrics: this._handleToggleMetrics,
+ account_text,
+ account_link,
+ };
+
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+// Note: isRequired is not needed when a prop has a default value
+HomeViewContainer.propTypes = {
+ home: PropTypes.shape({
+ setup_complete: PropTypes.bool,
+ tutorial_complete: PropTypes.bool,
+ enable_metrics: PropTypes.bool,
+ account_text: PropTypes.string,
+ account_link: PropTypes.string,
+ }),
+};
+
+// Default props used throughout the Setup flow
+HomeViewContainer.defaultProps = {
+ home: {
+ setup_complete: false,
+ tutorial_complete: false,
+ enable_metrics: false,
+ account_text: '',
+ account_link: '',
+ },
+};
+
+export default HomeViewContainer;
diff --git a/app/hub/Views/HomeView/HomeViewReducer.js b/app/hub/Views/HomeView/HomeViewReducer.js
new file mode 100644
index 000000000..8cd78221e
--- /dev/null
+++ b/app/hub/Views/HomeView/HomeViewReducer.js
@@ -0,0 +1,49 @@
+/**
+ * Reducer used in the Home View
+ *
+ * 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
+ */
+
+import { GET_HOME_PROPS, SET_METRICS } from './HomeViewConstants';
+
+const initialState = {};
+
+function HomeViewReducer(state = initialState, action) {
+ switch (action.type) {
+ case GET_HOME_PROPS: {
+ const {
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ account_text,
+ account_link,
+ } = action.data;
+ return Object.assign({}, state, {
+ home: Object.assign({}, state.home, {
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ account_text,
+ account_link,
+ }),
+ });
+ }
+ case SET_METRICS: {
+ const { enable_metrics } = action.data;
+ return Object.assign({}, state, {
+ home: Object.assign({}, state.home, { enable_metrics }),
+ });
+ }
+
+ default: return state;
+ }
+}
+
+export default HomeViewReducer;
diff --git a/app/hub/Views/HomeView/__tests__/HomeView.test.jsx b/app/hub/Views/HomeView/__tests__/HomeView.test.jsx
new file mode 100644
index 000000000..ef0c26171
--- /dev/null
+++ b/app/hub/Views/HomeView/__tests__/HomeView.test.jsx
@@ -0,0 +1,95 @@
+/**
+ * Home View Test Component
+ *
+ * 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
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+import HomeView from '../HomeView';
+
+describe('app/hub/Views/HomeView component', () => {
+ describe('Snapshot tests with react-test-renderer', () => {
+ test('home view is rendered correctly: all true', () => {
+ const initialState = {
+ justInstalled: true,
+ setup_complete: true,
+ tutorial_complete: true,
+ enable_metrics: true,
+ changeMetrics: () => {},
+ account_text: 'test create account',
+ account_link: '/test/create-account',
+ };
+
+ const component = renderer.create(
+
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+
+ test('home view is rendered correctly: all false', () => {
+ const initialState = {
+ justInstalled: false,
+ setup_complete: false,
+ tutorial_complete: false,
+ enable_metrics: false,
+ changeMetrics: () => {},
+ account_text: 'test@example.com',
+ account_link: '/test/user-profile',
+ };
+
+ const component = renderer.create(
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe('Shallow snapshot tests rendered with Enzyme', () => {
+ test('the happy path of the component', () => {
+ const initialState = {
+ justInstalled: true,
+ setup_complete: false,
+ tutorial_complete: false,
+ enable_metrics: false,
+ changeMetrics: jest.fn(),
+ account_text: 'test username',
+ account_link: '/test/url',
+ };
+
+ const component = shallow( );
+ expect(component.find('.HomeView').length).toBe(1);
+ expect(component.find('.button').length).toBe(3);
+ expect(component.find('.HomeView__header').length).toBe(1);
+ expect(component.find('.HomeView__subHeader').length).toBe(1);
+ expect(component.find('.HomeView__supportContainer .clickable').length).toBe(1);
+
+ expect(initialState.changeMetrics.mock.calls.length).toBe(0);
+ component.find('.HomeView__supportContainer .clickable').simulate('click');
+ expect(initialState.changeMetrics.mock.calls.length).toBe(1);
+
+ expect(component.find('.HomeView__headerTagline').length).toBe(2);
+ component.setProps({ justInstalled: false });
+ expect(component.find('.HomeView__headerTagline').length).toBe(1);
+
+ expect(component.find('.HomeView__featureButton.hollow').length).toBe(0);
+ component.setProps({ tutorial_complete: true });
+ expect(component.find('.HomeView__featureButton.hollow').length).toBe(1);
+
+ component.setProps({ setup_complete: true });
+ expect(component.find('.HomeView__featureButton.hollow').length).toBe(2);
+ });
+ });
+});
diff --git a/app/hub/Views/HomeView/__tests__/HomeViewActions.test.js b/app/hub/Views/HomeView/__tests__/HomeViewActions.test.js
new file mode 100644
index 000000000..4a1f72547
--- /dev/null
+++ b/app/hub/Views/HomeView/__tests__/HomeViewActions.test.js
@@ -0,0 +1,64 @@
+/**
+ * Test file for Home View Action creators
+ *
+ * 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
+ */
+
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import * as utils from '../../../utils';
+import * as HomeViewActions from '../HomeViewActions';
+import { GET_HOME_PROPS, SET_METRICS } from '../HomeViewConstants';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const testData = { test: true };
+utils.sendMessageInPromise = jest.fn((name, message) => new Promise((resolve, reject) => {
+ switch (name) {
+ case GET_HOME_PROPS: {
+ resolve(testData);
+ break;
+ }
+ case SET_METRICS: {
+ resolve(message);
+ break;
+ }
+ default: resolve(message);
+ }
+}));
+
+describe('app/hub/Views/SetupView/ actions', () => {
+ test('getHomeProps action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const data = testData;
+ const expectedPayload = { data, type: GET_HOME_PROPS };
+
+ return store.dispatch(HomeViewActions.getHomeProps()).then(() => {
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+ });
+
+ test('setMetrics action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const data = testData;
+ const expectedPayload = { data, type: SET_METRICS };
+
+ return store.dispatch(HomeViewActions.setMetrics(data)).then(() => {
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+ });
+});
diff --git a/app/hub/Views/HomeView/__tests__/HomeViewReducer.test.js b/app/hub/Views/HomeView/__tests__/HomeViewReducer.test.js
new file mode 100644
index 000000000..da7cd2a13
--- /dev/null
+++ b/app/hub/Views/HomeView/__tests__/HomeViewReducer.test.js
@@ -0,0 +1,68 @@
+/**
+ * Home View Test Reducer
+ *
+ * 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
+ */
+
+import Immutable from 'seamless-immutable';
+import HomeViewReducer from '../HomeViewReducer';
+import { GET_HOME_PROPS, SET_METRICS } from '../HomeViewConstants';
+
+// Copied from Home View Container Default Props
+const initialState = Immutable({
+ home: {
+ setup_complete: false,
+ tutorial_complete: false,
+ enable_metrics: false,
+ account_text: '',
+ account_link: '',
+ },
+});
+
+describe('app/hub/Views/HomeView reducer', () => {
+ test('initial state is correct', () => {
+ expect(HomeViewReducer(undefined, {})).toEqual({});
+ });
+
+ test('reducer correctly handles GET_HOME_PROPS', () => {
+ const data = {
+ setup_complete: true,
+ tutorial_complete: true,
+ enable_metrics: true,
+ account_text: 'test@example.com',
+ account_link: '/users/test',
+ };
+ const action = { data, type: GET_HOME_PROPS };
+
+ const updatedHomeState = Immutable.merge(initialState.home, data);
+
+ expect(HomeViewReducer(initialState, action)).toEqual({
+ home: updatedHomeState
+ });
+ });
+
+ test('reducer correctly handles SET_METRICS', () => {
+ const data = {
+ enable_metrics: true,
+ };
+ const action = { data, type: SET_METRICS };
+ const initHomeState = Immutable.merge(initialState.home, {
+ enable_metrics: true,
+ });
+
+ const updatedHomeState = Immutable.merge(initHomeState, {
+ enable_ghostery_rewards: data.enable_ghostery_rewards
+ });
+
+ expect(HomeViewReducer({ home: initHomeState }, action)).toEqual({
+ home: updatedHomeState
+ });
+ });
+});
diff --git a/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap
new file mode 100644
index 000000000..4deb217c7
--- /dev/null
+++ b/app/hub/Views/HomeView/__tests__/__snapshots__/HomeView.test.jsx.snap
@@ -0,0 +1,350 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/hub/Views/HomeView component Snapshot tests with react-test-renderer home view is rendered correctly: all false 1`] = `
+
+
+
+
+
+
+ hub_home_header_text
+
+
+ hub_home_header_tagline_2
+
+
+
+
+
+ hub_home_header_checkbox_label
+
+
+
+
+
+
+
+
+
+ hub_home_feature_supporter_text
+
+
+
+
+
+
+
+`;
+
+exports[`app/hub/Views/HomeView component Snapshot tests with react-test-renderer home view is rendered correctly: all true 1`] = `
+
+
+
+
+
+
+ hub_home_header_text
+
+
+ hub_home_header_tagline
+
+
+ hub_home_header_tagline_2
+
+
+
+
+
+ hub_home_header_checkbox_label
+
+
+
+
+
+
+
+
+
+ hub_home_feature_supporter_text
+
+
+
+
+
+
+
+`;
diff --git a/app/hub/Views/HomeView/index.js b/app/hub/Views/HomeView/index.js
index 57c9415fc..3997c15b2 100644
--- a/app/hub/Views/HomeView/index.js
+++ b/app/hub/Views/HomeView/index.js
@@ -11,6 +11,31 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import HomeView from './HomeView';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export default HomeView;
+import HomeViewContainer from './HomeViewContainer';
+import HomeViewReducer from './HomeViewReducer';
+import * as HomeViewActions from './HomeViewActions';
+
+/**
+ * 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 => Object.assign({}, state.home);
+
+/**
+ * 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 => ({
+ actions: bindActionCreators(Object.assign(HomeViewActions), dispatch),
+});
+
+export const reducer = HomeViewReducer;
+
+export default connect(mapStateToProps, mapDispatchToProps)(HomeViewContainer);
diff --git a/app/hub/Views/RewardsView/RewardsView.jsx b/app/hub/Views/RewardsView/RewardsView.jsx
index 10aebf5c6..c0f3e396e 100644
--- a/app/hub/Views/RewardsView/RewardsView.jsx
+++ b/app/hub/Views/RewardsView/RewardsView.jsx
@@ -46,7 +46,7 @@ class RewardsView extends Component {
{t('hub_rewards_header_description')}
diff --git a/app/hub/Views/RewardsView/RewardsView.scss b/app/hub/Views/RewardsView/RewardsView.scss
index 6dcf99961..6891b74dc 100644
--- a/app/hub/Views/RewardsView/RewardsView.scss
+++ b/app/hub/Views/RewardsView/RewardsView.scss
@@ -1,7 +1,7 @@
.RewardsView {
background:
- buildBackgroundLeft(#ffffff) no-repeat left -170px bottom,
- buildBackgroundRight(#ffffff) no-repeat right bottom,
+ buildBackgroundLeft(#d4af37) no-repeat left -170px bottom,
+ buildBackgroundRight(#d4af37) no-repeat right bottom,
linear-gradient(#daf4ff, #ffffff 30%) no-repeat;
}
.RewardsView--paddingTop {
@@ -51,13 +51,13 @@
background-position: center center;
}
.RewardsView__lightBulbIcon {
- background-image: buildIconLightBulb(#4a4a4a);
+ background-image: buildIconLightBulb(#4a4a4a, #daf4ff);
}
.RewardsView__eyeIcon {
- background-image: buildIconEye(#4a4a4a);
+ background-image: buildIconEye(#4a4a4a, #daf4ff);
}
.RewardsView__starIcon {
- background-image: buildIconStar(#4a4a4a);
+ background-image: buildIconStar(#4a4a4a, #daf4ff);
}
.RewardsView__closerText {
font-size: 14px;
diff --git a/app/hub/Views/RewardsView/__tests__/__snapshots__/RewardsView.test.jsx.snap b/app/hub/Views/RewardsView/__tests__/__snapshots__/RewardsView.test.jsx.snap
index ae09bbbc4..583046dd6 100644
--- a/app/hub/Views/RewardsView/__tests__/__snapshots__/RewardsView.test.jsx.snap
+++ b/app/hub/Views/RewardsView/__tests__/__snapshots__/RewardsView.test.jsx.snap
@@ -34,6 +34,8 @@ exports[`app/hub/Views/RewardsView component Snapshot tests with react-test-rend
hub_rewards_header_learn_more
diff --git a/app/hub/Views/SetupView/SetupView.scss b/app/hub/Views/SetupView/SetupView.scss
index 3d8fd8af2..723077f03 100644
--- a/app/hub/Views/SetupView/SetupView.scss
+++ b/app/hub/Views/SetupView/SetupView.scss
@@ -46,8 +46,8 @@
}
.SetupModal__image {
height: 64px;
- width: 58px;
- background-size: 64px 58px;
+ width: 64px;
+ background-size: 64px 64px;
background-image: url('/app/images/hub/setup/ghosty-icon.svg');
background-position: center center;
background-repeat: no-repeat;
diff --git a/app/hub/Views/SetupView/SetupViewConstants.js b/app/hub/Views/SetupView/SetupViewConstants.js
index 5450571f2..feb22ab8e 100644
--- a/app/hub/Views/SetupView/SetupViewConstants.js
+++ b/app/hub/Views/SetupView/SetupViewConstants.js
@@ -32,3 +32,6 @@ export const SET_GHOSTERY_REWARDS = 'SET_GHOSTERY_REWARDS';
// Setup Human Web
export const SET_HUMAN_WEB = 'SET_HUMAN_WEB';
+
+// Setup Done
+export const SET_SETUP_COMPLETE = 'SET_SETUP_COMPLETE';
diff --git a/app/hub/Views/SetupView/SetupViewContainer.jsx b/app/hub/Views/SetupView/SetupViewContainer.jsx
index 2a5a4fbb5..ff272dabc 100644
--- a/app/hub/Views/SetupView/SetupViewContainer.jsx
+++ b/app/hub/Views/SetupView/SetupViewContainer.jsx
@@ -12,7 +12,7 @@
*/
import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, withRouter } from 'react-router-dom';
import QueryString from 'query-string';
import PropTypes from 'prop-types';
import SetupView from './SetupView';
@@ -27,7 +27,7 @@ import SetupHumanWebView from '../SetupViews/SetupHumanWebView';
import SetupDoneView from '../SetupViews/SetupDoneView';
/**
- * @class Implement the Setup Container View for the Ghostery Hub
+ * @class Implement the Setup View for the Ghostery Hub
* @extends Component
* @memberof HubContainers
*/
@@ -38,21 +38,14 @@ class SetupViewContainer extends React.Component {
sendMountActions: false,
showModal: false,
};
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const title = t('hub_setup_page_title');
- window.document.title = title;
-
- // The user can not enter the Custom Setup Workflow from /setup/1/custom
- if (/setup\/1\/custom/gi.test(this.props.location.pathname)) {
+ if (!props.preventRedirect) {
this.props.history.push('/setup/1');
}
+ const title = t('hub_setup_page_title');
+ window.document.title = title;
+
this.props.actions.initSetupProps(this.props.setup);
this.props.actions.getSetupShowWarningOverride().then((data) => {
const { setup_show_warning_override } = data;
@@ -208,6 +201,7 @@ class SetupViewContainer extends React.Component {
// PropTypes ensure we pass required props of the correct type
// Note: isRequired is not needed when a prop has a default value
SetupViewContainer.propTypes = {
+ preventRedirect: PropTypes.bool,
setup: PropTypes.shape({
navigation: PropTypes.shape({
activeIndex: PropTypes.number,
@@ -255,11 +249,13 @@ SetupViewContainer.propTypes = {
setSmartBlocking: PropTypes.func.isRequired,
setGhosteryRewards: PropTypes.func.isRequired,
setHumanWeb: PropTypes.func.isRequired,
+ setSetupComplete: PropTypes.func.isRequired,
}).isRequired,
};
// Default props used throughout the Setup flow
SetupViewContainer.defaultProps = {
+ preventRedirect: false,
setup: {
navigation: {
activeIndex: 0,
@@ -280,4 +276,4 @@ SetupViewContainer.defaultProps = {
},
};
-export default SetupViewContainer;
+export default withRouter(SetupViewContainer);
diff --git a/app/hub/Views/SetupView/__tests__/SetupViewContainer.test.jsx b/app/hub/Views/SetupView/__tests__/SetupViewContainer.test.jsx
index 563030b70..654b72278 100644
--- a/app/hub/Views/SetupView/__tests__/SetupViewContainer.test.jsx
+++ b/app/hub/Views/SetupView/__tests__/SetupViewContainer.test.jsx
@@ -46,18 +46,16 @@ const actions = {
setSmartBlocking: () => {},
setGhosteryRewards: () => {},
setHumanWeb: () => {},
+ setSetupComplete: () => {},
};
describe('app/hub/Views/SetupView container', () => {
describe('Snapshot tests with react-test-renderer', () => {
test('setup view container is rendered correctly on the Blocking step', () => {
- const paths = ['/setup/1', '/setup/2', '/setup/3', '/setup/4'];
- const location = {
- pathname: '/setup/1',
- };
+ const paths = ['/setup/1', '/setup/1/custom', '/setup/2', '/setup/3', '/setup/4'];
const component = renderer.create(
-
+
).toJSON();
expect(component).toMatchSnapshot();
@@ -65,52 +63,39 @@ describe('app/hub/Views/SetupView container', () => {
test('setup view container is rendered correctly on the Custom Blocking step', () => {
const paths = ['/setup/1', '/setup/1/custom', '/setup/2', '/setup/3', '/setup/4'];
- const location = {
- pathname: '/setup/1/custom',
- };
- const history = [];
const component = renderer.create(
-
+
).toJSON();
expect(component).toMatchSnapshot();
});
test('setup view container is rendered correctly on the Anti-Suite step', () => {
- const paths = ['/setup/1', '/setup/2', '/setup/3', '/setup/4'];
- const location = {
- pathname: '/setup/2',
- };
+ const paths = ['/setup/1', '/setup/1/custom', '/setup/2', '/setup/3', '/setup/4'];
const component = renderer.create(
-
-
+
+
).toJSON();
expect(component).toMatchSnapshot();
});
test('setup view container is rendered correctly on the Human Web step', () => {
- const paths = ['/setup/1', '/setup/2', '/setup/3', '/setup/4'];
- const location = {
- pathname: '/setup/3',
- };
+ const paths = ['/setup/1', '/setup/1/custom', '/setup/2', '/setup/3', '/setup/4'];
const component = renderer.create(
-
-
+
+
).toJSON();
expect(component).toMatchSnapshot();
});
test('setup view container is rendered correctly on the Done step', () => {
- const paths = ['/setup/1', '/setup/2', '/setup/3', '/setup/4'];
- const location = {
- pathname: '/setup/4',
- };
+ const paths = ['/setup/1', '/setup/1/custom', '/setup/2', '/setup/3', '/setup/4'];
const component = renderer.create(
-
-
+
+
).toJSON();
expect(component).toMatchSnapshot();
diff --git a/app/hub/Views/SetupView/index.js b/app/hub/Views/SetupView/index.js
index 824fa285d..fd6beeaf8 100644
--- a/app/hub/Views/SetupView/index.js
+++ b/app/hub/Views/SetupView/index.js
@@ -25,6 +25,7 @@ import {
setGhosteryRewards
} from '../SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewActions';
import { setHumanWeb } from '../SetupViews/SetupHumanWebView/SetupHumanWebViewActions';
+import { setSetupComplete } from '../SetupViews/SetupDoneView/SetupDoneViewActions';
/**
* Map redux store state properties to the component's own properties.
@@ -48,6 +49,7 @@ const mapDispatchToProps = dispatch => ({
setSmartBlocking,
setGhosteryRewards,
setHumanWeb,
+ setSetupComplete,
}), dispatch),
});
diff --git a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewActions.js b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewActions.js
new file mode 100644
index 000000000..4d7383305
--- /dev/null
+++ b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewActions.js
@@ -0,0 +1,28 @@
+/**
+ * Setup Done View Action creators
+ *
+ * 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
+ */
+
+import { log, sendMessageInPromise } from '../../../utils';
+import { SET_SETUP_COMPLETE } from '../../SetupView/SetupViewConstants';
+
+export function setSetupComplete() {
+ return function (dispatch) {
+ return sendMessageInPromise(SET_SETUP_COMPLETE).then((data) => {
+ dispatch({
+ type: SET_SETUP_COMPLETE,
+ data,
+ });
+ }).catch((err) => {
+ log('setupDone Action setSetupComplete Error', err);
+ });
+ };
+}
diff --git a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewContainer.jsx b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewContainer.jsx
index b1f1779a6..8abe362bb 100644
--- a/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewContainer.jsx
+++ b/app/hub/Views/SetupViews/SetupDoneView/SetupDoneViewContainer.jsx
@@ -28,7 +28,7 @@ class SetupDoneViewContainer extends Component {
const title = t('hub_setup_page_title_done');
window.document.title = title;
- const { index } = this.props;
+ const { index, sendMountActions } = this.props;
this.props.actions.setSetupNavigation({
activeIndex: index,
hrefPrev: `/setup/${index - 1}`,
@@ -38,6 +38,10 @@ class SetupDoneViewContainer extends Component {
textNext: t('hub_setup_nav_done'),
textDone: false,
});
+
+ if (sendMountActions) {
+ this.props.actions.setSetupComplete();
+ }
}
/**
diff --git a/app/hub/Views/SetupViews/SetupDoneView/__tests__/SetupDoneViewActions.test.js b/app/hub/Views/SetupViews/SetupDoneView/__tests__/SetupDoneViewActions.test.js
new file mode 100644
index 000000000..aec94ca5c
--- /dev/null
+++ b/app/hub/Views/SetupViews/SetupDoneView/__tests__/SetupDoneViewActions.test.js
@@ -0,0 +1,47 @@
+/**
+ * Test file for Setup Done View Action creators
+ *
+ * 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
+ */
+
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import * as utils from '../../../../utils';
+import * as SetupDoneViewActions from '../SetupDoneViewActions';
+import { SET_SETUP_COMPLETE } from '../../../SetupView/SetupViewConstants';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+const testData = { test: true };
+utils.sendMessageInPromise = jest.fn((name) => new Promise((resolve, reject) => {
+ switch (name) {
+ case SET_SETUP_COMPLETE: {
+ resolve(testData);
+ break;
+ }
+ default: resolve(message);
+ }
+}));
+
+describe('app/hub/Views/SetupViews/SetupDoneView actions', () => {
+ test('setSetupComplete action should return correctly', () => {
+ const initialState = {};
+ const store = mockStore(initialState);
+
+ const data = testData;
+ const expectedPayload = { data, type: SET_SETUP_COMPLETE };
+
+ return store.dispatch(SetupDoneViewActions.setSetupComplete()).then(() => {
+ const actions = store.getActions();
+ expect(actions).toEqual([expectedPayload]);
+ });
+ });
+});
diff --git a/app/hub/Views/SetupViews/SetupDoneView/index.js b/app/hub/Views/SetupViews/SetupDoneView/index.js
index fa38134c1..70eab435b 100644
--- a/app/hub/Views/SetupViews/SetupDoneView/index.js
+++ b/app/hub/Views/SetupViews/SetupDoneView/index.js
@@ -15,6 +15,7 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import SetupDoneViewContainer from './SetupDoneViewContainer';
+import * as SetupDoneViewActions from './SetupDoneViewActions';
import { setSetupNavigation } from '../../SetupView/SetupViewActions';
/**
@@ -32,7 +33,9 @@ const mapStateToProps = state => Object.assign({}, state.setup);
* @memberof SetupContainers
*/
const mapDispatchToProps = dispatch => ({
- actions: bindActionCreators(Object.assign({}, { setSetupNavigation }), dispatch),
+ actions: bindActionCreators(Object.assign({}, SetupDoneViewActions, {
+ setSetupNavigation,
+ }), dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(SetupDoneViewContainer);
diff --git a/app/hub/Views/SideNavigationView/SideNavigationView.jsx b/app/hub/Views/SideNavigationView/SideNavigationView.jsx
new file mode 100644
index 000000000..354125497
--- /dev/null
+++ b/app/hub/Views/SideNavigationView/SideNavigationView.jsx
@@ -0,0 +1,60 @@
+/**
+ * Side Navigation Component
+ *
+ * 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
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+const SideNavigationView = (props) => {
+ const { menuItems, bottomItems } = props;
+
+ return (
+
+
+
+ {menuItems.map(item => (
+
+ ))}
+
+
+ {bottomItems.map(item => (
+
+
+ {item.text}
+
+
+ ))}
+
+
+ );
+};
+
+// PropTypes ensure we pass required props of the correct type
+SideNavigationView.propTypes = {
+ menuItems: PropTypes.arrayOf(PropTypes.shape({
+ href: PropTypes.string.isRequired,
+ icon: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired,
+ })).isRequired,
+ bottomItems: PropTypes.arrayOf(PropTypes.shape({
+ href: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired,
+ })).isRequired,
+};
+
+export default SideNavigationView;
diff --git a/app/hub/Views/SideNavigationView/SideNavigationView.scss b/app/hub/Views/SideNavigationView/SideNavigationView.scss
new file mode 100644
index 000000000..ecd0de4b6
--- /dev/null
+++ b/app/hub/Views/SideNavigationView/SideNavigationView.scss
@@ -0,0 +1,113 @@
+/**
+ * Ghostery Hub - Side Navigation 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
+ */
+
+// Side Navigation View
+.SideNavigation {
+ position: fixed;
+ height: 100%;
+ overflow-y: scroll;
+ min-width: 230px;
+ max-width: 230px;
+ background-color: #5d7d85;
+}
+.SideNavigation__top {
+ min-height: 80px;
+ background-image: url('/app/images/hub/side-navigation/ghostery-logo.svg');
+ background-color: #e7ecee;
+ background-size: 140px auto;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+.SideNavigation__menu {
+ padding-bottom: 48px;
+}
+.SideNavigation__bottom {
+ padding-bottom: 21px;
+}
+.SideNavigation__item {
+ position: relative;
+ min-height: 80px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 1.3;
+ letter-spacing: 0.5px;
+ color: #ffffff;
+ pointer-events: none;
+}
+.SideNavigation__item a {
+ color: #ffffff;
+ pointer-events: all;
+}
+.SideNavigation__item a:active,
+.SideNavigation__item a:visited,
+.SideNavigation__item a:hover {
+ color: #ffffff;
+}
+.SideNavigation__item a.active {
+ text-decoration: underline;
+ padding-right: 35px;
+}
+.SideNavigation__item a.active::before {
+ content: '';
+ position: absolute;
+ top:0;
+ right:0;
+ height: 0;
+ width: 0;
+ border-style: solid;
+ border-width: 0 0 40px 30px;
+ border-color: transparent transparent #ffffff transparent;
+}
+.SideNavigation__item a.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ height: 0;
+ width: 0;
+ border-style: solid;
+ border-width: 0 30px 40px 0;
+ border-color: transparent #ffffff transparent transparent;
+}
+.SideNavigation__menuIcon {
+ min-width: 55px;
+ height: 35px;
+ background-size: auto 28px;
+ background-repeat: no-repeat;
+ background-position: center center;
+}
+.SideNavigation__menuIcon.home {
+ background-image: buildIconHome(#ffffff);
+}
+.SideNavigation__menuIcon.setup {
+ background-image: buildIconSetup(#ffffff);
+}
+.SideNavigation__menuIcon.tutorial {
+ background-image: buildIconTutorial(#ffffff);
+}
+.SideNavigation__menuIcon.supporter {
+ background-image: buildIconSupporter(#ffffff);
+}
+.SideNavigation__menuIcon.rewards {
+ background-image: buildIconRewards(#ffffff);
+}
+.SideNavigation__menuIcon.products {
+ background-image: buildIconProducts(#ffffff);
+}
+.SideNavigation__menuText {
+ max-width: 145px;
+}
+.SideNavigation__bottomItem {
+ padding-left: 20px;
+ margin: -24px 0;
+}
diff --git a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx
new file mode 100644
index 000000000..0784cb2c5
--- /dev/null
+++ b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx
@@ -0,0 +1,47 @@
+/**
+ * Side Navigation View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import SideNavigationView from './SideNavigationView';
+
+/**
+ * @class Implement the Side Navigation View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class SideNavigationViewContainer extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ menuItems: [
+ { href: '/', icon: 'home', text: 'Home' },
+ { href: '/setup', icon: 'setup', text: 'Customize Setup' },
+ { href: '/tutorial', icon: 'tutorial', text: 'Take a Tutorial' },
+ { href: '/supporter', icon: 'supporter', text: 'Become a Supporter' },
+ { href: '/rewards', icon: 'rewards', text: 'Try Ghostery Rewards' },
+ { href: '/products', icon: 'products', text: 'See More Ghostery Products' },
+ ],
+ bottomItems: [
+ { href: '/create-account', text: 'Create Account' },
+ { href: '/log-in', text: 'Sign In' },
+ ],
+ };
+ }
+
+ render() {
+ const { menuItems, bottomItems } = this.state;
+ return ;
+ }
+}
+
+export default SideNavigationViewContainer;
diff --git a/app/hub/Views/SideNavigationView/__tests__/SideNavigationView.test.jsx b/app/hub/Views/SideNavigationView/__tests__/SideNavigationView.test.jsx
new file mode 100644
index 000000000..e0d1ce09f
--- /dev/null
+++ b/app/hub/Views/SideNavigationView/__tests__/SideNavigationView.test.jsx
@@ -0,0 +1,91 @@
+/**
+ * Side Navigation View Test Component
+ *
+ * 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
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+import SideNavigationView from '../SideNavigationView';
+
+describe('app/hub/Views/SideNavigationView component', () => {
+ describe('Snapshot tests with react-test-renderer', () => {
+ test('side navigation view is rendered correctly', () => {
+ const initialState = {
+ menuItems: [
+ { href: '/', icon: 'home', text: 'Home' },
+ { href: '/setup', icon: 'setup', text: 'Customize Setup' },
+ { href: '/tutorial', icon: 'tutorial', text: 'Take a Tutorial' },
+ { href: '/supporter', icon: 'supporter', text: 'Become a Supporter' },
+ { href: '/rewards', icon: 'rewards', text: 'Try Ghostery Rewards' },
+ { href: '/products', icon: 'products', text: 'See More Ghostery Products' },
+ ],
+ bottomItems: [
+ { href: '/create-account', text: 'Create Account' },
+ { href: '/log-in', text: 'Sign In' },
+ ],
+ };
+
+ const component = renderer.create(
+
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe('More Snapshot tests with react-test-renderer, but for edge cases', () => {
+ test('edge case where items are empty', () => {
+ const initialState = {
+ menuItems: [],
+ bottomItems: [],
+ };
+
+ const component = renderer.create(
+
+
+
+ ).toJSON();
+ expect(component).toMatchSnapshot();
+ });
+ });
+
+ describe('Shallow snapshot tests rendered with Enzyme', () => {
+ test('the happy path of the component', () => {
+ const initialState = {
+ menuItems: [
+ { href: '/', icon: 'home', text: 'Home' },
+ { href: '/setup', icon: 'setup', text: 'Customize Setup' },
+ { href: '/tutorial', icon: 'tutorial', text: 'Take a Tutorial' },
+ { href: '/supporter', icon: 'supporter', text: 'Become a Supporter' },
+ { href: '/rewards', icon: 'rewards', text: 'Try Ghostery Rewards' },
+ { href: '/products', icon: 'products', text: 'See More Ghostery Products' },
+ ],
+ bottomItems: [
+ { href: '/create-account', text: 'Create Account' },
+ { href: '/log-in', text: 'Sign In' },
+ ],
+ };
+
+ const component = shallow( );
+ expect(component.find('.SideNavigation').length).toBe(1);
+ expect(component.find('.SideNavigation__top').length).toBe(1);
+ expect(component.find('.SideNavigation__menu').length).toBe(1);
+ expect(component.find('.SideNavigation__bottom').length).toBe(1);
+ expect(component.find('.SideNavigation__item').length).toBe(initialState.menuItems.length + initialState.bottomItems.length);
+ expect(component.find('.SideNavigation__menuItem').length).toBe(initialState.menuItems.length);
+ expect(component.find('.SideNavigation__menuIcon').length).toBe(initialState.menuItems.length);
+ expect(component.find('.SideNavigation__bottomItem').length).toBe(initialState.bottomItems.length);
+ });
+ });
+});
diff --git a/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap b/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap
new file mode 100644
index 000000000..3b9d86dc8
--- /dev/null
+++ b/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap
@@ -0,0 +1,189 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/hub/Views/SideNavigationView component More Snapshot tests with react-test-renderer, but for edge cases edge case where items are empty 1`] = `
+
+`;
+
+exports[`app/hub/Views/SideNavigationView component Snapshot tests with react-test-renderer side navigation view is rendered correctly 1`] = `
+
+`;
diff --git a/app/hub/Views/TutorialViews/TutorialTrustRestrictView/index.js b/app/hub/Views/SideNavigationView/index.js
similarity index 65%
rename from app/hub/Views/TutorialViews/TutorialTrustRestrictView/index.js
rename to app/hub/Views/SideNavigationView/index.js
index d3cd1f6c2..ce220d202 100644
--- a/app/hub/Views/TutorialViews/TutorialTrustRestrictView/index.js
+++ b/app/hub/Views/SideNavigationView/index.js
@@ -1,5 +1,5 @@
/**
- * Point of entry index.js file for Tutorial Trust/Restrict View
+ * Point of entry index.js file for Side Navigation View
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -11,6 +11,6 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialTrustRestrictView from './TutorialTrustRestrictView';
+import SideNavigationViewContainer from './SideNavigationViewContainer';
-export default TutorialTrustRestrictView;
+export default SideNavigationViewContainer;
diff --git a/app/hub/Views/TutorialView/TutorialView.jsx b/app/hub/Views/TutorialView/TutorialView.jsx
index f322f247a..04b522ecd 100644
--- a/app/hub/Views/TutorialView/TutorialView.jsx
+++ b/app/hub/Views/TutorialView/TutorialView.jsx
@@ -23,25 +23,32 @@ import TutorialNavigation from '../TutorialViews/TutorialNavigation';
* @return {JSX} JSX for rendering the Setup View of the Hub app
* @memberof HubComponents
*/
-const TutorialView = props => (
-
-
- {props.steps.map(step => (
-
(
-
-
-
- )}
- />
- ))}
-
+const TutorialView = (props) => {
+ const {
+ steps,
+ sendMountActions,
+ } = props;
+
+ return (
+
+
+ {steps.map(step => (
+
(
+
+
+
+ )}
+ />
+ ))}
+
-
-
-);
+
+
+ );
+};
// PropTypes ensure we pass required props of the correct type
TutorialView.propTypes = {
@@ -50,6 +57,7 @@ TutorialView.propTypes = {
path: PropTypes.string.isRequired,
bodyComponent: PropTypes.func.isRequired,
})).isRequired,
+ sendMountActions: PropTypes.bool.isRequired,
};
export default TutorialView;
diff --git a/app/hub/Views/TutorialView/TutorialView.scss b/app/hub/Views/TutorialView/TutorialView.scss
new file mode 100644
index 000000000..496763ecf
--- /dev/null
+++ b/app/hub/Views/TutorialView/TutorialView.scss
@@ -0,0 +1,43 @@
+/**
+ * Tutorial 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
+ *
+ * ToDo: Update to BEM [Block Element Modifier](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
+ */
+
+// purple rectangle outline
+.rectangle-1 {
+ width: 120px;
+ height: 43px;
+ border-radius: 7.2px;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
+ border: solid 2.7px #930194;
+ transform: scale(0);
+ -webkit-animation: zoom .5s;
+ animation: zoom .5s;
+ -webkit-animation-fill-mode: forwards;
+ animation-fill-mode: forwards;
+ -webkit-animation-delay: 1s;
+ animation-delay: 1s;
+}
+
+
+@-webkit-keyframes zoom {
+ 100% {
+ -webkit-transform: scale(1,1);
+ }
+}
+
+@keyframes zoom {
+ 100% {
+ transform: scale(1,1);
+ }
+}
diff --git a/app/hub/Views/TutorialView/TutorialViewActions.js b/app/hub/Views/TutorialView/TutorialViewActions.js
index 5e16af138..e71ee27bc 100644
--- a/app/hub/Views/TutorialView/TutorialViewActions.js
+++ b/app/hub/Views/TutorialView/TutorialViewActions.js
@@ -11,11 +11,23 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import { INIT_TUTORIAL_PROPS } from './TutorialViewConstants';
+import { INIT_TUTORIAL_PROPS, SET_TUTORIAL_NAVIGATION } from './TutorialViewConstants';
export function initTutorialProps(data) {
+ return function (dispatch) {
+ return new Promise((resolve) => {
+ dispatch({
+ type: INIT_TUTORIAL_PROPS,
+ data,
+ });
+ resolve();
+ });
+ };
+}
+
+export function setTutorialNavigation(data) {
return {
- type: INIT_TUTORIAL_PROPS,
+ type: SET_TUTORIAL_NAVIGATION,
data,
};
}
diff --git a/app/hub/Views/TutorialView/TutorialViewConstants.js b/app/hub/Views/TutorialView/TutorialViewConstants.js
index 21aac1be4..5bfcc3799 100644
--- a/app/hub/Views/TutorialView/TutorialViewConstants.js
+++ b/app/hub/Views/TutorialView/TutorialViewConstants.js
@@ -13,3 +13,7 @@
// Tutorial View
export const INIT_TUTORIAL_PROPS = 'INIT_TUTORIAL_PROPS';
+export const SET_TUTORIAL_NAVIGATION = 'SET_TUTORIAL_NAVIGATION';
+
+// Tutorial Done
+export const SET_TUTORIAL_COMPLETE = 'SET_TUTORIAL_COMPLETE';
diff --git a/app/hub/Views/TutorialView/TutorialViewContainer.jsx b/app/hub/Views/TutorialView/TutorialViewContainer.jsx
index 2b0c2543c..c0d9d590d 100644
--- a/app/hub/Views/TutorialView/TutorialViewContainer.jsx
+++ b/app/hub/Views/TutorialView/TutorialViewContainer.jsx
@@ -9,35 +9,42 @@
* 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: Add Proptypes
*/
import React from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-
+import { withRouter } from 'react-router-dom';
import TutorialView from './TutorialView';
-import * as actions from './TutorialViewActions';
// Component Views
import TutorialVideoView from '../TutorialViews/TutorialVideoView';
import TutorialTrackerListView from '../TutorialViews/TutorialTrackerListView';
-import TutorialSimpleDetailedView from '../TutorialViews/TutorialSimpleDetailedView';
+import TutorialLayoutView from '../TutorialViews/TutorialLayoutView';
import TutorialBlockingView from '../TutorialViews/TutorialBlockingView';
-import TutorialTrustRestrictView from '../TutorialViews/TutorialTrustRestrictView';
+import TutorialTrustView from '../TutorialViews/TutorialTrustView';
import TutorialAntiSuiteView from '../TutorialViews/TutorialAntiSuiteView';
/**
- * @class Implement the Tutorial View Container for the Ghostery Hub
+ * @class Implement the Tutorial View for the Ghostery Hub
* @extends Component
* @memberof HubContainers
*/
class TutorialViewContainer extends React.Component {
- /**
- * Lifecycle Event
- */
- componentWillMount() {
+ constructor(props) {
+ super(props);
+ this.state = {
+ sendMountActions: false,
+ };
+
+ this.props.history.push('/tutorial/1');
+
const title = '';
window.document.title = title;
+
+ this.props.actions.initTutorialProps(this.props.tutorial).then(() => {
+ this.setState({ sendMountActions: true });
+ });
}
/**
@@ -45,7 +52,7 @@ class TutorialViewContainer extends React.Component {
* @return {JSX} JSX for rendering the Tutorial View of the Hub app
*/
render() {
- const activeIndex = +this.props.location.pathname.split('/').pop();
+ const { sendMountActions } = this.state;
const steps = [
{
index: 1,
@@ -60,7 +67,7 @@ class TutorialViewContainer extends React.Component {
{
index: 3,
path: '/tutorial/3',
- bodyComponent: TutorialSimpleDetailedView,
+ bodyComponent: TutorialLayoutView,
},
{
index: 4,
@@ -70,7 +77,7 @@ class TutorialViewContainer extends React.Component {
{
index: 5,
path: '/tutorial/5',
- bodyComponent: TutorialTrustRestrictView,
+ bodyComponent: TutorialTrustView,
},
{
index: 6,
@@ -79,29 +86,24 @@ class TutorialViewContainer extends React.Component {
},
];
- return ;
+ return ;
}
}
// Default props used throughout the Tutorial flow
-TutorialViewContainer.defaultProps = {};
+TutorialViewContainer.defaultProps = {
+ tutorial: {
+ navigation: {
+ activeIndex: 0,
+ hrefPrev: false,
+ hrefNext: false,
+ hrefDone: false,
+ textPrev: false,
+ textNext: false,
+ textDone: false,
+ },
+ },
+};
-/**
- * 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 = () => Object.assign({});
-
-/**
- * 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 => ({
- actions: bindActionCreators(Object.assign(actions), dispatch),
-});
-export default connect(mapStateToProps, mapDispatchToProps)(TutorialViewContainer);
+export default withRouter(TutorialViewContainer);
diff --git a/app/hub/Views/TutorialView/TutorialViewReducer.js b/app/hub/Views/TutorialView/TutorialViewReducer.js
new file mode 100644
index 000000000..6e8fb4d97
--- /dev/null
+++ b/app/hub/Views/TutorialView/TutorialViewReducer.js
@@ -0,0 +1,73 @@
+/**
+ * Reducer used throughout the Tutorial View's flow
+ *
+ * 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
+ */
+import { INIT_TUTORIAL_PROPS, SET_TUTORIAL_NAVIGATION } from './TutorialViewConstants';
+
+const initialState = {};
+
+function TutorialViewReducer(state = initialState, action) {
+ switch (action.type) {
+ // Tutorial View
+ case INIT_TUTORIAL_PROPS: {
+ const {
+ activeIndex,
+ hrefPrev,
+ hrefNext,
+ hrefDone,
+ textPrev,
+ textNext,
+ textDone,
+ } = action.data.navigation;
+ return Object.assign({}, state, {
+ tutorial: {
+ navigation: {
+ activeIndex,
+ hrefPrev,
+ hrefNext,
+ hrefDone,
+ textPrev,
+ textNext,
+ textDone,
+ }
+ },
+ });
+ }
+ case SET_TUTORIAL_NAVIGATION: {
+ const {
+ activeIndex,
+ hrefPrev,
+ hrefNext,
+ hrefDone,
+ textPrev,
+ textNext,
+ textDone,
+ } = action.data;
+ return Object.assign({}, state, {
+ tutorial: Object.assign({}, state.tutorial, {
+ navigation: {
+ activeIndex,
+ hrefPrev,
+ hrefNext,
+ hrefDone,
+ textPrev,
+ textNext,
+ textDone,
+ },
+ }),
+ });
+ }
+
+ default: return state;
+ }
+}
+
+export default TutorialViewReducer;
diff --git a/app/hub/Views/TutorialView/index.js b/app/hub/Views/TutorialView/index.js
index 9ac71d2ac..6707b4f08 100644
--- a/app/hub/Views/TutorialView/index.js
+++ b/app/hub/Views/TutorialView/index.js
@@ -11,6 +11,31 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
import TutorialViewContainer from './TutorialViewContainer';
+import TutorialViewReducer from './TutorialViewReducer';
+import * as TutorialViewActions from './TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 => ({
+ actions: bindActionCreators(Object.assign(TutorialViewActions), dispatch),
+});
+
+export const reducer = TutorialViewReducer;
-export default TutorialViewContainer;
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteView.jsx b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteView.jsx
index af62aae7d..55533308f 100644
--- a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteView.jsx
+++ b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteView.jsx
@@ -1,5 +1,5 @@
/**
- * Tutorial Anti-Suite View Component
+ * Tutorial Anti Suite View Component
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -13,38 +13,13 @@
* ToDo: Update this file.
*/
-import React, { Component } from 'react';
+import React from 'react';
/**
- * @class Implement the Tutorial Anti-Suite View for the Ghostery Hub
+ * @class Implement the Tutorial Anti Suite View for the Ghostery Hub
* @extends Component
* @memberof HubComponents
*/
-class TutorialAntiSuiteView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Anti-Suite View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
+const TutorialAntiSuiteView = () => Ghostery Hub - Tutorial Anti Suite View
;
export default TutorialAntiSuiteView;
diff --git a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewActions.js b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewActions.js
new file mode 100644
index 000000000..1b4ee12c3
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewActions.js
@@ -0,0 +1,28 @@
+/**
+ * Tutorial Done View Action creators
+ *
+ * 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
+ */
+
+import { log, sendMessageInPromise } from '../../../utils';
+import { SET_TUTORIAL_COMPLETE } from '../../TutorialView/TutorialViewConstants';
+
+export function setTutorialComplete() {
+ return function (dispatch) {
+ return sendMessageInPromise(SET_TUTORIAL_COMPLETE).then((data) => {
+ dispatch({
+ type: SET_TUTORIAL_COMPLETE,
+ data,
+ });
+ }).catch((err) => {
+ log('tutorialAntiSuite Action setTutorialComplete Error', err);
+ });
+ };
+}
diff --git a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx
new file mode 100644
index 000000000..7954899ee
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx
@@ -0,0 +1,58 @@
+/**
+ * Tutorial Anti Suite View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialAntiSuiteView from './TutorialAntiSuiteView';
+
+/**
+ * @class Implement the Tutorial Anti Suite View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialAntiSuiteViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index, sendMountActions } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: `/tutorial/${index - 1}`,
+ hrefNext: '/',
+ hrefDone: '/',
+ textPrev: t('hub_setup_nav_previous'),
+ textNext: t('hub_setup_nav_done'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+
+ if (sendMountActions) {
+ this.props.actions.setTutorialComplete();
+ }
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialAntiSuiteViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialAntiSuiteViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/index.js b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/index.js
index 4b7ea65d6..4570d30da 100644
--- a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/index.js
+++ b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/index.js
@@ -1,5 +1,5 @@
/**
- * Point of entry index.js file for Tutorial Anti-Suite View
+ * Point of entry index.js file for Tutorial Anti Suite View
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -11,6 +11,31 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialAntiSuiteView from './TutorialAntiSuiteView';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export default TutorialAntiSuiteView;
+import TutorialAntiSuiteViewContainer from './TutorialAntiSuiteViewContainer';
+import * as TutorialAntiSuiteViewActions from './TutorialAntiSuiteViewActions';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, TutorialAntiSuiteViewActions, {
+ setTutorialNavigation,
+ }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialAntiSuiteViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingView.jsx b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingView.jsx
index e6c623c3e..11e5c57f7 100644
--- a/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingView.jsx
+++ b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingView.jsx
@@ -13,38 +13,13 @@
* ToDo: Update this file.
*/
-import React, { Component } from 'react';
+import React from 'react';
/**
* @class Implement the Tutorial Blocking View for the Ghostery Hub
* @extends Component
* @memberof HubComponents
*/
-class TutorialBlockingView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Blocking View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
+const TutorialBlockingView = () => Ghostery Hub - Tutorial Blocking View
;
export default TutorialBlockingView;
diff --git a/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx
new file mode 100644
index 000000000..d05ae1fcf
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx
@@ -0,0 +1,54 @@
+/**
+ * Tutorial Blocking View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialBlockingView from './TutorialBlockingView';
+
+/**
+ * @class Implement the Tutorial Blocking View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialBlockingViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: `/tutorial/${index - 1}`,
+ hrefNext: `/tutorial/${index + 1}`,
+ hrefDone: '/',
+ textPrev: t('hub_setup_nav_previous'),
+ textNext: t('hub_setup_nav_next'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialBlockingViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialBlockingViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialBlockingView/index.js b/app/hub/Views/TutorialViews/TutorialBlockingView/index.js
index 22d97f1e0..0c58bef1f 100644
--- a/app/hub/Views/TutorialViews/TutorialBlockingView/index.js
+++ b/app/hub/Views/TutorialViews/TutorialBlockingView/index.js
@@ -11,6 +11,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialBlockingView from './TutorialBlockingView';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export default TutorialBlockingView;
+import TutorialBlockingViewContainer from './TutorialBlockingViewContainer';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, { setTutorialNavigation }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialBlockingViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutView.jsx b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutView.jsx
new file mode 100644
index 000000000..a34ddfb50
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutView.jsx
@@ -0,0 +1,25 @@
+/**
+ * Tutorial Layout View Component
+ *
+ * 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
+ *
+ * ToDo: Update this file.
+ */
+
+import React from 'react';
+
+/**
+ * @class Implement the Tutorial Layout View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+const TutorialLayoutView = () => Ghostery Hub - Tutorial Simple / Detailed Layout View
;
+
+export default TutorialLayoutView;
diff --git a/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx
new file mode 100644
index 000000000..3cdb56fba
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx
@@ -0,0 +1,54 @@
+/**
+ * Tutorial Layout View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialLayoutView from './TutorialLayoutView';
+
+/**
+ * @class Implement the Tutorial Layout View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialLayoutViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: `/tutorial/${index - 1}`,
+ hrefNext: `/tutorial/${index + 1}`,
+ hrefDone: '/',
+ textPrev: t('hub_setup_nav_previous'),
+ textNext: t('hub_setup_nav_next'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialLayoutViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialLayoutViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialLayoutView/index.js b/app/hub/Views/TutorialViews/TutorialLayoutView/index.js
new file mode 100644
index 000000000..2dc8e75f7
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialLayoutView/index.js
@@ -0,0 +1,38 @@
+/**
+ * Point of entry index.js file for Tutorial Layout View
+ *
+ * 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
+ */
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import TutorialLayoutViewContainer from './TutorialLayoutViewContainer';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, { setTutorialNavigation }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialLayoutViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialNavigation/TutorialNavigationContainer.jsx b/app/hub/Views/TutorialViews/TutorialNavigation/TutorialNavigationContainer.jsx
index 7daf171a6..5c18084de 100644
--- a/app/hub/Views/TutorialViews/TutorialNavigation/TutorialNavigationContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialNavigation/TutorialNavigationContainer.jsx
@@ -12,6 +12,7 @@
*/
import React from 'react';
+import PropTypes from 'prop-types';
import { SteppedNavigation } from '../../../../shared-components';
/**
@@ -19,19 +20,49 @@ import { SteppedNavigation } from '../../../../shared-components';
* @extends Component
* @memberof HubComponents
*/
-const TutorialNavigationContainer = () => {
- const childProps = {
- totalSteps: 6,
- activeIndex: 1,
- hrefPrev: false,
- hrefNext: '/tutorial/2',
- hrefDone: '/',
- textPrev: false,
- textNext: '',
- textDone: '',
+
+const TutorialNavigationContainer = (props) => {
+ const { totalSteps, tutorial } = props;
+ const { navigation } = tutorial;
+ const navigationProps = {
+ totalSteps,
+ ...navigation,
};
+ return ;
+};
- return ;
+// PropTypes ensure we pass required props of the correct type
+TutorialNavigationContainer.propTypes = {
+ totalSteps: PropTypes.number.isRequired,
+ tutorial: PropTypes.shape({
+ navigation: PropTypes.shape({
+ activeIndex: PropTypes.number.isRequired,
+ hrefPrev: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ hrefNext: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ hrefDone: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ textPrev: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ textNext: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ textDone: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.string,
+ ]).isRequired,
+ }).isRequired,
+ }).isRequired
};
export default TutorialNavigationContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialNavigation/index.js b/app/hub/Views/TutorialViews/TutorialNavigation/index.js
index 00610531a..71760758a 100644
--- a/app/hub/Views/TutorialViews/TutorialNavigation/index.js
+++ b/app/hub/Views/TutorialViews/TutorialNavigation/index.js
@@ -11,6 +11,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
import TutorialNavigationContainer from './TutorialNavigationContainer';
-export default TutorialNavigationContainer;
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 => ({
+ actions: bindActionCreators(Object.assign({}, {
+ }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialNavigationContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialSimpleDetailedView/TutorialSimpleDetailedView.jsx b/app/hub/Views/TutorialViews/TutorialSimpleDetailedView/TutorialSimpleDetailedView.jsx
deleted file mode 100644
index a5f530f15..000000000
--- a/app/hub/Views/TutorialViews/TutorialSimpleDetailedView/TutorialSimpleDetailedView.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Tutorial Simple and Detailed View Component
- *
- * 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
- *
- * ToDo: Update this file.
- */
-
-import React, { Component } from 'react';
-
-/**
- * @class Implement the Tutorial Simple and Detailed View for the Ghostery Hub
- * @extends Component
- * @memberof HubComponents
- */
-class TutorailSimpleDetailedView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Simple and Detailed View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
-
-export default TutorailSimpleDetailedView;
diff --git a/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListView.jsx b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListView.jsx
index d9eb392b6..95eb3fa89 100644
--- a/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListView.jsx
+++ b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListView.jsx
@@ -13,38 +13,13 @@
* ToDo: Update this file.
*/
-import React, { Component } from 'react';
+import React from 'react';
/**
* @class Implement the Tutorial Tracker List View for the Ghostery Hub
* @extends Component
* @memberof HubComponents
*/
-class TutorailTrackerListView extends Component {
- constructor(props) {
- super(props);
+const TutorialTrackerListView = () => Ghostery Hub - Tutorial Tracker List View
;
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Tracker List View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
-
-export default TutorailTrackerListView;
+export default TutorialTrackerListView;
diff --git a/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx
new file mode 100644
index 000000000..ee3aba16b
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx
@@ -0,0 +1,54 @@
+/**
+ * Tutorial Tracker List View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialTrackerListView from './TutorialTrackerListView';
+
+/**
+ * @class Implement the Tutorial Tracker List View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialTrackerListViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: `/tutorial/${index - 1}`,
+ hrefNext: `/tutorial/${index + 1}`,
+ hrefDone: '/',
+ textPrev: t('hub_setup_nav_previous'),
+ textNext: t('hub_setup_nav_next'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialTrackerListViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialTrackerListViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialTrackerListView/index.js b/app/hub/Views/TutorialViews/TutorialTrackerListView/index.js
index b1e418c3e..95efc9645 100644
--- a/app/hub/Views/TutorialViews/TutorialTrackerListView/index.js
+++ b/app/hub/Views/TutorialViews/TutorialTrackerListView/index.js
@@ -11,6 +11,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialTrackerListView from './TutorialTrackerListView';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export default TutorialTrackerListView;
+import TutorialTrackerListViewContainer from './TutorialTrackerListViewContainer';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, { setTutorialNavigation }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialTrackerListViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialTrustRestrictView/TutorialTrustRestrictView.jsx b/app/hub/Views/TutorialViews/TutorialTrustRestrictView/TutorialTrustRestrictView.jsx
deleted file mode 100644
index ae3127a9f..000000000
--- a/app/hub/Views/TutorialViews/TutorialTrustRestrictView/TutorialTrustRestrictView.jsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Tutorial Trust and Restrict View Component
- *
- * 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
- *
- * ToDo: Update this file.
- */
-
-import React, { Component } from 'react';
-
-/**
- * @class Implement the Tutorial Trust and Restrict View for the Ghostery Hub
- * @extends Component
- * @memberof HubComponents
- */
-class TutorailTrustRestrictView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Trust and Restrict View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
-
-export default TutorailTrustRestrictView;
diff --git a/app/scss/partials/_hub_other_partials.scss b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustView.jsx
similarity index 51%
rename from app/scss/partials/_hub_other_partials.scss
rename to app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustView.jsx
index f89e813d7..d1f20107c 100644
--- a/app/scss/partials/_hub_other_partials.scss
+++ b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustView.jsx
@@ -1,5 +1,5 @@
/**
- * Ghostery Hub - Other Sass
+ * Tutorial Trust View Component
*
* Ghostery Browser Extension
* https://www.ghostery.com/
@@ -10,22 +10,16 @@
* 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: Remove this file.
+ * ToDo: Update this file.
*/
-// App Scss
-.App {
- height: 100%;
- width: 100%;
- display: flex;
-}
-.App__leftNavigation {
- height: 100%;
- background-color: pink;
- min-width: 200px;
- max-width: 200px;
-}
-.App__mainContent {
- height: 100%;
- flex-grow: 1;
-}
+import React from 'react';
+
+/**
+ * @class Implement the Tutorial Trust View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+const TutorialTrustView = () => Ghostery Hub - Tutorial Trust
;
+
+export default TutorialTrustView;
diff --git a/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx
new file mode 100644
index 000000000..f8911318c
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx
@@ -0,0 +1,54 @@
+/**
+ * Tutorial Trust View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialTrustView from './TutorialTrustView';
+
+/**
+ * @class Implement the Tutorial Trust View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialTrustViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: `/tutorial/${index - 1}`,
+ hrefNext: `/tutorial/${index + 1}`,
+ hrefDone: '/',
+ textPrev: t('hub_setup_nav_previous'),
+ textNext: t('hub_setup_nav_next'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialTrustViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialTrustViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialTrustView/index.js b/app/hub/Views/TutorialViews/TutorialTrustView/index.js
new file mode 100644
index 000000000..95b4907d2
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialTrustView/index.js
@@ -0,0 +1,38 @@
+/**
+ * Point of entry index.js file for Tutorial Trust View
+ *
+ * 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
+ */
+
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import TutorialTrustViewContainer from './TutorialTrustViewContainer';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, { setTutorialNavigation }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialTrustViewContainer);
diff --git a/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoView.jsx b/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoView.jsx
index 9f929cba6..416c861f7 100644
--- a/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoView.jsx
+++ b/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoView.jsx
@@ -13,38 +13,13 @@
* ToDo: Update this file.
*/
-import React, { Component } from 'react';
+import React from 'react';
/**
* @class Implement the Tutorial Video View for the Ghostery Hub
* @extends Component
* @memberof HubComponents
*/
-class TutorialVideoView extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- title: ''
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- const { title } = this.state;
- window.document.title = title;
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Tutorial Video View of the Hub app
- */
- render() {
- const { title } = this.state;
- return {title}
;
- }
-}
+const TutorialVideoView = () => Ghostery Hub - Tutorial Video View
;
export default TutorialVideoView;
diff --git a/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoViewContainer.jsx
new file mode 100644
index 000000000..756e654a0
--- /dev/null
+++ b/app/hub/Views/TutorialViews/TutorialVideoView/TutorialVideoViewContainer.jsx
@@ -0,0 +1,54 @@
+/**
+ * Tutorial Video View Container
+ *
+ * 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
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import TutorialVideoView from './TutorialVideoView';
+
+/**
+ * @class Implement the Tutorial Video View for the Ghostery Hub
+ * @extends Component
+ * @memberof HubComponents
+ */
+class TutorialVideoViewContainer extends Component {
+ constructor(props) {
+ super(props);
+
+ // TODO call setTutorialNavigation action
+ const { index } = this.props;
+ this.props.actions.setTutorialNavigation({
+ activeIndex: index,
+ hrefPrev: false,
+ hrefNext: `/tutorial/${index + 1}`,
+ hrefDone: '/',
+ textPrev: false,
+ textNext: t('hub_setup_nav_next'),
+ textDone: t('hub_setup_exit_flow'),
+ });
+ }
+
+ render() {
+ return ;
+ }
+}
+
+// PropTypes ensure we pass required props of the correct type
+TutorialVideoViewContainer.propTypes = {
+ index: PropTypes.number.isRequired,
+ actions: PropTypes.shape({
+ setTutorialNavigation: PropTypes.func.isRequired,
+ }).isRequired,
+};
+
+export default TutorialVideoViewContainer;
diff --git a/app/hub/Views/TutorialViews/TutorialVideoView/index.js b/app/hub/Views/TutorialViews/TutorialVideoView/index.js
index a0a33e016..f59987b7f 100644
--- a/app/hub/Views/TutorialViews/TutorialVideoView/index.js
+++ b/app/hub/Views/TutorialViews/TutorialVideoView/index.js
@@ -11,6 +11,28 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/
-import TutorialVideoView from './TutorialVideoView';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
-export default TutorialVideoView;
+import TutorialVideoViewContainer from './TutorialVideoViewContainer';
+import { setTutorialNavigation } from '../../TutorialView/TutorialViewActions';
+
+/**
+ * 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 => Object.assign({}, state.tutorial);
+
+/**
+ * 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 TutorialContainers
+ */
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators(Object.assign({}, { setTutorialNavigation }), dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(TutorialVideoViewContainer);
diff --git a/app/hub/components/App.jsx b/app/hub/components/App.jsx
deleted file mode 100644
index 1dd755e9a..000000000
--- a/app/hub/components/App.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * App Component
- *
- * 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
- *
- * ToDo: Update this file.
- */
-
-import React, { Component } from 'react';
-import SideNavigation from './SideNavigation';
-
-/**
- * @class Implements the container App for the Ghostery Hub
- * @extends Component
- * @memberof HubComponents
- */
-class App extends Component {
- constructor(props) {
- super(props);
-
- this.state = {
- menu: {
- items: [
- { location: 'top', text: 'Ghostery' },
- {
- location: 'list', type: 'link', href: '/', icon: 'home', text: 'Home'
- },
- {
- location: 'list', type: 'link', href: '/setup/1', icon: 'home', text: 'Customize Setup'
- },
- {
- location: 'list', type: 'link', href: '/tutorial/1', icon: 'home', text: 'Visit Tutorial'
- },
- {
- location: 'list', type: 'link', href: '/supporter', icon: 'home', text: 'Become a Ghostery Supporter'
- },
- {
- location: 'list', type: 'link', href: '/rewards', icon: 'home', text: 'Check out Ghostery Rewards'
- },
- {
- location: 'list', type: 'link', href: '/products', icon: 'home', text: 'Try other Ghostery Products'
- },
- {
- location: 'bottom', type: 'modal', icon: 'share', text: 'Share with Friends'
- },
- { location: 'bottom', type: 'separator' },
- {
- location: 'bottom', type: 'link', href: '/create-account', text: 'Create Account'
- },
- {
- location: 'bottom', type: 'link', href: '/log-in', text: 'Log In'
- },
- ],
- },
- };
- }
-
- /**
- * Lifecycle Event
- */
- componentWillMount() {
- window.document.title = '';
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Hub app
- */
- render() {
- const { menu } = this.state;
-
- return (
-
-
-
-
-
- {this.props.children}
-
-
- );
- }
-}
-
-export default App;
diff --git a/app/hub/components/SideNavigation.jsx b/app/hub/components/SideNavigation.jsx
deleted file mode 100644
index 22e170529..000000000
--- a/app/hub/components/SideNavigation.jsx
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Side Navigation Component
- *
- * 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
- *
- * ToDo: Update this file.
- */
-
-import React, { Component } from 'react';
-import { NavLink } from 'react-router-dom';
-
-/**
- * @class Implement the Side Navigation for the Ghostery Hub
- * @extends Component
- * @memberof HubComponents
- */
-class SideNavigation extends Component {
- constructor(props) {
- super(props);
-
- const { items } = props;
- const topItems = [];
- const listItems = [];
- const bottomItems = [];
-
- for (let i = 0; i < items.length; i++) {
- const item = items[i] || {};
- switch (item.location) {
- case 'top':
- topItems.push(item);
- break;
- case 'list':
- listItems.push(item);
- break;
- case 'bottom':
- bottomItems.push(item);
- break;
- default:
- break;
- }
- }
-
- this.state = { topItems, listItems, bottomItems };
- }
-
- /**
- * A helper function for rendering a Side Navigation List Item
- * @return {JSX} JSX for the Navigation Item
- */
- _renderItem(item = {}, index) {
- switch (item.type) {
- case 'separator':
- return ;
- case 'link':
- return (
-
- {item.text}
-
- );
- default:
- return {item.text}
;
- }
- }
-
- /**
- * React's required render function. Returns JSX
- * @return {JSX} JSX for rendering the Side Navigation of the Hub app
- */
- render() {
- const { topItems, listItems, bottomItems } = this.state;
-
- return (
-
-
- {topItems.map((item, i) => this._renderItem(item, i))}
-
-
- {listItems.map((item, i) => this._renderItem(item, i))}
-
-
- {bottomItems.map((item, i) => this._renderItem(item, i))}
-
-
- );
- }
-}
-
-export default SideNavigation;
diff --git a/app/hub/createStore.js b/app/hub/createStore.js
index ccd93ccb6..1cd6440a3 100644
--- a/app/hub/createStore.js
+++ b/app/hub/createStore.js
@@ -21,12 +21,16 @@ import {
} from 'redux';
import thunk from 'redux-thunk';
-import settings from '../panel/reducers/settings';
+import { reducer as home } from './Views/HomeView';
import { reducer as setup } from './Views/SetupView';
+import { reducer as tutorial } from './Views/TutorialView';
+import settings from '../panel/reducers/settings';
const reducer = combineReducers({
- settings,
+ home,
setup,
+ tutorial,
+ settings,
});
/**
diff --git a/app/hub/index.jsx b/app/hub/index.jsx
index fb2a94fac..1f22f5a86 100644
--- a/app/hub/index.jsx
+++ b/app/hub/index.jsx
@@ -20,7 +20,7 @@ import { Provider } from 'react-redux';
import createStore from './createStore';
// Components
-import App from './components/App';
+import App from './App';
// Containers
import HomeView from './Views/HomeView';
diff --git a/app/images/hub/home/ghosty-bubble-heart.svg b/app/images/hub/home/ghosty-bubble-heart.svg
new file mode 100644
index 000000000..b3f6f8360
--- /dev/null
+++ b/app/images/hub/home/ghosty-bubble-heart.svg
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/images/hub/setup/block-all.svg b/app/images/hub/setup/block-all.svg
index fbb9fd39c..6d9e73524 100644
--- a/app/images/hub/setup/block-all.svg
+++ b/app/images/hub/setup/block-all.svg
@@ -1,29 +1,23 @@
-
+
-
+
-
+
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
-
+
diff --git a/app/images/hub/setup/block-custom.svg b/app/images/hub/setup/block-custom.svg
index ea14d8bc3..e4d450244 100644
--- a/app/images/hub/setup/block-custom.svg
+++ b/app/images/hub/setup/block-custom.svg
@@ -1,28 +1,16 @@
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/images/hub/setup/block-none.svg b/app/images/hub/setup/block-none.svg
index 864b4177f..af6037bd4 100644
--- a/app/images/hub/setup/block-none.svg
+++ b/app/images/hub/setup/block-none.svg
@@ -1,18 +1,16 @@
-
+
-
+
-
+
-
+
-
-
-
-
+
+
diff --git a/app/images/hub/setup/block-recommended.svg b/app/images/hub/setup/block-recommended.svg
index f88cec402..bea1f85ce 100644
--- a/app/images/hub/setup/block-recommended.svg
+++ b/app/images/hub/setup/block-recommended.svg
@@ -1,39 +1,23 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/images/hub/setup/block-selected.svg b/app/images/hub/setup/block-selected.svg
index 5246d96d8..cda507d32 100644
--- a/app/images/hub/setup/block-selected.svg
+++ b/app/images/hub/setup/block-selected.svg
@@ -1 +1,6 @@
-
\ No newline at end of file
+
+
+
+
+
+
diff --git a/app/images/hub/setup/ghosty-block-all.svg b/app/images/hub/setup/ghosty-block-all.svg
index bb3514b9b..1931c62b5 100644
--- a/app/images/hub/setup/ghosty-block-all.svg
+++ b/app/images/hub/setup/ghosty-block-all.svg
@@ -1,46 +1,36 @@
-
+
-
+
-
+
-
+
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/app/images/hub/setup/ghosty-check-wrench.svg b/app/images/hub/setup/ghosty-check-wrench.svg
index d19c04128..e82872067 100644
--- a/app/images/hub/setup/ghosty-check-wrench.svg
+++ b/app/images/hub/setup/ghosty-check-wrench.svg
@@ -1,35 +1,29 @@
-
+
-
-
-
-
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
diff --git a/app/images/hub/setup/ghosty-human-web.svg b/app/images/hub/setup/ghosty-human-web.svg
index c079b1600..d03061f68 100644
--- a/app/images/hub/setup/ghosty-human-web.svg
+++ b/app/images/hub/setup/ghosty-human-web.svg
@@ -1,26 +1,20 @@
-
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/app/images/hub/setup/ghosty-icon.svg b/app/images/hub/setup/ghosty-icon.svg
index 51ff63a61..06582cbfe 100644
--- a/app/images/hub/setup/ghosty-icon.svg
+++ b/app/images/hub/setup/ghosty-icon.svg
@@ -1,23 +1,10 @@
-
-
-
- Icon- ghostery
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
diff --git a/app/images/hub/setup/ghosty-shield-stop-lightbulb.svg b/app/images/hub/setup/ghosty-shield-stop-lightbulb.svg
index 30e6e3114..e74d15052 100644
--- a/app/images/hub/setup/ghosty-shield-stop-lightbulb.svg
+++ b/app/images/hub/setup/ghosty-shield-stop-lightbulb.svg
@@ -1,4 +1,4 @@
-
+
@@ -9,39 +9,31 @@
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
-
+
-
+
-
-
-
-
-
+
+
+
-
+
-
+
diff --git a/app/images/hub/side-navigation/ghostery-logo.svg b/app/images/hub/side-navigation/ghostery-logo.svg
new file mode 100644
index 000000000..b92f30131
--- /dev/null
+++ b/app/images/hub/side-navigation/ghostery-logo.svg
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/scss/hub.scss b/app/scss/hub.scss
index 713e3595b..1d249cdf0 100644
--- a/app/scss/hub.scss
+++ b/app/scss/hub.scss
@@ -17,6 +17,14 @@ html, body, #root {
margin: 0;
}
+.App {
+ position: fixed;
+}
+.App__mainContent {
+ overflow-y: scroll;
+ margin-left: 230px;
+}
+
// Foundation Overrides
.button {
font-size: 14px;
@@ -32,12 +40,13 @@ html, body, #root {
.full-width { width: 100%; }
.display-inline { display: inline-block; }
+@import 'settings_hub'; // Import Foundation
@import './partials/_hub_mixins';
@import './partials/_hub_svgs';
-@import './partials/_hub_side_navigation';
-@import './partials/_hub_other_partials'; // ToDo: Remove this file
-// Imports from ../hub directory for the Custom Setup Workflow
+// Imports from ../hub directory
+@import '../hub/Views/HomeView/HomeView.scss';
+@import '../hub/Views/SideNavigationView/SideNavigationView.scss';
@import '../hub/Views/SetupView/SetupView.scss';
@import '../hub/Views/SetupViews/SetupHeader/SetupHeader.scss';
@import '../hub/Views/SetupViews/SetupBlockingView/SetupBlockingView.scss';
@@ -45,6 +54,7 @@ html, body, #root {
@import '../hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.scss';
@import '../hub/Views/SetupViews/SetupHumanWebView/SetupHumanWebView.scss';
@import '../hub/Views/SetupViews/SetupDoneView/SetupDoneView.scss';
+@import '../hub/Views/TutorialView/TutorialView.scss';
@import '../hub/Views/RewardsView/RewardsView.scss';
@import '../hub/Views/ProductsView/ProductsView.scss';
diff --git a/app/scss/partials/_hub_side_navigation.scss b/app/scss/partials/_hub_side_navigation.scss
deleted file mode 100644
index 456496014..000000000
--- a/app/scss/partials/_hub_side_navigation.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Ghostery Hub - Side Navigation 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
- */
-
- // Side Navigation
- .SideNavigation__top {
- min-height: 100px;
- margin: 16px;
- }
- .SideNavigation__list {
- margin: 16px;
- }
- .SideNavigation__bottom {
- margin: 16px;
- }
diff --git a/app/scss/partials/_hub_svgs.scss b/app/scss/partials/_hub_svgs.scss
index 8390626b9..c24eaedae 100644
--- a/app/scss/partials/_hub_svgs.scss
+++ b/app/scss/partials/_hub_svgs.scss
@@ -40,61 +40,98 @@
@return '%23' + str-slice('#{$color}', 2, -1);
}
+// Used in Side Navigation View
+@function buildIconHome($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2225%22%20height%3D%2225%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M12.5%201c-.21.008-.458.076-.624.194L1.391%208.654A.922.922%200%200%200%201%209.392v13.676c0%20.488.483.932%201.015.932h7.103c.53%200%201.014-.444%201.014-.932v-4.352c0-1.221%201.039-2.175%202.368-2.175%201.33%200%202.368.954%202.368%202.175v4.352c0%20.488.483.932%201.014.932h7.103c.532%200%201.015-.444%201.015-.932V9.392a.924.924%200%200%200-.391-.738l-10.485-7.46c-.188-.133-.286-.177-.624-.194zm0%202.108l9.47%206.73v12.297h-5.073v-3.419c0-2.222-1.979-4.04-4.397-4.04s-4.397%201.818-4.397%204.04v3.42H3.029V9.838L12.5%203.108z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%220.1%22%20/%3E%3C/svg%3E');
+}
+@function buildIconSetup($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2228%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%220.1%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M11.464%204.563c.612.004%201.135-.523%201.147-1.155.012-.638-.511-1.188-1.133-1.192-.613-.005-1.136.523-1.147%201.155-.012.637.512%201.187%201.133%201.192zm-3.415%200H3.596c-.777%200-1.241.485-1.241%201.291v18.56c0%20.78.478%201.27%201.24%201.27h15.746c.776%200%201.247-.486%201.247-1.286V5.838c0-.783-.475-1.275-1.235-1.275H14.883v1.156H8.048V4.563zM9.184%203.39c.042-1.4%201.089-2.278%202.145-2.35%201.086-.072%202.348.726%202.44%202.35h.242c1.807%200%203.615-.002%205.423%200%201.293%200%202.292%201.029%202.292%202.362V24.5c0%201.332-.999%202.356-2.298%202.356H3.5c-1.282%200-2.285-1.032-2.285-2.347V5.786c0-1.385.981-2.394%202.329-2.395%201.793-.002%203.584%200%205.377%200h.262z%22/%3E%3Cpath%20d%3D%22M5.755%2011.343h11.412v-.97H5.755zM5.755%2013.605h11.412v-.97H5.755zM5.755%2016.19h11.412v-.969H5.755zM5.755%2018.453h11.412v-.97H5.755z%22/%3E%3C/g%3E%3C/svg%3E');
+}
+@function buildIconTutorial($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2232%22%20height%3D%2231%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M30.011%2025.521L11.945%207.863a2.242%202.242%200%200%200-1.615-.644c-.594%200-1.187.225-1.616.644l-.362.355a2.24%202.24%200%200%200%200%203.19l18.033%2017.625a2.242%202.242%200%200%200%201.615.645c.593%200%201.187-.226%201.615-.645l.396-.322c.89-.902.89-2.32%200-3.19zM9.241%209.12l.363-.354a.96.96%200%200%201%20.693-.29c.263%200%20.527.096.692.29l2.506%202.448-1.748%201.708-2.505-2.449c-.363-.354-.363-.966%200-1.353zm19.814%2018.657l-.363.354a.96.96%200%200%201-.692.29c-.264%200-.527-.097-.692-.29L12.703%2013.857l1.748-1.708%2014.637%2014.307a.91.91%200%200%201-.033%201.32zM17.385%205.64c1.285%200%202.307%201.386%202.307%202.578%200%20.354.297.644.66.644.362%200%20.659-.29.659-.644%200-1.192.989-2.578%202.308-2.578.362%200%20.659-.29.659-.644a.654.654%200%200%200-.66-.645c-1.252%200-2.307-.999-2.307-2.255a.654.654%200%200%200-.66-.645c-.362%200-.659.29-.659.645%200%201.224-1.022%202.255-2.307%202.255-.363%200-.66.29-.66.645%200%20.354.297.644.66.644zm2.934-1.514c.263.354.593.676.956.902a3.998%203.998%200%200%200-.956.999%203.998%203.998%200%200%200-.956-1c.395-.225.692-.547.956-.901zm-9.627%2017.27c-.824%200-1.516-.676-1.516-1.482a.654.654%200%200%200-.66-.644c-.362%200-.659.29-.659.644%200%20.806-.692%201.483-1.516%201.483-.363%200-.66.29-.66.644%200%20.355.297.645.66.645.79%200%201.516.837%201.516%201.707%200%20.355.297.645.66.645.362%200%20.659-.29.659-.645%200-.87.725-1.707%201.516-1.707.363%200%20.66-.29.66-.645a.654.654%200%200%200-.66-.644zm-2.176%201.128c-.131-.16-.263-.322-.428-.45.165-.13.297-.258.428-.387a1.6%201.6%200%200%200%20.43.386c-.166.161-.33.29-.43.451zM6.736%204.706c.363%200%20.66-.29.66-.645a.654.654%200%200%200-.66-.644c-.824%200-1.516-.677-1.516-1.483a.654.654%200%200%200-.66-.644c-.362%200-.659.29-.659.644%200%20.806-.692%201.483-1.516%201.483-.363%200-.66.29-.66.644%200%20.355.297.645.66.645.79%200%201.516.837%201.516%201.707%200%20.355.297.645.66.645.362%200%20.659-.29.659-.645%200-.87.725-1.707%201.516-1.707zM4.56%204.544c-.131-.16-.263-.322-.428-.45.165-.13.297-.258.428-.387a1.6%201.6%200%200%200%20.429.386%205.4%205.4%200%200%200-.429.451zm-.395%2010.827a.654.654%200%200%201-.66.645c-.131%200-.263.193-.263.386a.654.654%200%200%201-.66.645.654.654%200%200%201-.659-.645c0-.193-.165-.386-.264-.386A.654.654%200%200%201%201%2015.37c0-.354.297-.644.66-.644a.257.257%200%200%200%20.263-.258c0-.355.297-.645.66-.645.362%200%20.659.29.659.645%200%20.161.132.258.263.258.396%200%20.66.29.66.644z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%220.1%22/%3E%3C/svg%3E');
+}
+@function buildIconSupporter($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2235%22%20height%3D%2235%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.431%201.45c.993-.233%201.994.373%202.232%201.353a1.817%201.817%200%200%201-.834%201.976c.008.02.022.037.027.06l.39%201.608c3.82-3.494%208.878-.95%208.93-.922.105.054.18.15.208.262l.15.614c.084.137.428.617%201.118.712.734.103%202.03-.213%204.049-2.287%205.962-6.127%2012.773-1.966%2012.841-1.923a.4.4%200%200%201-.079.718c-2.1.753-3.156%201.916-3.648%202.667%203.203.194%205.663%204.448%205.774%204.642a.4.4%200%200%201-.076.49.41.41%200%200%201-.5.045c-.034-.02-3.41-2.089-8.223%202.026-3.714%203.176-8.24%204.643-10.473%204.643-.47%200-.838-.065-1.076-.193-.323-.173-.481-.461-.435-.79.128-.911-.443-1.645-.632-1.861-3.342.255-5.145%202.052-5.238%202.148-.007.007-.016.01-.023.016l3.81%2015.731a.402.402%200%200%201-.396.496.407.407%200%200%201-.396-.31L3.07%205.047A1.851%201.851%200%200%201%201.06%203.655a1.83%201.83%200%200%201%201.37-2.204zm11.186%2015.782c.639.51%206.015-.394%2010.64-4.35%203.528-3.017%206.383-2.978%207.933-2.591-.986-1.343-2.915-3.484-5.014-3.174a.412.412%200%200%201-.382-.153.398.398%200%200%201-.052-.404c.295-.677%201.209-2.26%203.618-3.361a10.591%2010.591%200%200%200-3.074-.86c-2.995-.355-5.685.668-7.998%203.045-1.822%201.871-3.428%202.719-4.77%202.523a2.356%202.356%200%200%201-.67-.207l1.762%207.278a.4.4%200%200%201-.101.371.41.41%200%200%201-.372.117%2011.606%2011.606%200%200%200-1.983-.206c.283.462.568%201.153.463%201.972zm1.058-2.659l-2.038-8.41c-.874-.39-5.088-2.018-8.17%201.199l2.23%209.204c.926-.772%203.65-2.61%207.978-1.993zM1.854%203.468c.133.55.695.891%201.249.758.556-.132.9-.685.767-1.234a1.04%201.04%200%200%200-1.249-.758c-.556.131-.9.685-.767%201.234z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221%22/%3E%3C/svg%3E');
+}
+@function buildIconRewards($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2224%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M8.45%2010.898h2.91V7.372H8.45v3.526zm2.64-4.9l.043.113c1.183-.081%202.385-.056%203.544-.27%201.372-.25%201.891-1.698%201.152-2.873-.64-1.014-2.272-1.22-2.926-.307-.559.78-1%201.645-1.472%202.487-.148.264-.229.566-.34.85zm-2.336.088c-.178-.589-1.168-2.508-1.57-3.06a3.686%203.686%200%200%200-.152-.202%201.896%201.896%200%200%200-3.26.47c-.422%201.02.179%202.32%201.173%202.537%201.248.27%202.52.175%203.81.255zm3.79%204.794h5.09V7.367h-5.09v3.513zm-10.356.02h5.103V7.365H2.188v3.537zM8.44%2021.492h2.909v-9.42H8.44v9.42zm4.112.049h4.232v-9.475h-4.232v9.475zm-9.514-.049h4.25v-9.43h-4.25v9.43zm-1.143-9.364c-.75-.198-.904-.097-.895-1.17.01-1.315.002-2.63.003-3.946%200-.616.166-.781.786-.781.433%200%20.865.001%201.297-.001.089%200%20.177-.01.24-.015-.22-.386-.48-.736-.629-1.129a3.03%203.03%200%200%201%201.424-3.733c1.38-.718%203.01-.313%203.912.99.684.992%201.21%202.072%201.688%203.176.047.109.1.216.18.385.11-.236.202-.415.28-.597.435-.988.892-1.964%201.514-2.854.542-.772%201.232-1.297%202.196-1.422%201.569-.203%203.079.919%203.339%202.485.152.916-.078%201.727-.61%202.47l-.17.234c.092.013.157.032.224.032.498-.003.997-.005%201.494-.013.373-.007.613.204.614.575.005%201.55.004%203.101%200%204.652%200%20.314-.195.52-.516.564-.11.017-.22.02-.362.031v9.675c0%20.112.002.226-.005.337-.03.385-.17.535-.549.593-.12.017-.244.017-.366.017l-14.18.001c-.075%200-.151.002-.226-.002-.515-.03-.683-.203-.683-.724v-9.83z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%220.1%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E');
+}
+@function buildIconProducts($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2226%22%20height%3D%2229%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M24.23%2023.417c-1.118-2.574-1.31-4.755-1.34-5.612v-7.052C22.89%205.366%2018.512%201%2013.112%201s-9.778%204.366-9.778%209.753v7.154c-.042.922-.261%203.036-1.335%205.51-1.443%203.325-.248%202.928.821%202.655%201.07-.272%203.459-1.34%204.205-.025.746%201.315%201.368%202.457%203.11%201.712%201.741-.744%202.562-.992%202.81-.992h.339c.248%200%201.069.248%202.81.992%201.742.745%202.364-.397%203.11-1.712s3.135-.247%204.204.025c1.07.273%202.264.67.821-2.655%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221.983%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%3E%3Cpath%20d%3D%22M9.985%205.05c1.06%200%201.919%201.334%201.919%202.98%200%201.647-.86%202.982-1.92%202.982S8.066%209.677%208.066%208.03c0-1.646.86-2.98%201.92-2.98M12.96%2016.857c-2.336%200-4.302-2.257-4.895-4.767%201.145%201.544%202.911%202.536%204.895%202.536%201.984%200%203.75-.992%204.895-2.536-.593%202.51-2.56%204.767-4.895%204.767M16.132%2011.012c-1.061%200-1.92-1.335-1.92-2.982%200-1.646.859-2.98%201.92-2.98%201.06%200%201.919%201.334%201.919%202.98%200%201.647-.859%202.982-1.92%202.982%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+}
+
+// Used in Home View
+@function buildIconClipboard($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2234%22%20height%3D%2242%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.953%2026.497h18.263V24.69H7.953v1.808zm-.001-3.72h18.262v-1.805H7.952v1.806zm0-3.712h18.262v-1.808H7.952v1.808zm.014-3.703h18.248V13.55H7.966v1.812zm3.623-11.118v1.83h10.972v-1.83h.373c2.269%200%204.537-.002%206.806%200%201.22%200%201.986.778%201.986%202.018v29.357c0%201.266-.757%202.035-2.004%202.035-8.429.002-16.856.002-25.286%200-1.223%200-1.992-.774-1.992-2.008-.002-9.787-.002-19.574%200-29.36%200-1.274.747-2.04%201.992-2.042%202.368-.002%204.734%200%207.153%200z%22%20fill%3D%22#{_url-friendly-color($secondary-color)}%22/%3E%3Cpath%20d%3D%22M16.775%205.742c.976.008%201.811-.831%201.83-1.838.02-1.014-.816-1.89-1.81-1.897-.977-.007-1.813.832-1.83%201.839-.02%201.014.818%201.89%201.81%201.896zm-5.456%200H4.206c-1.24%200-1.982.773-1.982%202.056-.002%209.845-.002%2019.691%200%2029.537%200%201.241.763%202.022%201.982%202.022h25.15c1.24%200%201.992-.774%201.992-2.048V7.772c0-1.246-.76-2.03-1.973-2.03h-7.141v1.84H11.319v-1.84zm1.813-1.865c.067-2.229%201.74-3.626%203.426-3.74%201.734-.115%203.75%201.156%203.898%203.74h.387c2.886%200%205.774-.002%208.662%200%202.065.001%203.66%201.638%203.66%203.76%200%209.946.002%2019.89%200%2029.835%200%202.12-1.595%203.75-3.67%203.75H4.054c-2.048%200-3.65-1.643-3.65-3.736-.002-9.932-.002-19.865%200-29.797%200-2.205%201.567-3.81%203.72-3.812%202.863-.002%205.725%200%208.588%200h.419z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20d%3D%22M7.655%2016.532h18.228V14.99H7.655zM7.655%2020.133h18.228V18.59H7.655zM7.655%2024.248h18.228v-1.543H7.655zM7.655%2027.849h18.228v-1.543H7.655z%22/%3E%3C/g%3E%3C/svg%3E');
+}
+@function buildIconClipboardCheck($primary-color, $secondary-color, $tertiary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2281%22%20height%3D%2242%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.953%2026.497h18.263V24.69H7.953v1.808zm-.001-3.72h18.262v-1.805H7.952v1.806zm0-3.712h18.262v-1.808H7.952v1.808zm.014-3.703h18.248V13.55H7.966v1.812zm3.623-11.118v1.83h10.972v-1.83h.373c2.269%200%204.537-.002%206.806%200%201.22%200%201.986.778%201.986%202.018v29.357c0%201.266-.757%202.035-2.004%202.035-8.429.002-16.856.002-25.286%200-1.223%200-1.992-.774-1.992-2.008-.002-9.787-.002-19.574%200-29.36%200-1.274.747-2.04%201.992-2.042%202.368-.002%204.734%200%207.153%200z%22%20fill%3D%22#{_url-friendly-color($secondary-color)}%22/%3E%3Cpath%20d%3D%22M16.775%205.742c.976.008%201.811-.831%201.83-1.838.02-1.014-.816-1.89-1.81-1.897-.977-.007-1.813.832-1.83%201.839-.02%201.014.818%201.89%201.81%201.896zm-5.456%200H4.206c-1.24%200-1.982.773-1.982%202.056-.002%209.845-.002%2019.691%200%2029.537%200%201.241.763%202.022%201.982%202.022h25.15c1.24%200%201.992-.774%201.992-2.048V7.772c0-1.246-.76-2.03-1.973-2.03h-7.141v1.84H11.319v-1.84zm1.813-1.865c.067-2.229%201.74-3.626%203.426-3.74%201.734-.115%203.75%201.156%203.898%203.74h.387c2.886%200%205.774-.002%208.662%200%202.065.001%203.66%201.638%203.66%203.76%200%209.946.002%2019.89%200%2029.835%200%202.12-1.595%203.75-3.67%203.75H4.054c-2.048%200-3.65-1.643-3.65-3.736-.002-9.932-.002-19.865%200-29.797%200-2.205%201.567-3.81%203.72-3.812%202.863-.002%205.725%200%208.588%200h.419z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20d%3D%22M7.655%2016.532h18.228V14.99H7.655zM7.655%2020.133h18.228V18.59H7.655zM7.655%2024.248h18.228v-1.543H7.655zM7.655%2027.849h18.228v-1.543H7.655z%22/%3E%3Cpath%20d%3D%22M59.68%2035C54.443%2030.894%2049.256%2026.823%2044%2022.704c1.29-1.671%202.544-3.303%203.846-4.987l11.089%208.691C64.728%2019.951%2070.521%2013.501%2076.353%207L81%2011.233C73.883%2019.17%2066.8%2027.063%2059.68%2035%22%20fill%3D%22#{_url-friendly-color($tertiary-color)}%22/%3E%3C/g%3E%3C/svg%3E');
+}
+@function buildIconWand($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2251%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M20%2021l6-6%2025%2023-6%207z%22/%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/g%3E%3C/svg%3E');
+}
+@function buildIconWandCheck($primary-color, $secondary-color, $tertiary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2290%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M68.68%2037C63.443%2032.894%2058.256%2028.823%2053%2024.704c1.29-1.671%202.544-3.303%203.846-4.987l11.089%208.691C73.728%2021.951%2079.521%2015.501%2085.353%209L90%2013.233C82.883%2021.17%2075.8%2029.063%2068.68%2037%22%20fill%3D%22#{_url-friendly-color($tertiary-color)}%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M20%2021l6-6%2025%2023-6%207z%22/%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/g%3E%3C/svg%3E');
+}
+@function buildIconFlag($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2252%22%20height%3D%2254%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M21.71%2023.779c.975.796%209.19-.614%2016.256-6.778%205.392-4.702%209.754-4.641%2012.122-4.039-1.506-2.093-4.454-5.429-7.66-4.946a.623.623%200%200%201-.584-.238.63.63%200%200%201-.08-.63c.45-1.055%201.847-3.52%205.529-5.237A15.944%2015.944%200%200%200%2042.595.569c-4.576-.552-8.687%201.043-12.22%204.746-2.784%202.917-5.238%204.238-7.289%203.933a3.55%203.55%200%200%201-1.024-.323l2.693%2011.34a.632.632%200%200%201-.155.58.618.618%200%200%201-.568.182%2017.4%2017.4%200%200%200-3.03-.32c.432.72.868%201.797.707%203.072zm1.497-4.135L20.093%206.536c-1.335-.607-7.775-3.142-12.483%201.87l3.407%2014.343c1.415-1.202%205.576-4.066%2012.19-3.105z%22%20fill%3D%22#{_url-friendly-color($secondary-color)}%22/%3E%3Cpath%20d%3D%22M3.187%202.805a2.833%202.833%200%200%201%203.41%202.108%202.855%202.855%200%200%201-1.275%203.08c.013.03.034.057.042.091l.596%202.506c5.836-5.443%2013.566-1.478%2013.646-1.436.16.084.275.233.317.41l.227.955c.13.213.656.962%201.71%201.11%201.122.16%203.103-.332%206.187-3.564%209.11-9.548%2019.517-3.064%2019.621-2.997a.628.628%200%200%201-.12%201.12c-3.21%201.173-4.823%202.985-5.575%204.156%204.895.302%208.653%206.93%208.823%207.233a.631.631%200%200%201-.116.765.618.618%200%200%201-.765.07c-.051-.034-5.21-3.257-12.564%203.155-5.675%204.95-12.59%207.236-16.002%207.236-.718%200-1.281-.1-1.646-.3-.492-.27-.734-.719-.663-1.232.195-1.42-.677-2.564-.966-2.9-5.107.397-7.861%203.199-8.005%203.349-.01.01-.024.014-.034.024l5.823%2024.515a.627.627%200%200%201-.606.772.625.625%200%200%201-.605-.481L4.16%208.407A2.84%202.84%200%200%201%201.093%206.24c-.362-1.527.577-3.068%202.094-3.434zm17.092%2024.592c.976.797%209.191-.614%2016.257-6.777%205.391-4.702%209.753-4.642%2012.122-4.039-1.507-2.093-4.454-5.43-7.66-4.946a.623.623%200%200%201-.585-.238.63.63%200%200%201-.079-.63c.45-1.055%201.847-3.521%205.528-5.238a15.944%2015.944%200%200%200-4.698-1.341c-4.575-.552-8.687%201.043-12.22%204.746-2.784%202.916-5.238%204.238-7.288%203.933a3.55%203.55%200%200%201-1.025-.323l2.694%2011.34a.632.632%200%200%201-.156.58.618.618%200%200%201-.568.182%2017.4%2017.4%200%200%200-3.03-.321c.433.72.868%201.797.708%203.072zm1.616-4.142L18.78%2010.147c-1.335-.608-7.775-3.143-12.483%201.87l3.407%2014.342c1.415-1.201%205.576-4.065%2012.19-3.104zM2.305%205.948A1.583%201.583%200%200%200%204.213%207.13a1.598%201.598%200%200%200%201.173-1.923%201.587%201.587%200%200%200-1.909-1.18%201.598%201.598%200%200%200-1.172%201.922z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221.166%22/%3E%3C/g%3E%3C/svg%3E');
+}
+
// Used in Stepped Navigation
-@function buildIconX($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M10.078%207.5l4.386-4.386a1.824%201.824%200%200%200-2.578-2.58L7.5%204.922%203.114.534a1.824%201.824%200%201%200-2.58%202.58L4.92%207.5.534%2011.886a1.824%201.824%200%200%200%202.578%202.58L7.5%2010.078l4.386%204.386a1.824%201.824%200%201%200%202.58-2.58L10.078%207.5z%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E');
+@function buildIconX($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M10.078%207.5l4.386-4.386a1.824%201.824%200%200%200-2.578-2.58L7.5%204.922%203.114.534a1.824%201.824%200%201%200-2.58%202.58L4.92%207.5.534%2011.886a1.824%201.824%200%200%200%202.578%202.58L7.5%2010.078l4.386%204.386a1.824%201.824%200%201%200%202.58-2.58L10.078%207.5z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E');
}
// Used in Setup Anti-Suite View
-@function buildAntiTrackingIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%222.3%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildAntiTrackingIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%222.3%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildAntiTrackingActiveIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%222.3%22/%3E%3Ccircle%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20cx%3D%229.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildAntiTrackingActiveIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2230%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(2.08)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M9.804%209.03a.692.692%200%200%200-.408%200L.613%2011.36a.787.787%200%200%200-.613.777c.041%206.254%203.39%2012.057%209.15%2015.94a.825.825%200%200%200%20.45.123.825.825%200%200%200%20.45-.123c5.76-3.883%209.109-9.686%209.15-15.94a.787.787%200%200%200-.613-.777L9.804%209.03z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%222.3%22/%3E%3Ccircle%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20cx%3D%229.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildAdBlockIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2232%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(1.12%20.56)%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.525%2026.57c.713.714%201.423%201.429%202.14%202.137.052.052.153.08.233.08%202.443.003%204.885.004%207.327-.002a.42.42%200%200%200%20.265-.109c1.73-1.723%203.457-3.45%205.181-5.181a.418.418%200%200%200%20.114-.263c.007-2.45.006-4.9.004-7.35-.002-.067-.017-.154-.059-.199-.717-.728-1.439-1.45-2.152-2.167L4.525%2026.57m-.99-.982l13.05-13.051c-.7-.7-1.409-1.413-2.126-2.122a.36.36%200%200%200-.231-.081%201608.44%201608.44%200%200%200-7.327.001.414.414%200%200%200-.267.106%201715.804%201715.804%200%200%200-5.197%205.195.362.362%200%200%200-.102.225c-.005%202.465-.005%204.93-.001%207.393%200%20.067.025.15.07.194.712.722%201.43%201.439%202.13%202.14m17.582-6.014c0%201.317-.005%202.634.004%203.95a.92.92%200%200%201-.288.707%201994.487%201994.487%200%200%200-5.603%205.601.903.903%200%200%201-.685.288c-2.654-.006-5.31-.006-7.966%200a.909.909%200%200%201-.685-.286c-1.868-1.875-3.74-3.748-5.617-5.617A.872.872%200%200%201%200%2023.55C.006%2020.895.006%2018.24%200%2015.583c0-.277.084-.49.28-.686%201.877-1.87%203.75-3.741%205.62-5.618A.88.88%200%200%201%206.562%209c2.663.005%205.326.005%207.989%200%20.27%200%20.477.087.665.277%201.875%201.881%203.754%203.758%205.635%205.633.183.183.27.386.268.647-.007%201.339-.004%202.678-.004%204.017%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildAdBlockIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2232%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(1.12%20.56)%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.525%2026.57c.713.714%201.423%201.429%202.14%202.137.052.052.153.08.233.08%202.443.003%204.885.004%207.327-.002a.42.42%200%200%200%20.265-.109c1.73-1.723%203.457-3.45%205.181-5.181a.418.418%200%200%200%20.114-.263c.007-2.45.006-4.9.004-7.35-.002-.067-.017-.154-.059-.199-.717-.728-1.439-1.45-2.152-2.167L4.525%2026.57m-.99-.982l13.05-13.051c-.7-.7-1.409-1.413-2.126-2.122a.36.36%200%200%200-.231-.081%201608.44%201608.44%200%200%200-7.327.001.414.414%200%200%200-.267.106%201715.804%201715.804%200%200%200-5.197%205.195.362.362%200%200%200-.102.225c-.005%202.465-.005%204.93-.001%207.393%200%20.067.025.15.07.194.712.722%201.43%201.439%202.13%202.14m17.582-6.014c0%201.317-.005%202.634.004%203.95a.92.92%200%200%201-.288.707%201994.487%201994.487%200%200%200-5.603%205.601.903.903%200%200%201-.685.288c-2.654-.006-5.31-.006-7.966%200a.909.909%200%200%201-.685-.286c-1.868-1.875-3.74-3.748-5.617-5.617A.872.872%200%200%201%200%2023.55C.006%2020.895.006%2018.24%200%2015.583c0-.277.084-.49.28-.686%201.877-1.87%203.75-3.741%205.62-5.618A.88.88%200%200%201%206.562%209c2.663.005%205.326.005%207.989%200%20.27%200%20.477.087.665.277%201.875%201.881%203.754%203.758%205.635%205.633.183.183.27.386.268.647-.007%201.339-.004%202.678-.004%204.017%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildAdBlockActiveIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2232%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(1.12%20.56)%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.525%2026.57c.713.714%201.423%201.429%202.14%202.137.052.052.153.08.233.08%202.443.003%204.885.004%207.327-.002a.42.42%200%200%200%20.265-.109c1.73-1.723%203.457-3.45%205.181-5.181a.418.418%200%200%200%20.114-.263c.007-2.45.006-4.9.004-7.35-.002-.067-.017-.154-.059-.199-.717-.728-1.439-1.45-2.152-2.167L4.525%2026.57m-.99-.982l13.05-13.051c-.7-.7-1.409-1.413-2.126-2.122a.36.36%200%200%200-.231-.081%201608.44%201608.44%200%200%200-7.327.001.414.414%200%200%200-.267.106%201715.804%201715.804%200%200%200-5.197%205.195.362.362%200%200%200-.102.225c-.005%202.465-.005%204.93-.001%207.393%200%20.067.025.15.07.194.712.722%201.43%201.439%202.13%202.14m17.582-6.014c0%201.317-.005%202.634.004%203.95a.92.92%200%200%201-.288.707%201994.487%201994.487%200%200%200-5.603%205.601.903.903%200%200%201-.685.288c-2.654-.006-5.31-.006-7.966%200a.909.909%200%200%201-.685-.286c-1.868-1.875-3.74-3.748-5.617-5.617A.872.872%200%200%201%200%2023.55C.006%2020.895.006%2018.24%200%2015.583c0-.277.084-.49.28-.686%201.877-1.87%203.75-3.741%205.62-5.618A.88.88%200%200%201%206.562%209c2.663.005%205.326.005%207.989%200%20.27%200%20.477.087.665.277%201.875%201.881%203.754%203.758%205.635%205.633.183.183.27.386.268.647-.007%201.339-.004%202.678-.004%204.017%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3Ccircle%20cx%3D%2210.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildAdBlockActiveIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2223%22%20height%3D%2232%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(1.12%20.56)%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M4.525%2026.57c.713.714%201.423%201.429%202.14%202.137.052.052.153.08.233.08%202.443.003%204.885.004%207.327-.002a.42.42%200%200%200%20.265-.109c1.73-1.723%203.457-3.45%205.181-5.181a.418.418%200%200%200%20.114-.263c.007-2.45.006-4.9.004-7.35-.002-.067-.017-.154-.059-.199-.717-.728-1.439-1.45-2.152-2.167L4.525%2026.57m-.99-.982l13.05-13.051c-.7-.7-1.409-1.413-2.126-2.122a.36.36%200%200%200-.231-.081%201608.44%201608.44%200%200%200-7.327.001.414.414%200%200%200-.267.106%201715.804%201715.804%200%200%200-5.197%205.195.362.362%200%200%200-.102.225c-.005%202.465-.005%204.93-.001%207.393%200%20.067.025.15.07.194.712.722%201.43%201.439%202.13%202.14m17.582-6.014c0%201.317-.005%202.634.004%203.95a.92.92%200%200%201-.288.707%201994.487%201994.487%200%200%200-5.603%205.601.903.903%200%200%201-.685.288c-2.654-.006-5.31-.006-7.966%200a.909.909%200%200%201-.685-.286c-1.868-1.875-3.74-3.748-5.617-5.617A.872.872%200%200%201%200%2023.55C.006%2020.895.006%2018.24%200%2015.583c0-.277.084-.49.28-.686%201.877-1.87%203.75-3.741%205.62-5.618A.88.88%200%200%201%206.562%209c2.663.005%205.326.005%207.989%200%20.27%200%20.477.087.665.277%201.875%201.881%203.754%203.758%205.635%205.633.183.183.27.386.268.647-.007%201.339-.004%202.678-.004%204.017%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Ccircle%20cx%3D%2210.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildSmartBlockingIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2218%22%20height%3D%2236%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.04%20.32)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.338%2017.571c-.093%201.622-.669%203.052-1.588%204.364-.413.591-.832%201.177-1.233%201.779-.573.858-1.032%201.77-1.208%202.801-.03.17-.136.157-.253.157l-2.424-.001c-.798%200-1.597-.005-2.396.003-.175.002-.237-.048-.272-.23-.19-.997-.632-1.889-1.192-2.724-.477-.709-.974-1.405-1.453-2.114a8.02%208.02%200%200%201-1.388-4.265c-.108-2.725%201.427-5.103%204.017-6.207%203.32-1.413%207.245.005%208.8%203.185.5%201.026.654%202.116.59%203.252zM6.098%2029.23h5.092v-.61H6.098v.61zm4.569%202.592H6.62c-.488%200-.577-.104-.514-.631h5.069c.07.519-.022.63-.508.63zm5.99-17.957c-1.392-3.063-3.808-4.764-7.091-5.157-2.796-.336-5.228.589-7.21%202.584C.143%2013.52-.388%2016.245.254%2019.258c.337%201.575%201.103%202.945%202.02%204.243.42.597.833%201.202%201.22%201.82.356.574.61%201.2.634%201.882.03.786.008%201.573.008%202.36h.03c0%20.653%200%201.306.002%201.959.006%201.164.914%202.147%202.065%202.223.15.01.202.054.239.207a2.232%202.232%200%200%200%202.16%201.732c1.042.001%201.928-.698%202.183-1.738.033-.136.07-.189.216-.2a2.245%202.245%200%200%200%202.088-2.258c0-1.216.01-2.432-.003-3.65-.011-.909.199-1.755.678-2.523.386-.619.798-1.225%201.222-1.817%201.212-1.698%202.07-3.531%202.23-5.649.105-1.376-.017-2.722-.59-3.984z%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3Cpath%20d%3D%22M8.732%2015.614a.31.31%200%200%200-.184%200L4.596%2016.67a.356.356%200%200%200-.276.351c.018%202.834%201.526%205.464%204.118%207.223a.37.37%200%200%200%20.202.056.37.37%200%200%200%20.202-.056c2.592-1.76%204.1-4.389%204.118-7.223a.356.356%200%200%200-.276-.351l-3.952-1.056z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%221.44%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildSmartBlockingIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2218%22%20height%3D%2236%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.04%20.32)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.338%2017.571c-.093%201.622-.669%203.052-1.588%204.364-.413.591-.832%201.177-1.233%201.779-.573.858-1.032%201.77-1.208%202.801-.03.17-.136.157-.253.157l-2.424-.001c-.798%200-1.597-.005-2.396.003-.175.002-.237-.048-.272-.23-.19-.997-.632-1.889-1.192-2.724-.477-.709-.974-1.405-1.453-2.114a8.02%208.02%200%200%201-1.388-4.265c-.108-2.725%201.427-5.103%204.017-6.207%203.32-1.413%207.245.005%208.8%203.185.5%201.026.654%202.116.59%203.252zM6.098%2029.23h5.092v-.61H6.098v.61zm4.569%202.592H6.62c-.488%200-.577-.104-.514-.631h5.069c.07.519-.022.63-.508.63zm5.99-17.957c-1.392-3.063-3.808-4.764-7.091-5.157-2.796-.336-5.228.589-7.21%202.584C.143%2013.52-.388%2016.245.254%2019.258c.337%201.575%201.103%202.945%202.02%204.243.42.597.833%201.202%201.22%201.82.356.574.61%201.2.634%201.882.03.786.008%201.573.008%202.36h.03c0%20.653%200%201.306.002%201.959.006%201.164.914%202.147%202.065%202.223.15.01.202.054.239.207a2.232%202.232%200%200%200%202.16%201.732c1.042.001%201.928-.698%202.183-1.738.033-.136.07-.189.216-.2a2.245%202.245%200%200%200%202.088-2.258c0-1.216.01-2.432-.003-3.65-.011-.909.199-1.755.678-2.523.386-.619.798-1.225%201.222-1.817%201.212-1.698%202.07-3.531%202.23-5.649.105-1.376-.017-2.722-.59-3.984z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Cpath%20d%3D%22M8.732%2015.614a.31.31%200%200%200-.184%200L4.596%2016.67a.356.356%200%200%200-.276.351c.018%202.834%201.526%205.464%204.118%207.223a.37.37%200%200%200%20.202.056.37.37%200%200%200%20.202-.056c2.592-1.76%204.1-4.389%204.118-7.223a.356.356%200%200%200-.276-.351l-3.952-1.056z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221.44%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildSmartBlockingActiveIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2218%22%20height%3D%2236%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.04%20.32)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.338%2017.571c-.093%201.622-.669%203.052-1.588%204.364-.413.591-.832%201.177-1.233%201.779-.573.858-1.032%201.77-1.208%202.801-.03.17-.136.157-.253.157l-2.424-.001c-.798%200-1.597-.005-2.396.003-.175.002-.237-.048-.272-.23-.19-.997-.632-1.889-1.192-2.724-.477-.709-.974-1.405-1.453-2.114a8.02%208.02%200%200%201-1.388-4.265c-.108-2.725%201.427-5.103%204.017-6.207%203.32-1.413%207.245.005%208.8%203.185.5%201.026.654%202.116.59%203.252zM6.098%2029.23h5.092v-.61H6.098v.61zm4.569%202.592H6.62c-.488%200-.577-.104-.514-.631h5.069c.07.519-.022.63-.508.63zm5.99-17.957c-1.392-3.063-3.808-4.764-7.091-5.157-2.796-.336-5.228.589-7.21%202.584C.143%2013.52-.388%2016.245.254%2019.258c.337%201.575%201.103%202.945%202.02%204.243.42.597.833%201.202%201.22%201.82.356.574.61%201.2.634%201.882.03.786.008%201.573.008%202.36h.03c0%20.653%200%201.306.002%201.959.006%201.164.914%202.147%202.065%202.223.15.01.202.054.239.207a2.232%202.232%200%200%200%202.16%201.732c1.042.001%201.928-.698%202.183-1.738.033-.136.07-.189.216-.2a2.245%202.245%200%200%200%202.088-2.258c0-1.216.01-2.432-.003-3.65-.011-.909.199-1.755.678-2.523.386-.619.798-1.225%201.222-1.817%201.212-1.698%202.07-3.531%202.23-5.649.105-1.376-.017-2.722-.59-3.984z%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3Cpath%20d%3D%22M8.732%2015.614a.31.31%200%200%200-.184%200L4.596%2016.67a.356.356%200%200%200-.276.351c.018%202.834%201.526%205.464%204.118%207.223a.37.37%200%200%200%20.202.056.37.37%200%200%200%20.202-.056c2.592-1.76%204.1-4.389%204.118-7.223a.356.356%200%200%200-.276-.351l-3.952-1.056z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%221.44%22/%3E%3Ccircle%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20cx%3D%228.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildSmartBlockingActiveIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2218%22%20height%3D%2236%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.04%20.32)%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M15.338%2017.571c-.093%201.622-.669%203.052-1.588%204.364-.413.591-.832%201.177-1.233%201.779-.573.858-1.032%201.77-1.208%202.801-.03.17-.136.157-.253.157l-2.424-.001c-.798%200-1.597-.005-2.396.003-.175.002-.237-.048-.272-.23-.19-.997-.632-1.889-1.192-2.724-.477-.709-.974-1.405-1.453-2.114a8.02%208.02%200%200%201-1.388-4.265c-.108-2.725%201.427-5.103%204.017-6.207%203.32-1.413%207.245.005%208.8%203.185.5%201.026.654%202.116.59%203.252zM6.098%2029.23h5.092v-.61H6.098v.61zm4.569%202.592H6.62c-.488%200-.577-.104-.514-.631h5.069c.07.519-.022.63-.508.63zm5.99-17.957c-1.392-3.063-3.808-4.764-7.091-5.157-2.796-.336-5.228.589-7.21%202.584C.143%2013.52-.388%2016.245.254%2019.258c.337%201.575%201.103%202.945%202.02%204.243.42.597.833%201.202%201.22%201.82.356.574.61%201.2.634%201.882.03.786.008%201.573.008%202.36h.03c0%20.653%200%201.306.002%201.959.006%201.164.914%202.147%202.065%202.223.15.01.202.054.239.207a2.232%202.232%200%200%200%202.16%201.732c1.042.001%201.928-.698%202.183-1.738.033-.136.07-.189.216-.2a2.245%202.245%200%200%200%202.088-2.258c0-1.216.01-2.432-.003-3.65-.011-.909.199-1.755.678-2.523.386-.619.798-1.225%201.222-1.817%201.212-1.698%202.07-3.531%202.23-5.649.105-1.376-.017-2.722-.59-3.984z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Cpath%20d%3D%22M8.732%2015.614a.31.31%200%200%200-.184%200L4.596%2016.67a.356.356%200%200%200-.276.351c.018%202.834%201.526%205.464%204.118%207.223a.37.37%200%200%200%20.202.056.37.37%200%200%200%20.202-.056c2.592-1.76%204.1-4.389%204.118-7.223a.356.356%200%200%200-.276-.351l-3.952-1.056z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221.44%22/%3E%3Ccircle%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20cx%3D%228.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildGhosteryRewardsIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2219%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.56%20.92)%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.45%2019.898h2.91v-3.526H7.45v3.526zm2.64-4.9l.043.113c1.183-.081%202.385-.056%203.544-.27%201.372-.25%201.891-1.698%201.152-2.873-.64-1.014-2.272-1.22-2.926-.307-.559.78-1%201.645-1.472%202.487-.148.264-.229.566-.34.85zm-2.336.088c-.178-.589-1.168-2.508-1.57-3.06a3.687%203.687%200%200%200-.152-.202%201.896%201.896%200%200%200-3.26.47c-.422%201.02.179%202.32%201.173%202.537%201.248.27%202.52.175%203.81.255zm3.79%204.794h5.09v-3.513h-5.09v3.513zm-10.356.02h5.103v-3.536H1.188v3.537zM7.44%2030.492h2.909v-9.42H7.44v9.42zm4.112.049h4.232v-9.475h-4.232v9.475zm-9.514-.049h4.25v-9.43h-4.25v9.43zM.895%2021.127c-.75-.198-.904-.097-.895-1.17.01-1.315.002-2.63.003-3.946%200-.616.166-.781.786-.781.433%200%20.865.001%201.297-.001.089%200%20.177-.01.24-.015-.22-.386-.48-.736-.629-1.129a3.03%203.03%200%200%201%201.424-3.733c1.38-.718%203.01-.313%203.912.99.684.992%201.21%202.072%201.688%203.176.047.109.1.216.18.385.11-.236.202-.415.28-.597.435-.988.892-1.964%201.514-2.854.542-.772%201.232-1.297%202.196-1.422%201.569-.203%203.079.919%203.339%202.485.152.916-.078%201.727-.61%202.47l-.17.234c.092.013.157.032.224.032.498-.003.997-.005%201.494-.013.373-.007.613.204.614.575.005%201.55.004%203.101%200%204.652%200%20.314-.195.52-.516.564-.11.017-.22.02-.362.031v9.675c0%20.112.002.226-.005.337-.03.385-.17.535-.549.593-.12.017-.244.017-.366.017l-14.18.001c-.075%200-.151.002-.226-.002-.515-.03-.683-.203-.683-.724v-9.83z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildGhosteryRewardsIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2219%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.56%20.92)%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.45%2019.898h2.91v-3.526H7.45v3.526zm2.64-4.9l.043.113c1.183-.081%202.385-.056%203.544-.27%201.372-.25%201.891-1.698%201.152-2.873-.64-1.014-2.272-1.22-2.926-.307-.559.78-1%201.645-1.472%202.487-.148.264-.229.566-.34.85zm-2.336.088c-.178-.589-1.168-2.508-1.57-3.06a3.687%203.687%200%200%200-.152-.202%201.896%201.896%200%200%200-3.26.47c-.422%201.02.179%202.32%201.173%202.537%201.248.27%202.52.175%203.81.255zm3.79%204.794h5.09v-3.513h-5.09v3.513zm-10.356.02h5.103v-3.536H1.188v3.537zM7.44%2030.492h2.909v-9.42H7.44v9.42zm4.112.049h4.232v-9.475h-4.232v9.475zm-9.514-.049h4.25v-9.43h-4.25v9.43zM.895%2021.127c-.75-.198-.904-.097-.895-1.17.01-1.315.002-2.63.003-3.946%200-.616.166-.781.786-.781.433%200%20.865.001%201.297-.001.089%200%20.177-.01.24-.015-.22-.386-.48-.736-.629-1.129a3.03%203.03%200%200%201%201.424-3.733c1.38-.718%203.01-.313%203.912.99.684.992%201.21%202.072%201.688%203.176.047.109.1.216.18.385.11-.236.202-.415.28-.597.435-.988.892-1.964%201.514-2.854.542-.772%201.232-1.297%202.196-1.422%201.569-.203%203.079.919%203.339%202.485.152.916-.078%201.727-.61%202.47l-.17.234c.092.013.157.032.224.032.498-.003.997-.005%201.494-.013.373-.007.613.204.614.575.005%201.55.004%203.101%200%204.652%200%20.314-.195.52-.516.564-.11.017-.22.02-.362.031v9.675c0%20.112.002.226-.005.337-.03.385-.17.535-.549.593-.12.017-.244.017-.366.017l-14.18.001c-.075%200-.151.002-.226-.002-.515-.03-.683-.203-.683-.724v-9.83z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildGhosteryRewardsActiveIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2219%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.56%20.92)%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.45%2019.898h2.91v-3.526H7.45v3.526zm2.64-4.9l.043.113c1.183-.081%202.385-.056%203.544-.27%201.372-.25%201.891-1.698%201.152-2.873-.64-1.014-2.272-1.22-2.926-.307-.559.78-1%201.645-1.472%202.487-.148.264-.229.566-.34.85zm-2.336.088c-.178-.589-1.168-2.508-1.57-3.06a3.687%203.687%200%200%200-.152-.202%201.896%201.896%200%200%200-3.26.47c-.422%201.02.179%202.32%201.173%202.537%201.248.27%202.52.175%203.81.255zm3.79%204.794h5.09v-3.513h-5.09v3.513zm-10.356.02h5.103v-3.536H1.188v3.537zM7.44%2030.492h2.909v-9.42H7.44v9.42zm4.112.049h4.232v-9.475h-4.232v9.475zm-9.514-.049h4.25v-9.43h-4.25v9.43zM.895%2021.127c-.75-.198-.904-.097-.895-1.17.01-1.315.002-2.63.003-3.946%200-.616.166-.781.786-.781.433%200%20.865.001%201.297-.001.089%200%20.177-.01.24-.015-.22-.386-.48-.736-.629-1.129a3.03%203.03%200%200%201%201.424-3.733c1.38-.718%203.01-.313%203.912.99.684.992%201.21%202.072%201.688%203.176.047.109.1.216.18.385.11-.236.202-.415.28-.597.435-.988.892-1.964%201.514-2.854.542-.772%201.232-1.297%202.196-1.422%201.569-.203%203.079.919%203.339%202.485.152.916-.078%201.727-.61%202.47l-.17.234c.092.013.157.032.224.032.498-.003.997-.005%201.494-.013.373-.007.613.204.614.575.005%201.55.004%203.101%200%204.652%200%20.314-.195.52-.516.564-.11.017-.22.02-.362.031v9.675c0%20.112.002.226-.005.337-.03.385-.17.535-.549.593-.12.017-.244.017-.366.017l-14.18.001c-.075%200-.151.002-.226-.002-.515-.03-.683-.203-.683-.724v-9.83z%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22/%3E%3Ccircle%20cx%3D%228.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildGhosteryRewardsActiveIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2219%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20transform%3D%22translate(.56%20.92)%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.45%2019.898h2.91v-3.526H7.45v3.526zm2.64-4.9l.043.113c1.183-.081%202.385-.056%203.544-.27%201.372-.25%201.891-1.698%201.152-2.873-.64-1.014-2.272-1.22-2.926-.307-.559.78-1%201.645-1.472%202.487-.148.264-.229.566-.34.85zm-2.336.088c-.178-.589-1.168-2.508-1.57-3.06a3.687%203.687%200%200%200-.152-.202%201.896%201.896%200%200%200-3.26.47c-.422%201.02.179%202.32%201.173%202.537%201.248.27%202.52.175%203.81.255zm3.79%204.794h5.09v-3.513h-5.09v3.513zm-10.356.02h5.103v-3.536H1.188v3.537zM7.44%2030.492h2.909v-9.42H7.44v9.42zm4.112.049h4.232v-9.475h-4.232v9.475zm-9.514-.049h4.25v-9.43h-4.25v9.43zM.895%2021.127c-.75-.198-.904-.097-.895-1.17.01-1.315.002-2.63.003-3.946%200-.616.166-.781.786-.781.433%200%20.865.001%201.297-.001.089%200%20.177-.01.24-.015-.22-.386-.48-.736-.629-1.129a3.03%203.03%200%200%201%201.424-3.733c1.38-.718%203.01-.313%203.912.99.684.992%201.21%202.072%201.688%203.176.047.109.1.216.18.385.11-.236.202-.415.28-.597.435-.988.892-1.964%201.514-2.854.542-.772%201.232-1.297%202.196-1.422%201.569-.203%203.079.919%203.339%202.485.152.916-.078%201.727-.61%202.47l-.17.234c.092.013.157.032.224.032.498-.003.997-.005%201.494-.013.373-.007.613.204.614.575.005%201.55.004%203.101%200%204.652%200%20.314-.195.52-.516.564-.11.017-.22.02-.362.031v9.675c0%20.112.002.226-.005.337-.03.385-.17.535-.549.593-.12.017-.244.017-.366.017l-14.18.001c-.075%200-.151.002-.226-.002-.515-.03-.683-.203-.683-.724v-9.83z%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22/%3E%3Ccircle%20cx%3D%228.92%22%20cy%3D%221.92%22%20r%3D%221.92%22/%3E%3C/g%3E%3C/svg%3E');
}
// Used in Setup Done View
-@function buildFeatureTutorialIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2248%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/svg%3E');
+@function buildFeatureTutorialIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2248%22%20height%3D%2245%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M46.92%2038.41L17.702%2010.42c-.747-.715-1.653-1.022-2.613-1.022s-1.92.358-2.612%201.022l-.587.562a3.5%203.5%200%200%200%200%205.057l29.165%2027.94c.747.715%201.653%201.021%202.613%201.021s1.92-.358%202.612-1.022l.64-.51c1.44-1.43%201.44-3.678%200-5.057zM13.33%2012.413l.586-.562c.32-.306.693-.46%201.12-.46.426%200%20.853.154%201.12.46l4.052%203.882-2.826%202.707-4.052-3.882c-.587-.562-.587-1.532%200-2.145zm32.044%2029.574l-.586.562c-.32.307-.694.46-1.12.46-.427%200-.853-.153-1.12-.46l-23.62-22.627%202.826-2.708%2023.673%2022.68a1.423%201.423%200%200%201-.053%202.093zM26.5%206.896c2.08%200%203.733%202.196%203.733%204.086%200%20.562.48%201.021%201.066%201.021.586%200%201.066-.46%201.066-1.021%200-1.89%201.6-4.086%203.733-4.086.586%200%201.066-.46%201.066-1.022s-.48-1.022-1.066-1.022c-2.026%200-3.733-1.583-3.733-3.575%200-.562-.48-1.022-1.066-1.022-.587%200-1.066.46-1.066%201.022%200%201.94-1.653%203.575-3.733%203.575-.586%200-1.066.46-1.066%201.022s.48%201.022%201.066%201.022zm4.746-2.401c.426.562.96%201.073%201.546%201.43-.587.409-1.12.97-1.546%201.584-.427-.613-.96-1.175-1.547-1.584.64-.357%201.12-.868%201.547-1.43zm-15.57%2027.378c-1.332%200-2.452-1.073-2.452-2.35%200-.562-.48-1.021-1.066-1.021-.587%200-1.067.46-1.067%201.021%200%201.277-1.12%202.35-2.452%202.35-.587%200-1.067.46-1.067%201.021%200%20.562.48%201.022%201.067%201.022%201.28%200%202.452%201.328%202.452%202.707%200%20.562.48%201.022%201.067%201.022.586%200%201.066-.46%201.066-1.022%200-1.379%201.173-2.707%202.453-2.707.586%200%201.066-.46%201.066-1.022%200-.561-.48-1.021-1.066-1.021zm-3.518%201.788c-.214-.256-.427-.511-.694-.715.267-.205.48-.41.694-.613.213.255.426.46.693.613-.267.255-.533.46-.693.715zM9.277%205.414c.587%200%201.067-.46%201.067-1.021%200-.562-.48-1.022-1.067-1.022-1.333%200-2.452-1.072-2.452-2.35C6.825.46%206.345%200%205.758%200c-.586%200-1.066.46-1.066%201.022%200%201.277-1.12%202.35-2.453%202.35-.586%200-1.066.459-1.066%201.02%200%20.563.48%201.022%201.066%201.022%201.28%200%202.453%201.328%202.453%202.707%200%20.562.48%201.022%201.066%201.022.587%200%201.067-.46%201.067-1.022%200-1.379%201.173-2.707%202.452-2.707zM5.758%205.16c-.213-.255-.426-.51-.693-.715.267-.204.48-.409.693-.613.214.255.427.46.694.613-.267.255-.48.46-.694.715zm-.64%2017.162c0%20.562-.48%201.022-1.066%201.022-.213%200-.426.306-.426.613%200%20.562-.48%201.021-1.067%201.021-.586%200-1.066-.46-1.066-1.021%200-.307-.267-.613-.427-.613C.48%2023.343%200%2022.883%200%2022.32S.48%2021.3%201.066%2021.3a.412.412%200%200%200%20.427-.409c0-.562.48-1.022%201.066-1.022.587%200%201.067.46%201.067%201.022%200%20.255.213.409.426.409.64%200%201.067.46%201.067%201.021z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22/%3E%3C/svg%3E');
}
-@function buildFeatureSupporterIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.561%201.492c1.084-.255%202.176.406%202.435%201.475a1.982%201.982%200%200%201-.91%202.156c.01.022.024.04.03.064l.425%201.755c4.167-3.811%209.686-1.035%209.743-1.006a.44.44%200%200%201%20.226.287l.162.669c.093.149.468.673%201.221.777.8.112%202.215-.233%204.417-2.495C26.815-1.51%2034.244%203.029%2034.32%203.076a.437.437%200%200%201-.087.783c-2.29.822-3.443%202.09-3.98%202.91%203.495.211%206.179%204.852%206.3%205.064.1.176.066.396-.083.535a.448.448%200%200%201-.546.049c-.037-.023-3.72-2.28-8.97%202.209-4.052%203.465-8.989%205.065-11.425%205.065-.512%200-.915-.07-1.175-.21-.351-.189-.524-.503-.473-.862.139-.994-.484-1.795-.69-2.03-3.646.278-5.613%202.239-5.715%202.344-.007.007-.017.01-.025.017l4.158%2017.161a.439.439%200%200%201-.433.54.444.444%200%200%201-.432-.336L3.257%205.414a2.02%202.02%200%200%201-2.19-1.518A1.997%201.997%200%200%201%202.56%201.492zm12.203%2017.215c.697.558%206.562-.43%2011.607-4.744%203.849-3.292%206.963-3.25%208.654-2.828-1.075-1.465-3.18-3.8-5.469-3.462a.45.45%200%200%201-.417-.167.434.434%200%200%201-.056-.44c.321-.74%201.318-2.466%203.946-3.667a11.554%2011.554%200%200%200-3.354-.94c-3.267-.386-6.202.73-8.724%203.323-1.988%202.042-3.74%202.967-5.204%202.753a2.57%202.57%200%200%201-.731-.226l1.923%207.94a.436.436%200%200%201-.111.405.447.447%200%200%201-.406.127%2012.66%2012.66%200%200%200-2.163-.225c.309.504.62%201.259.505%202.151zm1.154-2.9l-2.223-9.176c-.953-.425-5.551-2.2-8.912%201.31l2.432%2010.04c1.01-.842%203.981-2.847%208.703-2.174zM1.932%203.692c.144.6.757.973%201.362.827.606-.143.982-.747.837-1.346-.145-.6-.76-.97-1.363-.827a1.118%201.118%200%200%200-.836%201.346z%22%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%221.1%22/%3E%3C/svg%3E');
+@function buildFeatureSupporterIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M2.561%201.492c1.084-.255%202.176.406%202.435%201.475a1.982%201.982%200%200%201-.91%202.156c.01.022.024.04.03.064l.425%201.755c4.167-3.811%209.686-1.035%209.743-1.006a.44.44%200%200%201%20.226.287l.162.669c.093.149.468.673%201.221.777.8.112%202.215-.233%204.417-2.495C26.815-1.51%2034.244%203.029%2034.32%203.076a.437.437%200%200%201-.087.783c-2.29.822-3.443%202.09-3.98%202.91%203.495.211%206.179%204.852%206.3%205.064.1.176.066.396-.083.535a.448.448%200%200%201-.546.049c-.037-.023-3.72-2.28-8.97%202.209-4.052%203.465-8.989%205.065-11.425%205.065-.512%200-.915-.07-1.175-.21-.351-.189-.524-.503-.473-.862.139-.994-.484-1.795-.69-2.03-3.646.278-5.613%202.239-5.715%202.344-.007.007-.017.01-.025.017l4.158%2017.161a.439.439%200%200%201-.433.54.444.444%200%200%201-.432-.336L3.257%205.414a2.02%202.02%200%200%201-2.19-1.518A1.997%201.997%200%200%201%202.56%201.492zm12.203%2017.215c.697.558%206.562-.43%2011.607-4.744%203.849-3.292%206.963-3.25%208.654-2.828-1.075-1.465-3.18-3.8-5.469-3.462a.45.45%200%200%201-.417-.167.434.434%200%200%201-.056-.44c.321-.74%201.318-2.466%203.946-3.667a11.554%2011.554%200%200%200-3.354-.94c-3.267-.386-6.202.73-8.724%203.323-1.988%202.042-3.74%202.967-5.204%202.753a2.57%202.57%200%200%201-.731-.226l1.923%207.94a.436.436%200%200%201-.111.405.447.447%200%200%201-.406.127%2012.66%2012.66%200%200%200-2.163-.225c.309.504.62%201.259.505%202.151zm1.154-2.9l-2.223-9.176c-.953-.425-5.551-2.2-8.912%201.31l2.432%2010.04c1.01-.842%203.981-2.847%208.703-2.174zM1.932%203.692c.144.6.757.973%201.362.827.606-.143.982-.747.837-1.346-.145-.6-.76-.97-1.363-.827a1.118%201.118%200%200%200-.836%201.346z%22%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%221.1%22/%3E%3C/svg%3E');
}
-@function buildFeatureProductsIcon($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2228%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M25.86%2026.908c-1.21-2.86-1.418-5.284-1.45-6.236v-7.835C24.41%206.852%2019.667%202%2013.817%202S3.224%206.852%203.224%2012.837v7.948c-.045%201.025-.283%203.374-1.446%206.123-1.563%203.694-.27%203.254.89%202.95%201.158-.303%203.746-1.49%204.554-.028.809%201.461%201.483%202.73%203.37%201.902%201.886-.826%202.775-1.102%203.044-1.102h.367c.269%200%201.158.276%203.045%201.102%201.886.828%202.56-.441%203.369-1.902.808-1.461%203.395-.275%204.554.028%201.16.304%202.453.744.89-2.95%22/%3E%3Cpath%20d%3D%22M26.165%2026.908c-1.21-2.86-1.418-5.284-1.45-6.236v-7.835C24.714%206.852%2019.971%202%2014.121%202S3.529%206.852%203.529%2012.837v7.948c-.046%201.025-.283%203.374-1.446%206.123-1.564%203.694-.27%203.254.889%202.95%201.159-.303%203.746-1.49%204.555-.028.808%201.461%201.482%202.73%203.369%201.902%201.886-.826%202.775-1.102%203.045-1.102h.366c.27%200%201.159.276%203.045%201.102%201.887.828%202.56-.441%203.37-1.902.807-1.461%203.395-.275%204.554.028%201.159.304%202.452.744.889-2.95%22%20stroke%3D%22#{_url-friendly-color($stroke-color)}%22%20stroke-width%3D%222.081%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%3E%3Cpath%20d%3D%22M10.733%206.5c1.149%200%202.08%201.482%202.08%203.312%200%201.829-.931%203.312-2.08%203.312-1.148%200-2.08-1.483-2.08-3.312%200-1.83.932-3.313%202.08-3.313M13.957%2019.618c-2.531%200-4.661-2.506-5.303-5.296%201.24%201.716%203.153%202.818%205.303%202.818%202.149%200%204.062-1.102%205.302-2.818-.642%202.79-2.772%205.296-5.302%205.296M17.393%2013.124c-1.15%200-2.08-1.483-2.08-3.312%200-1.83.93-3.313%202.08-3.313%201.149%200%202.079%201.483%202.079%203.313%200%201.829-.93%203.312-2.08%203.312%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+@function buildFeatureProductsIcon($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20width%3D%2228%22%20height%3D%2234%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M25.86%2026.908c-1.21-2.86-1.418-5.284-1.45-6.236v-7.835C24.41%206.852%2019.667%202%2013.817%202S3.224%206.852%203.224%2012.837v7.948c-.045%201.025-.283%203.374-1.446%206.123-1.563%203.694-.27%203.254.89%202.95%201.158-.303%203.746-1.49%204.554-.028.809%201.461%201.483%202.73%203.37%201.902%201.886-.826%202.775-1.102%203.044-1.102h.367c.269%200%201.158.276%203.045%201.102%201.886.828%202.56-.441%203.369-1.902.808-1.461%203.395-.275%204.554.028%201.16.304%202.453.744.89-2.95%22/%3E%3Cpath%20d%3D%22M26.165%2026.908c-1.21-2.86-1.418-5.284-1.45-6.236v-7.835C24.714%206.852%2019.971%202%2014.121%202S3.529%206.852%203.529%2012.837v7.948c-.046%201.025-.283%203.374-1.446%206.123-1.564%203.694-.27%203.254.889%202.95%201.159-.303%203.746-1.49%204.555-.028.808%201.461%201.482%202.73%203.369%201.902%201.886-.826%202.775-1.102%203.045-1.102h.366c.27%200%201.159.276%203.045%201.102%201.887.828%202.56-.441%203.37-1.902.807-1.461%203.395-.275%204.554.028%201.159.304%202.452.744.889-2.95%22%20stroke%3D%22#{_url-friendly-color($primary-color)}%22%20stroke-width%3D%222.081%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%3E%3Cpath%20d%3D%22M10.733%206.5c1.149%200%202.08%201.482%202.08%203.312%200%201.829-.931%203.312-2.08%203.312-1.148%200-2.08-1.483-2.08-3.312%200-1.83.932-3.313%202.08-3.313M13.957%2019.618c-2.531%200-4.661-2.506-5.303-5.296%201.24%201.716%203.153%202.818%205.303%202.818%202.149%200%204.062-1.102%205.302-2.818-.642%202.79-2.772%205.296-5.302%205.296M17.393%2013.124c-1.15%200-2.08-1.483-2.08-3.312%200-1.83.93-3.313%202.08-3.313%201.149%200%202.079%201.483%202.079%203.313%200%201.829-.93%203.312-2.08%203.312%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
// Used in RewardsView
-@function buildIconLightBulb($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2272%22%20height%3D%2280%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2236%22%20fill%3D%22#DAF4FF%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M11.918%2016.192C17.24%2010.63%2024.253%207.045%2031.751%206.057c.604%201.977%202.297%203.584%204.474%203.584%202.54%200%204.716-2.101%204.716-4.82C40.941%202.1%2038.885%200%2036.225%200c-2.419%200-4.353%201.854-4.595%204.203-7.982.988-15.48%204.82-21.042%2010.63l1.33%201.36zM36.225%201.854c1.572%200%202.902%201.36%202.902%202.967%200%201.606-1.33%202.966-2.902%202.966s-2.902-1.36-2.902-2.966c0-1.73%201.33-2.967%202.902-2.967zM1.49%2049.984l1.74-.484c-.994-3.153-1.366-6.307-1.366-9.582%200-4.487.87-8.975%202.608-13.099.372.121.869.121%201.242.121%201.738%200%203.353-.849%204.222-2.304%201.366-2.305.497-5.094-1.739-6.428-.745-.364-1.614-.607-2.483-.607-1.74%200-3.353.85-4.223%202.305-.497.97-.745%202.304-.372%203.517.248.97.869%201.82%201.738%202.426A35.511%2035.511%200%200%200%200%2039.796c0%203.396.497%206.913%201.49%2010.188zm1.739-29.23c.497-.85%201.49-1.456%202.608-1.456.496%200%20.993.121%201.49.364%201.366.849%201.863%202.547%201.118%204.003-.87%201.334-2.732%201.819-4.099.97-.745-.364-1.117-.97-1.366-1.82-.248-.606-.124-1.455.249-2.061zm5.554%2040.004a4.409%204.409%200%200%200%201.227-2.05c.369-1.205.123-2.411-.49-3.496-.86-1.447-2.455-2.412-4.173-2.412-.86%200-1.595.241-2.332.603-2.209%201.206-2.945%204.1-1.718%206.39.86%201.448%202.455%202.412%204.173%202.412a5%205%200%200%200%201.84-.362c4.787%206.15%2011.414%2010.732%2019.023%2012.781l.49-1.688c-7.117-2.05-13.499-6.39-18.04-12.178zm-5.89-1.929c-.737-1.326-.246-3.135%201.104-3.979.49-.241.982-.362%201.473-.362%201.104%200%202.086.603%202.577%201.447.368.724.49%201.447.245%202.17a3.128%203.128%200%200%201-1.35%201.689c-1.35.964-3.19.361-4.05-.965zm57.417%205.235a34.522%2034.522%200%200%201-19.827%209.68c-.245-.726-.612-1.452-1.224-2.057-.857-.847-2.08-1.452-3.427-1.452-2.57%200-4.773%202.057-4.773%204.598s2.08%204.72%204.65%204.72c2.448%200%204.407-1.816%204.652-4.115%207.955-.968%2015.298-4.598%2021.05-10.285l-1.1-1.089zM35.954%2077.98v.847-.847c-1.59%200-2.937-1.33-2.937-2.904%200-1.573%201.346-2.904%202.937-2.904.735%200%201.47.363%202.081.847.49.605.857%201.331.857%202.057%200%201.573-1.346%202.904-2.938%202.904zm27.382-58.639c-1.442%201.454-1.923%203.755-.841%205.693.841%201.453%202.403%202.422%204.085%202.422.842%200%201.563-.242%202.284-.605%202.283-1.212%203.124-4.118%201.802-6.42-.841-1.453-2.403-2.422-4.086-2.422-.6%200-1.201.121-1.682.363-4.926-6.661-12.016-11.506-19.947-13.444l-.48%201.817c7.57%201.817%2014.299%206.298%2018.865%2012.596zm5.768%201.938c.72%201.332.24%203.15-1.082%203.876-1.321.727-3.124.242-3.845-1.09-.72-1.332-.24-3.15%201.082-3.876a3.18%203.18%200%200%201%201.442-.363c.96%200%201.922.605%202.403%201.453zm.026%2033.002C71.042%2049.791%2072%2045.056%2072%2040.08c0-3.035-.359-6.19-1.196-9.104l-1.794.486a34.712%2034.712%200%200%201%201.076%208.618c0%204.612-.957%209.103-2.75%2013.351-.36-.12-.838-.12-1.317-.12-1.674%200-3.11.849-3.947%202.305-1.316%202.185-.598%205.098%201.555%206.433.718.486%201.555.607%202.392.607%201.675%200%203.11-.85%203.948-2.306.598-1.092.837-2.306.478-3.52.12-.97-.478-1.82-1.316-2.549zm-.48%205.22c-.717%201.335-2.63%201.82-3.946.97-1.316-.85-1.795-2.548-.957-4.005a2.908%202.908%200%200%201%202.512-1.457c.478%200%20.956.122%201.435.365.598.364%201.076.97%201.316%201.82.239.85.12%201.578-.36%202.306zm-28.848%205.267c1.573%200%202.782-1.087%203.145-2.657%200-.363.12-.725.12-1.33h1.694V58.97H43.19c0-.121.242-1.088.242-1.57h2.902v-1.813h-2.418c.967-4.228%202.54-8.215%204.595-11.718.121-.242.242-.363.363-.604%201.452-2.416%202.056-5.195%201.935-8.094-.362-7.49-6.289-13.53-13.787-14.014-8.709-.604-15.845%206.282-15.845%2014.86%200%201.69.242%203.261.847%204.952l1.33%202.537c.242.363.363.604.605.967l.121.12c1.935%203.383%203.266%207.128%204.233%2010.994h-2.66v1.812h3.023c.121.363.121.967.242%201.57h-1.572v1.813h1.814v.604l.12.966v.242a3.296%203.296%200%200%200%203.025%202.054h7.498v.12zM25.41%2043.506c-.242-.362-.363-.725-.605-.966l-1.21-2.416c-.483-1.33-.725-2.779-.725-4.35%200-7.49%206.289-13.53%2013.909-13.046%206.53.483%2011.731%205.677%2012.094%2012.322a13.602%2013.602%200%200%201-1.572%207.007l-.12.12c-.122.242-.243.363-.364.604-2.177%203.746-3.87%208.095-4.959%2012.685H29.764c-.726-4.228-2.298-8.215-4.354-11.96zM30.368%2057.4h11.249c-.121.363-.242%201.329-.242%201.57H30.61c-.12-.603-.242-1.087-.242-1.57zm.484%204.712l-.12-.846v-.483h10.522c0%20.483-.121.845-.121%201.087-.121.604-.726%201.087-1.33%201.087h-7.62c-.605%200-1.089-.362-1.33-.845z%22/%3E%3Cpath%20d%3D%22M48.936%2050.676l-1.972-2.02%201.51-1.476%201.974%202.02zm5.785-8.093l-2.719-.763.57-2.034%202.72.763zm-1.997-11.929l2.736-.699.522%202.047-2.736.698zm-1.564-8.005l-2.02%201.973-1.476-1.51%202.02-1.974zm-9.227-2.703l-2.039-.572.761-2.712%202.04.573zm-9.147-1.244l-2.052.524-.697-2.728%202.052-.524zm-8.103%204.094l-1.516%201.48L21.2%2022.26l1.515-1.48zm-8.325%208.819l.572-2.039%202.712.761-.573%202.04zm.54%209.888l-.524-2.052%202.728-.697.524%202.052zm3.942%207.659l2.018-1.976%201.478%201.509-2.018%201.976z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+@function buildIconLightBulb($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2272%22%20height%3D%2280%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20cx%3D%2236%22%20cy%3D%2236%22%20r%3D%2236%22%20fill%3D%22#{_url-friendly-color($secondary-color)}%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M11.918%2016.192C17.24%2010.63%2024.253%207.045%2031.751%206.057c.604%201.977%202.297%203.584%204.474%203.584%202.54%200%204.716-2.101%204.716-4.82C40.941%202.1%2038.885%200%2036.225%200c-2.419%200-4.353%201.854-4.595%204.203-7.982.988-15.48%204.82-21.042%2010.63l1.33%201.36zM36.225%201.854c1.572%200%202.902%201.36%202.902%202.967%200%201.606-1.33%202.966-2.902%202.966s-2.902-1.36-2.902-2.966c0-1.73%201.33-2.967%202.902-2.967zM1.49%2049.984l1.74-.484c-.994-3.153-1.366-6.307-1.366-9.582%200-4.487.87-8.975%202.608-13.099.372.121.869.121%201.242.121%201.738%200%203.353-.849%204.222-2.304%201.366-2.305.497-5.094-1.739-6.428-.745-.364-1.614-.607-2.483-.607-1.74%200-3.353.85-4.223%202.305-.497.97-.745%202.304-.372%203.517.248.97.869%201.82%201.738%202.426A35.511%2035.511%200%200%200%200%2039.796c0%203.396.497%206.913%201.49%2010.188zm1.739-29.23c.497-.85%201.49-1.456%202.608-1.456.496%200%20.993.121%201.49.364%201.366.849%201.863%202.547%201.118%204.003-.87%201.334-2.732%201.819-4.099.97-.745-.364-1.117-.97-1.366-1.82-.248-.606-.124-1.455.249-2.061zm5.554%2040.004a4.409%204.409%200%200%200%201.227-2.05c.369-1.205.123-2.411-.49-3.496-.86-1.447-2.455-2.412-4.173-2.412-.86%200-1.595.241-2.332.603-2.209%201.206-2.945%204.1-1.718%206.39.86%201.448%202.455%202.412%204.173%202.412a5%205%200%200%200%201.84-.362c4.787%206.15%2011.414%2010.732%2019.023%2012.781l.49-1.688c-7.117-2.05-13.499-6.39-18.04-12.178zm-5.89-1.929c-.737-1.326-.246-3.135%201.104-3.979.49-.241.982-.362%201.473-.362%201.104%200%202.086.603%202.577%201.447.368.724.49%201.447.245%202.17a3.128%203.128%200%200%201-1.35%201.689c-1.35.964-3.19.361-4.05-.965zm57.417%205.235a34.522%2034.522%200%200%201-19.827%209.68c-.245-.726-.612-1.452-1.224-2.057-.857-.847-2.08-1.452-3.427-1.452-2.57%200-4.773%202.057-4.773%204.598s2.08%204.72%204.65%204.72c2.448%200%204.407-1.816%204.652-4.115%207.955-.968%2015.298-4.598%2021.05-10.285l-1.1-1.089zM35.954%2077.98v.847-.847c-1.59%200-2.937-1.33-2.937-2.904%200-1.573%201.346-2.904%202.937-2.904.735%200%201.47.363%202.081.847.49.605.857%201.331.857%202.057%200%201.573-1.346%202.904-2.938%202.904zm27.382-58.639c-1.442%201.454-1.923%203.755-.841%205.693.841%201.453%202.403%202.422%204.085%202.422.842%200%201.563-.242%202.284-.605%202.283-1.212%203.124-4.118%201.802-6.42-.841-1.453-2.403-2.422-4.086-2.422-.6%200-1.201.121-1.682.363-4.926-6.661-12.016-11.506-19.947-13.444l-.48%201.817c7.57%201.817%2014.299%206.298%2018.865%2012.596zm5.768%201.938c.72%201.332.24%203.15-1.082%203.876-1.321.727-3.124.242-3.845-1.09-.72-1.332-.24-3.15%201.082-3.876a3.18%203.18%200%200%201%201.442-.363c.96%200%201.922.605%202.403%201.453zm.026%2033.002C71.042%2049.791%2072%2045.056%2072%2040.08c0-3.035-.359-6.19-1.196-9.104l-1.794.486a34.712%2034.712%200%200%201%201.076%208.618c0%204.612-.957%209.103-2.75%2013.351-.36-.12-.838-.12-1.317-.12-1.674%200-3.11.849-3.947%202.305-1.316%202.185-.598%205.098%201.555%206.433.718.486%201.555.607%202.392.607%201.675%200%203.11-.85%203.948-2.306.598-1.092.837-2.306.478-3.52.12-.97-.478-1.82-1.316-2.549zm-.48%205.22c-.717%201.335-2.63%201.82-3.946.97-1.316-.85-1.795-2.548-.957-4.005a2.908%202.908%200%200%201%202.512-1.457c.478%200%20.956.122%201.435.365.598.364%201.076.97%201.316%201.82.239.85.12%201.578-.36%202.306zm-28.848%205.267c1.573%200%202.782-1.087%203.145-2.657%200-.363.12-.725.12-1.33h1.694V58.97H43.19c0-.121.242-1.088.242-1.57h2.902v-1.813h-2.418c.967-4.228%202.54-8.215%204.595-11.718.121-.242.242-.363.363-.604%201.452-2.416%202.056-5.195%201.935-8.094-.362-7.49-6.289-13.53-13.787-14.014-8.709-.604-15.845%206.282-15.845%2014.86%200%201.69.242%203.261.847%204.952l1.33%202.537c.242.363.363.604.605.967l.121.12c1.935%203.383%203.266%207.128%204.233%2010.994h-2.66v1.812h3.023c.121.363.121.967.242%201.57h-1.572v1.813h1.814v.604l.12.966v.242a3.296%203.296%200%200%200%203.025%202.054h7.498v.12zM25.41%2043.506c-.242-.362-.363-.725-.605-.966l-1.21-2.416c-.483-1.33-.725-2.779-.725-4.35%200-7.49%206.289-13.53%2013.909-13.046%206.53.483%2011.731%205.677%2012.094%2012.322a13.602%2013.602%200%200%201-1.572%207.007l-.12.12c-.122.242-.243.363-.364.604-2.177%203.746-3.87%208.095-4.959%2012.685H29.764c-.726-4.228-2.298-8.215-4.354-11.96zM30.368%2057.4h11.249c-.121.363-.242%201.329-.242%201.57H30.61c-.12-.603-.242-1.087-.242-1.57zm.484%204.712l-.12-.846v-.483h10.522c0%20.483-.121.845-.121%201.087-.121.604-.726%201.087-1.33%201.087h-7.62c-.605%200-1.089-.362-1.33-.845z%22/%3E%3Cpath%20d%3D%22M48.936%2050.676l-1.972-2.02%201.51-1.476%201.974%202.02zm5.785-8.093l-2.719-.763.57-2.034%202.72.763zm-1.997-11.929l2.736-.699.522%202.047-2.736.698zm-1.564-8.005l-2.02%201.973-1.476-1.51%202.02-1.974zm-9.227-2.703l-2.039-.572.761-2.712%202.04.573zm-9.147-1.244l-2.052.524-.697-2.728%202.052-.524zm-8.103%204.094l-1.516%201.48L21.2%2022.26l1.515-1.48zm-8.325%208.819l.572-2.039%202.712.761-.573%202.04zm.54%209.888l-.524-2.052%202.728-.697.524%202.052zm3.942%207.659l2.018-1.976%201.478%201.509-2.018%201.976z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
-@function buildIconEye($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2273%22%20height%3D%2273%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#DAF4FF%22%20d%3D%22M10%2034.895C19%2021.632%2028%2015%2037%2015s18%206.632%2027%2019.895C55%2049.632%2046%2057%2037%2057s-18-7.368-27-22.105z%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M69.503%2035.592a51.943%2051.943%200%200%201-1.133%201.618c-.09.126-.18.252-.279.369-.045.063-.206.35-.278.368%200%200%20.206-.27.08-.107-.053.071-.107.134-.161.206-.108.135-.216.279-.333.414a41.593%2041.593%200%200%201-6.095%206.077c-.135.108-.27.225-.414.333-.054.045-.108.08-.153.126l-.107.08c-.108.082-.072.055.098-.08.018.063-.665.494-.737.548-.27.198-.53.387-.809.575a41.458%2041.458%200%200%201-6.742%203.803l-.486.216c-.297.135.297-.126-.126.054-.305.126-.62.252-.935.369-.602.233-1.213.45-1.834.656a39.909%2039.909%200%200%201-3.848%201.07%2049.54%2049.54%200%200%201-1.941.395c-.342.063-.675.117-1.016.171-.135.018-.27.036-.414.063-.332.045.01%200%20.072-.009-.117.018-.225.027-.342.045-1.366.17-2.733.27-4.108.297a41.173%2041.173%200%200%201-6.158-.306l-.207-.027c-.26-.036.333.045.063.009-.162-.027-.315-.045-.477-.072-.341-.054-.683-.108-1.016-.17a40.736%2040.736%200%200%201-7.614-2.122%2017.654%2017.654%200%200%201-.872-.351c-.081-.036-.162-.063-.243-.099.045.018.36.153.063.027l-.485-.216c-.585-.26-1.17-.54-1.745-.827a39.805%2039.805%200%200%201-3.407-1.924c-.54-.341-1.07-.692-1.6-1.052-.252-.18-.504-.35-.755-.539-.126-.09-.252-.18-.369-.27a4.839%204.839%200%200%201-.207-.161c-.045-.036-.341-.261-.134-.1.197.153-.19-.152-.234-.18-.117-.098-.243-.188-.36-.287-.252-.207-.512-.413-.764-.63a47.94%2047.94%200%200%201-1.43-1.267%2043.832%2043.832%200%200%201-2.714-2.769%2039.248%2039.248%200%200%201-1.277-1.501c-.081-.099-.162-.207-.252-.306-.054-.072-.108-.135-.162-.207-.152-.188-.054.027.036.054-.063-.018-.197-.26-.242-.314-.117-.162-.234-.315-.351-.477a40.638%2040.638%200%200%201-1.097-1.573v1.816c.369-.548.746-1.088%201.133-1.618.09-.126.18-.252.279-.369.045-.063.206-.35.278-.368%200%200-.206.27-.08.107.053-.071.107-.134.161-.206.108-.135.216-.279.333-.414a41.593%2041.593%200%200%201%206.095-6.077c.135-.108.27-.225.414-.333.054-.045.108-.08.153-.126l.107-.08c.108-.082.072-.055-.098.08-.018-.063.665-.494.737-.548.27-.198.53-.387.809-.575A41.458%2041.458%200%200%201%2021%2022.86c.297-.134-.297.127.126-.053.306-.126.62-.252.935-.369.602-.233%201.213-.45%201.834-.656a39.909%2039.909%200%200%201%203.848-1.07%2049.54%2049.54%200%200%201%201.941-.395c.342-.063.675-.117%201.016-.171.135-.018.27-.036.414-.063.333-.045-.01%200-.072.009.117-.018.225-.027.342-.045%201.366-.17%202.733-.27%204.108-.297a41.173%2041.173%200%200%201%206.158.306l.207.027c.26.036-.333-.045-.063-.009.162.027.315.045.477.072.341.054.683.108%201.016.17a40.736%2040.736%200%200%201%207.614%202.122c.288.108.585.225.872.351.081.036.162.063.243.099a2316394.546%202316394.546%200%200%201%20.423.189c.584.26%201.168.54%201.744.827a39.805%2039.805%200%200%201%203.407%201.924c.54.341%201.07.692%201.6%201.052.252.18.504.35.755.539a13.112%2013.112%200%200%201%20.576.431c.045.036.341.261.135.1-.198-.153.188.152.233.18.117.098.243.188.36.287.252.207.512.413.764.63.486.413.962.835%201.43%201.267a43.832%2043.832%200%200%201%202.714%202.769c.441.494.864.989%201.277%201.501.081.099.162.207.252.306.054.072.108.135.162.207.152.188.054-.027-.036-.054.063.018.197.26.242.314.117.162.234.315.351.477.378.512.737%201.034%201.097%201.573.521.782%201.61%201.196%202.463.647.782-.503%201.205-1.618.647-2.463a44.326%2044.326%200%200%200-11.48-11.75A42.784%2042.784%200%200%200%2046.2%2017.234a44.059%2044.059%200%200%200-17.387-.404%2042.764%2042.764%200%200%200-15.292%205.915c-4.675%202.949-8.73%206.77-11.993%2011.22-.386.53-.764%201.07-1.132%201.618-.333.503-.333%201.313%200%201.816a44.326%2044.326%200%200%200%2011.48%2011.75%2042.784%2042.784%200%200%200%2014.933%206.608%2044.059%2044.059%200%200%200%2017.387.404%2042.829%2042.829%200%200%200%2015.292-5.915c4.675-2.949%208.73-6.77%2011.993-11.22.386-.53.764-1.07%201.132-1.618.522-.782.18-2.023-.647-2.463-.908-.477-1.906-.19-2.463.647z%22/%3E%3Cpath%20d%3D%22M36.5%2044.555a9.27%209.27%200%200%201-.998-.054l-.243-.027c.28.036.315.045.117.01a7.464%207.464%200%200%201-.476-.09%2012.13%2012.13%200%200%201-.818-.216c-.153-.045-.306-.1-.459-.153-.072-.027-.153-.054-.225-.081-.18-.072-.143-.054.1.045-.198.027-.675-.324-.855-.423a9.14%209.14%200%200%201-.701-.431c-.135-.09-.26-.18-.387-.27a4.36%204.36%200%200%200%20.081.063%201.467%201.467%200%200%201-.18-.153%2010.122%2010.122%200%200%201-1.24-1.24l-.153-.18c.162.206.18.233.063.08a11.289%2011.289%200%200%201-.701-1.088c-.1-.17-.45-.655-.423-.853.1.242.117.278.045.099-.027-.072-.054-.153-.08-.225a8.243%208.243%200%200%201-.154-.459c-.08-.27-.152-.539-.215-.818-.036-.162-.063-.323-.09-.476-.027-.198-.027-.162.009.117l-.027-.243a12.355%2012.355%200%200%201-.054-.998c-.01-.944-.827-1.843-1.798-1.798-.971.045-1.807.791-1.798%201.798.027%204.918%203.128%209.233%207.695%2010.959%201.25.476%202.616.683%203.956.692.944.01%201.843-.827%201.798-1.798-.036-.97-.782-1.78-1.789-1.789zm0-16.11c.333%200%20.665.018.998.054l.243.027c-.28-.036-.315-.045-.117-.01.162.028.323.055.476.09.279.064.549.136.818.216.153.045.306.1.459.153.072.027.153.054.225.081.18.072.143.054-.1-.045.198-.027.675.324.855.423.243.135.476.278.701.431.135.09.26.18.387.27.152.117.125.09-.081-.063.063.045.126.099.18.153a10.122%2010.122%200%200%201%201.24%201.24l.153.18c-.162-.206-.18-.233-.063-.08a11.289%2011.289%200%200%201%20.701%201.088c.1.17.45.655.423.853-.1-.242-.117-.278-.045-.099.027.072.054.153.08.225.055.153.109.306.154.459.08.27.152.539.215.818.036.162.063.323.09.476.027.198.027.162-.009-.117l.027.243c.036.333.045.665.054.998.01.944.827%201.843%201.798%201.798.971-.045%201.807-.791%201.798-1.798-.027-4.918-3.128-9.233-7.695-10.959-1.25-.476-2.616-.683-3.956-.692-.944-.01-1.843.827-1.798%201.798.036.97.782%201.78%201.789%201.789zM.54%203.084l1.86%201.86%205.062%205.062%207.48%207.48%209.098%209.098L34%2036.545l10.088%2010.087%209.403%209.404%207.92%207.92%205.7%205.7c.9.899%201.798%201.816%202.706%202.706l.117.117c.666.665%201.888.719%202.545%200%20.656-.72.71-1.834%200-2.545l-1.861-1.86-5.062-5.062-7.48-7.48-9.098-9.098-9.96-9.961L28.93%2026.386l-9.403-9.404-7.92-7.92-5.7-5.7C5.007%202.463%204.108%201.546%203.2.656L3.084.54C2.418-.126%201.196-.18.539.54c-.656.72-.71%201.834%200%202.545z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+@function buildIconEye($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2273%22%20height%3D%2273%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M10%2034.895C19%2021.632%2028%2015%2037%2015s18%206.632%2027%2019.895C55%2049.632%2046%2057%2037%2057s-18-7.368-27-22.105z%22/%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%3E%3Cpath%20d%3D%22M69.503%2035.592a51.943%2051.943%200%200%201-1.133%201.618c-.09.126-.18.252-.279.369-.045.063-.206.35-.278.368%200%200%20.206-.27.08-.107-.053.071-.107.134-.161.206-.108.135-.216.279-.333.414a41.593%2041.593%200%200%201-6.095%206.077c-.135.108-.27.225-.414.333-.054.045-.108.08-.153.126l-.107.08c-.108.082-.072.055.098-.08.018.063-.665.494-.737.548-.27.198-.53.387-.809.575a41.458%2041.458%200%200%201-6.742%203.803l-.486.216c-.297.135.297-.126-.126.054-.305.126-.62.252-.935.369-.602.233-1.213.45-1.834.656a39.909%2039.909%200%200%201-3.848%201.07%2049.54%2049.54%200%200%201-1.941.395c-.342.063-.675.117-1.016.171-.135.018-.27.036-.414.063-.332.045.01%200%20.072-.009-.117.018-.225.027-.342.045-1.366.17-2.733.27-4.108.297a41.173%2041.173%200%200%201-6.158-.306l-.207-.027c-.26-.036.333.045.063.009-.162-.027-.315-.045-.477-.072-.341-.054-.683-.108-1.016-.17a40.736%2040.736%200%200%201-7.614-2.122%2017.654%2017.654%200%200%201-.872-.351c-.081-.036-.162-.063-.243-.099.045.018.36.153.063.027l-.485-.216c-.585-.26-1.17-.54-1.745-.827a39.805%2039.805%200%200%201-3.407-1.924c-.54-.341-1.07-.692-1.6-1.052-.252-.18-.504-.35-.755-.539-.126-.09-.252-.18-.369-.27a4.839%204.839%200%200%201-.207-.161c-.045-.036-.341-.261-.134-.1.197.153-.19-.152-.234-.18-.117-.098-.243-.188-.36-.287-.252-.207-.512-.413-.764-.63a47.94%2047.94%200%200%201-1.43-1.267%2043.832%2043.832%200%200%201-2.714-2.769%2039.248%2039.248%200%200%201-1.277-1.501c-.081-.099-.162-.207-.252-.306-.054-.072-.108-.135-.162-.207-.152-.188-.054.027.036.054-.063-.018-.197-.26-.242-.314-.117-.162-.234-.315-.351-.477a40.638%2040.638%200%200%201-1.097-1.573v1.816c.369-.548.746-1.088%201.133-1.618.09-.126.18-.252.279-.369.045-.063.206-.35.278-.368%200%200-.206.27-.08.107.053-.071.107-.134.161-.206.108-.135.216-.279.333-.414a41.593%2041.593%200%200%201%206.095-6.077c.135-.108.27-.225.414-.333.054-.045.108-.08.153-.126l.107-.08c.108-.082.072-.055-.098.08-.018-.063.665-.494.737-.548.27-.198.53-.387.809-.575A41.458%2041.458%200%200%201%2021%2022.86c.297-.134-.297.127.126-.053.306-.126.62-.252.935-.369.602-.233%201.213-.45%201.834-.656a39.909%2039.909%200%200%201%203.848-1.07%2049.54%2049.54%200%200%201%201.941-.395c.342-.063.675-.117%201.016-.171.135-.018.27-.036.414-.063.333-.045-.01%200-.072.009.117-.018.225-.027.342-.045%201.366-.17%202.733-.27%204.108-.297a41.173%2041.173%200%200%201%206.158.306l.207.027c.26.036-.333-.045-.063-.009.162.027.315.045.477.072.341.054.683.108%201.016.17a40.736%2040.736%200%200%201%207.614%202.122c.288.108.585.225.872.351.081.036.162.063.243.099a2316394.546%202316394.546%200%200%201%20.423.189c.584.26%201.168.54%201.744.827a39.805%2039.805%200%200%201%203.407%201.924c.54.341%201.07.692%201.6%201.052.252.18.504.35.755.539a13.112%2013.112%200%200%201%20.576.431c.045.036.341.261.135.1-.198-.153.188.152.233.18.117.098.243.188.36.287.252.207.512.413.764.63.486.413.962.835%201.43%201.267a43.832%2043.832%200%200%201%202.714%202.769c.441.494.864.989%201.277%201.501.081.099.162.207.252.306.054.072.108.135.162.207.152.188.054-.027-.036-.054.063.018.197.26.242.314.117.162.234.315.351.477.378.512.737%201.034%201.097%201.573.521.782%201.61%201.196%202.463.647.782-.503%201.205-1.618.647-2.463a44.326%2044.326%200%200%200-11.48-11.75A42.784%2042.784%200%200%200%2046.2%2017.234a44.059%2044.059%200%200%200-17.387-.404%2042.764%2042.764%200%200%200-15.292%205.915c-4.675%202.949-8.73%206.77-11.993%2011.22-.386.53-.764%201.07-1.132%201.618-.333.503-.333%201.313%200%201.816a44.326%2044.326%200%200%200%2011.48%2011.75%2042.784%2042.784%200%200%200%2014.933%206.608%2044.059%2044.059%200%200%200%2017.387.404%2042.829%2042.829%200%200%200%2015.292-5.915c4.675-2.949%208.73-6.77%2011.993-11.22.386-.53.764-1.07%201.132-1.618.522-.782.18-2.023-.647-2.463-.908-.477-1.906-.19-2.463.647z%22/%3E%3Cpath%20d%3D%22M36.5%2044.555a9.27%209.27%200%200%201-.998-.054l-.243-.027c.28.036.315.045.117.01a7.464%207.464%200%200%201-.476-.09%2012.13%2012.13%200%200%201-.818-.216c-.153-.045-.306-.1-.459-.153-.072-.027-.153-.054-.225-.081-.18-.072-.143-.054.1.045-.198.027-.675-.324-.855-.423a9.14%209.14%200%200%201-.701-.431c-.135-.09-.26-.18-.387-.27a4.36%204.36%200%200%200%20.081.063%201.467%201.467%200%200%201-.18-.153%2010.122%2010.122%200%200%201-1.24-1.24l-.153-.18c.162.206.18.233.063.08a11.289%2011.289%200%200%201-.701-1.088c-.1-.17-.45-.655-.423-.853.1.242.117.278.045.099-.027-.072-.054-.153-.08-.225a8.243%208.243%200%200%201-.154-.459c-.08-.27-.152-.539-.215-.818-.036-.162-.063-.323-.09-.476-.027-.198-.027-.162.009.117l-.027-.243a12.355%2012.355%200%200%201-.054-.998c-.01-.944-.827-1.843-1.798-1.798-.971.045-1.807.791-1.798%201.798.027%204.918%203.128%209.233%207.695%2010.959%201.25.476%202.616.683%203.956.692.944.01%201.843-.827%201.798-1.798-.036-.97-.782-1.78-1.789-1.789zm0-16.11c.333%200%20.665.018.998.054l.243.027c-.28-.036-.315-.045-.117-.01.162.028.323.055.476.09.279.064.549.136.818.216.153.045.306.1.459.153.072.027.153.054.225.081.18.072.143.054-.1-.045.198-.027.675.324.855.423.243.135.476.278.701.431.135.09.26.18.387.27.152.117.125.09-.081-.063.063.045.126.099.18.153a10.122%2010.122%200%200%201%201.24%201.24l.153.18c-.162-.206-.18-.233-.063-.08a11.289%2011.289%200%200%201%20.701%201.088c.1.17.45.655.423.853-.1-.242-.117-.278-.045-.099.027.072.054.153.08.225.055.153.109.306.154.459.08.27.152.539.215.818.036.162.063.323.09.476.027.198.027.162-.009-.117l.027.243c.036.333.045.665.054.998.01.944.827%201.843%201.798%201.798.971-.045%201.807-.791%201.798-1.798-.027-4.918-3.128-9.233-7.695-10.959-1.25-.476-2.616-.683-3.956-.692-.944-.01-1.843.827-1.798%201.798.036.97.782%201.78%201.789%201.789zM.54%203.084l1.86%201.86%205.062%205.062%207.48%207.48%209.098%209.098L34%2036.545l10.088%2010.087%209.403%209.404%207.92%207.92%205.7%205.7c.9.899%201.798%201.816%202.706%202.706l.117.117c.666.665%201.888.719%202.545%200%20.656-.72.71-1.834%200-2.545l-1.861-1.86-5.062-5.062-7.48-7.48-9.098-9.098-9.96-9.961L28.93%2026.386l-9.403-9.404-7.92-7.92-5.7-5.7C5.007%202.463%204.108%201.546%203.2.656L3.084.54C2.418-.126%201.196-.18.539.54c-.656.72-.71%201.834%200%202.545z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}
-@function buildIconStar($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2272%22%20height%3D%2275%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#DAF4FF%22%20d%3D%22M29.636%2030.903L36.152%2018l5.212%2012.903L57%2034.774l-6.515%209.032V58l-14.333-3.871L23.122%2058V43.806L14%2034.774l15.636-3.87z%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($stroke-color)}%22%20fill-rule%3D%22nonzero%22%20d%3D%22M35.751.002a1.68%201.68%200%200%200-1.486%201.713v5.061a1.69%201.69%200%200%200%20.827%201.481c.52.307%201.163.307%201.683%200a1.69%201.69%200%200%200%20.827-1.48V1.714a1.697%201.697%200%200%200-.488-1.22%201.66%201.66%200%200%200-1.206-.493%201.651%201.651%200%200%200-.157%200zm-22.53%207.591a1.67%201.67%200%200%200-1.413%201.048%201.701%201.701%200%200%200%20.292%201.746l7.51%209.278a1.677%201.677%200%200%200%202.882-.48%201.72%201.72%200%200%200-.274-1.68l-7.51-9.28a1.662%201.662%200%200%200-1.33-.632%201.651%201.651%200%200%200-.157%200zm45.06%200a1.665%201.665%200%200%200-1.122.633l-7.51%209.278a1.72%201.72%200%200%200-.274%201.682%201.677%201.677%200%201%200%202.882.48l7.51-9.279a1.702%201.702%200%200%200%20.246-1.84%201.667%201.667%200%200%200-1.576-.954%201.651%201.651%200%200%200-.156%200zM35.803%2017.741a1.669%201.669%200%200%200-1.304.791l-6.31%2010.359-11.786%202.372c-.6.128-1.083.578-1.257%201.172a1.7%201.7%200%200%200%20.422%201.675l8.605%208.698-1.564%2011.836a1.696%201.696%200%200%200%20.645%201.549c.473.364%201.1.446%201.65.217l11.03-4.771%2011.03%204.77c.548.23%201.177.148%201.65-.216.472-.364.717-.954.644-1.55l-.782-5.983a1.674%201.674%200%200%200-1.877-1.45%201.685%201.685%200%200%200-1.434%201.898l.417%203.031-8.996-3.9a1.653%201.653%200%200%200-1.304%200l-8.997%203.9%201.278-9.726a1.698%201.698%200%200%200-.47-1.397l-6.961-7.038%209.465-1.924a1.67%201.67%200%200%200%201.095-.764l5.242-8.62%205.24%208.62a1.67%201.67%200%200%200%201.096.764l9.466%201.924-6.963%207.038a1.697%201.697%200%200%200-.579%201.692c.143.63.63%201.121%201.252%201.266a1.66%201.66%200%200%200%201.674-.586l9.18-9.278a1.7%201.7%200%200%200%20.423-1.675%201.676%201.676%200%200%200-1.257-1.172l-11.787-2.372-6.31-10.359a1.664%201.664%200%200%200-1.565-.79zm34.42%2010.096a1.653%201.653%200%200%200-.234.026%201.653%201.653%200%200%200-.13.026l-5.007.844a1.673%201.673%200%200%200-1.34%201.071%201.701%201.701%200%200%200%20.294%201.701c.4.47%201.02.68%201.62.55l5.006-.844a1.684%201.684%200%200%200%201.565-1.793%201.679%201.679%200%200%200-1.773-1.581zm-68.736.026A1.68%201.68%200%200%200%200%2029.513a1.682%201.682%200%200%200%201.435%201.698l5.007.843c.598.131%201.22-.08%201.62-.549.399-.47.511-1.122.293-1.7a1.673%201.673%200%200%200-1.34-1.072l-5.006-.844a1.651%201.651%200%200%200-.522-.026zM56.69%2044.706a1.652%201.652%200%200%200-.182.027%201.679%201.679%200%200%200-1.407%201.449%201.69%201.69%200%200%200%20.99%201.766l10.847%205.061a1.654%201.654%200%200%200%201.694-.116c.502-.348.777-.944.717-1.556a1.686%201.686%200%200%200-1.003-1.385L57.498%2044.89a1.654%201.654%200%200%200-.808-.185zm-41.721.027a1.655%201.655%200%200%200-.6.158L3.52%2049.95a1.689%201.689%200%200%200-1.003%201.386c-.06.612.215%201.208.717%201.556a1.654%201.654%200%200%200%201.694.116l10.848-5.06a1.696%201.696%200%200%200%20.92-1.948%201.671%201.671%200%200%200-1.728-1.268zM35.75%2059.045c-.86.096-1.505.84-1.486%201.714v11.808a1.69%201.69%200%200%200%20.827%201.481c.52.307%201.163.307%201.683%200a1.69%201.69%200%200%200%20.827-1.48v-11.81a1.697%201.697%200%200%200-.488-1.219%201.66%201.66%200%200%200-1.206-.494%201.651%201.651%200%200%200-.157%200zm-16.61%201.687a1.667%201.667%200%200%200-1.33.844l-2.503%204.217a1.707%201.707%200%200%200-.029%201.69c.29.529.837.86%201.435.87a1.669%201.669%200%200%200%201.462-.82l2.503-4.217c.337-.54.344-1.225.019-1.772a1.664%201.664%200%200%200-1.557-.812zm33.377%200a1.668%201.668%200%200%200-1.398.907%201.703%201.703%200%200%200%20.068%201.677l2.503%204.217c.308.518.865.83%201.463.82a1.67%201.67%200%200%200%201.434-.87c.29-.527.28-1.172-.028-1.69l-2.504-4.217a1.665%201.665%200%200%200-1.538-.844z%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildIconStar($primary-color, $secondary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2272%22%20height%3D%2275%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill%3D%22#{_url-friendly-color($secondary-color)}%22%20d%3D%22M29.636%2030.903L36.152%2018l5.212%2012.903L57%2034.774l-6.515%209.032V58l-14.333-3.871L23.122%2058V43.806L14%2034.774l15.636-3.87z%22/%3E%3Cpath%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22nonzero%22%20d%3D%22M35.751.002a1.68%201.68%200%200%200-1.486%201.713v5.061a1.69%201.69%200%200%200%20.827%201.481c.52.307%201.163.307%201.683%200a1.69%201.69%200%200%200%20.827-1.48V1.714a1.697%201.697%200%200%200-.488-1.22%201.66%201.66%200%200%200-1.206-.493%201.651%201.651%200%200%200-.157%200zm-22.53%207.591a1.67%201.67%200%200%200-1.413%201.048%201.701%201.701%200%200%200%20.292%201.746l7.51%209.278a1.677%201.677%200%200%200%202.882-.48%201.72%201.72%200%200%200-.274-1.68l-7.51-9.28a1.662%201.662%200%200%200-1.33-.632%201.651%201.651%200%200%200-.157%200zm45.06%200a1.665%201.665%200%200%200-1.122.633l-7.51%209.278a1.72%201.72%200%200%200-.274%201.682%201.677%201.677%200%201%200%202.882.48l7.51-9.279a1.702%201.702%200%200%200%20.246-1.84%201.667%201.667%200%200%200-1.576-.954%201.651%201.651%200%200%200-.156%200zM35.803%2017.741a1.669%201.669%200%200%200-1.304.791l-6.31%2010.359-11.786%202.372c-.6.128-1.083.578-1.257%201.172a1.7%201.7%200%200%200%20.422%201.675l8.605%208.698-1.564%2011.836a1.696%201.696%200%200%200%20.645%201.549c.473.364%201.1.446%201.65.217l11.03-4.771%2011.03%204.77c.548.23%201.177.148%201.65-.216.472-.364.717-.954.644-1.55l-.782-5.983a1.674%201.674%200%200%200-1.877-1.45%201.685%201.685%200%200%200-1.434%201.898l.417%203.031-8.996-3.9a1.653%201.653%200%200%200-1.304%200l-8.997%203.9%201.278-9.726a1.698%201.698%200%200%200-.47-1.397l-6.961-7.038%209.465-1.924a1.67%201.67%200%200%200%201.095-.764l5.242-8.62%205.24%208.62a1.67%201.67%200%200%200%201.096.764l9.466%201.924-6.963%207.038a1.697%201.697%200%200%200-.579%201.692c.143.63.63%201.121%201.252%201.266a1.66%201.66%200%200%200%201.674-.586l9.18-9.278a1.7%201.7%200%200%200%20.423-1.675%201.676%201.676%200%200%200-1.257-1.172l-11.787-2.372-6.31-10.359a1.664%201.664%200%200%200-1.565-.79zm34.42%2010.096a1.653%201.653%200%200%200-.234.026%201.653%201.653%200%200%200-.13.026l-5.007.844a1.673%201.673%200%200%200-1.34%201.071%201.701%201.701%200%200%200%20.294%201.701c.4.47%201.02.68%201.62.55l5.006-.844a1.684%201.684%200%200%200%201.565-1.793%201.679%201.679%200%200%200-1.773-1.581zm-68.736.026A1.68%201.68%200%200%200%200%2029.513a1.682%201.682%200%200%200%201.435%201.698l5.007.843c.598.131%201.22-.08%201.62-.549.399-.47.511-1.122.293-1.7a1.673%201.673%200%200%200-1.34-1.072l-5.006-.844a1.651%201.651%200%200%200-.522-.026zM56.69%2044.706a1.652%201.652%200%200%200-.182.027%201.679%201.679%200%200%200-1.407%201.449%201.69%201.69%200%200%200%20.99%201.766l10.847%205.061a1.654%201.654%200%200%200%201.694-.116c.502-.348.777-.944.717-1.556a1.686%201.686%200%200%200-1.003-1.385L57.498%2044.89a1.654%201.654%200%200%200-.808-.185zm-41.721.027a1.655%201.655%200%200%200-.6.158L3.52%2049.95a1.689%201.689%200%200%200-1.003%201.386c-.06.612.215%201.208.717%201.556a1.654%201.654%200%200%200%201.694.116l10.848-5.06a1.696%201.696%200%200%200%20.92-1.948%201.671%201.671%200%200%200-1.728-1.268zM35.75%2059.045c-.86.096-1.505.84-1.486%201.714v11.808a1.69%201.69%200%200%200%20.827%201.481c.52.307%201.163.307%201.683%200a1.69%201.69%200%200%200%20.827-1.48v-11.81a1.697%201.697%200%200%200-.488-1.219%201.66%201.66%200%200%200-1.206-.494%201.651%201.651%200%200%200-.157%200zm-16.61%201.687a1.667%201.667%200%200%200-1.33.844l-2.503%204.217a1.707%201.707%200%200%200-.029%201.69c.29.529.837.86%201.435.87a1.669%201.669%200%200%200%201.462-.82l2.503-4.217c.337-.54.344-1.225.019-1.772a1.664%201.664%200%200%200-1.557-.812zm33.377%200a1.668%201.668%200%200%200-1.398.907%201.703%201.703%200%200%200%20.068%201.677l2.503%204.217c.308.518.865.83%201.463.82a1.67%201.67%200%200%200%201.434-.87c.29-.527.28-1.172-.028-1.69l-2.504-4.217a1.665%201.665%200%200%200-1.538-.844z%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildBackgroundLeft($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22308%22%20height%3D%22163%22%3E%3Cg%20fill%3D%22#D4AF37%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M219%20103.238a1.002%201.002%200%200%200%200-2.006c-5.52-.006-9.994-4.49-10-10.025%200-.554-.448-1.003-1-1.003s-1%20.45-1%201.003c-.006%205.506-4.436%209.98-9.928%2010.025H197a1.002%201.002%200%200%200%200%202.006c5.52.006%209.993%204.49%2010%2010.025a1%201%200%201%200%202%200c.006-5.506%204.436-9.979%209.928-10.025H219zm-10.795%205.423A12.09%2012.09%200%200%200%20202%20102.44a12.087%2012.087%200%200%200%206.205-6.22%2012.09%2012.09%200%200%200%206.205%206.22%2012.087%2012.087%200%200%200-6.205%206.22zm-337.691%2062.03c-9.527-.01-17.247-7.75-17.257-17.3%200-.554-.448-1.003-1-1.003s-1%20.449-1%201.003c-.01%209.55-7.73%2017.29-17.257%2017.3a1.002%201.002%200%200%200%200%202.006c9.526.01%2017.246%207.75%2017.257%2017.3%200%20.554.448%201.003%201%201.003s1-.449%201-1.003c.01-9.55%207.73-17.29%2017.257-17.3a1.002%201.002%200%200%200%200-2.006zm-18.387%2013.03A19.372%2019.372%200%200%200-160%20171.565a19.372%2019.372%200%200%200%2012.127-12.158%2019.372%2019.372%200%200%200%2012.127%2012.158%2019.372%2019.372%200%200%200-12.127%2012.158zM303%20122.312v4.01h4a1.002%201.002%200%200%201%200%202.006h-4v4.01c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-4.01h-4a1.002%201.002%200%200%201%200-2.005h4v-4.01c0-.554.448-1.003%201-1.003s1%20.449%201%201.002zM.3%2039.39l2.292-2.299-2.292-2.3a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l2.293%202.299%202.293-2.3a.998.998%200%200%201%201.408.007c.388.39.39%201.019.006%201.411l-2.293%202.3%202.293%202.298a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-2.293-2.3-2.293%202.3a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972zm-82.587%2086.635l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972l1.293-1.296-1.293-1.296a1.004%201.004%200%200%201%20.004-1.414.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.007c.388.388.39%201.018.006%201.41zm346%2032.081l-1.293%201.297%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-1.293-1.297-1.293%201.297a.998.998%200%200%201-1.68-.446c-.092-.349.01-.72.266-.972l1.293-1.296-1.293-1.297a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.019.006%201.411zM-223.7%2032.786l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.719.266-.971l1.293-1.297-1.293-1.296a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.389.39%201.019.006%201.411l-1.293%201.296%201.293%201.297a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264zM-71%2071.181v8.02h8a1.002%201.002%200%200%201%200%202.006h-8v8.02c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-8.02h-8a1.002%201.002%200%200%201%200-2.005h8v-8.02c0-.554.448-1.003%201-1.003s1%20.449%201%201.002zM195%206.015a1.004%201.004%200%200%201-1%201.003h-4v4.01c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-4.01h-4a1.002%201.002%200%200%201%200-2.005h4v-4.01c0-.554.448-1.003%201-1.003s1%20.449%201%201.003v4.01h4a.998.998%200%200%201%201%201.002z%22/%3E%3Cpath%20d%3D%22M261.33%2060.51h3.367v-3.903h-3.368v3.903zm3.057-5.424c.015.042.032.083.048.125%201.37-.09%202.761-.063%204.103-.299%201.587-.278%202.188-1.88%201.332-3.18-.74-1.122-2.628-1.351-3.386-.34-.646.863-1.157%201.821-1.703%202.753-.171.292-.265.627-.394.941zm-2.705.097c-.206-.652-1.352-2.776-1.817-3.387a4.102%204.102%200%200%200-.176-.223c-1.076-1.278-3.118-.997-3.772.52-.49%201.13.206%202.567%201.357%202.808%201.445.3%202.917.194%204.408.282zm4.386%205.306h5.892v-3.888h-5.892v3.888zm-11.985.023h5.906v-3.914h-5.906v3.914zm7.236%2011.722h3.366V61.807h-3.366v10.427zm4.76.054h4.897V61.801h-4.898v10.487zm-11.013-.054h4.919V61.796h-4.92v10.438zm-1.322-10.365c-.87-.218-1.047-.107-1.036-1.294.01-1.456.002-2.911.003-4.368%200-.682.192-.865.91-.865.501%200%201.001.002%201.501-.001.103%200%20.204-.012.279-.016-.255-.427-.558-.815-.729-1.25-.62-1.581.11-3.366%201.648-4.132%201.597-.795%203.484-.346%204.528%201.097.792%201.097%201.4%202.292%201.953%203.515.055.12.117.238.208.425.129-.26.235-.459.325-.66.503-1.094%201.032-2.174%201.753-3.159.626-.854%201.425-1.436%202.54-1.574%201.816-.224%203.564%201.017%203.865%202.75.176%201.014-.09%201.912-.705%202.735l-.197.259c.106.014.182.035.259.035.577-.003%201.154-.006%201.73-.015.43-.007.708.226.71.637a833.48%20833.48%200%200%201%200%205.149c0%20.347-.226.575-.597.624-.127.019-.256.022-.42.035v10.708c0%20.124.003.25-.006.373-.035.426-.195.593-.634.656-.14.02-.284.02-.424.02h-16.412c-.087%200-.175.002-.262-.002-.596-.033-.79-.225-.79-.801-.002-3.505%200-7.01%200-10.516v-.365z%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildBackgroundLeft($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22308%22%20height%3D%22163%22%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M219%20103.238a1.002%201.002%200%200%200%200-2.006c-5.52-.006-9.994-4.49-10-10.025%200-.554-.448-1.003-1-1.003s-1%20.45-1%201.003c-.006%205.506-4.436%209.98-9.928%2010.025H197a1.002%201.002%200%200%200%200%202.006c5.52.006%209.993%204.49%2010%2010.025a1%201%200%201%200%202%200c.006-5.506%204.436-9.979%209.928-10.025H219zm-10.795%205.423A12.09%2012.09%200%200%200%20202%20102.44a12.087%2012.087%200%200%200%206.205-6.22%2012.09%2012.09%200%200%200%206.205%206.22%2012.087%2012.087%200%200%200-6.205%206.22zm-337.691%2062.03c-9.527-.01-17.247-7.75-17.257-17.3%200-.554-.448-1.003-1-1.003s-1%20.449-1%201.003c-.01%209.55-7.73%2017.29-17.257%2017.3a1.002%201.002%200%200%200%200%202.006c9.526.01%2017.246%207.75%2017.257%2017.3%200%20.554.448%201.003%201%201.003s1-.449%201-1.003c.01-9.55%207.73-17.29%2017.257-17.3a1.002%201.002%200%200%200%200-2.006zm-18.387%2013.03A19.372%2019.372%200%200%200-160%20171.565a19.372%2019.372%200%200%200%2012.127-12.158%2019.372%2019.372%200%200%200%2012.127%2012.158%2019.372%2019.372%200%200%200-12.127%2012.158zM303%20122.312v4.01h4a1.002%201.002%200%200%201%200%202.006h-4v4.01c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-4.01h-4a1.002%201.002%200%200%201%200-2.005h4v-4.01c0-.554.448-1.003%201-1.003s1%20.449%201%201.002zM.3%2039.39l2.292-2.299-2.292-2.3a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l2.293%202.299%202.293-2.3a.998.998%200%200%201%201.408.007c.388.39.39%201.019.006%201.411l-2.293%202.3%202.293%202.298a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-2.293-2.3-2.293%202.3a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972zm-82.587%2086.635l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972l1.293-1.296-1.293-1.296a1.004%201.004%200%200%201%20.004-1.414.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.007c.388.388.39%201.018.006%201.41zm346%2032.081l-1.293%201.297%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264l-1.293-1.297-1.293%201.297a.998.998%200%200%201-1.68-.446c-.092-.349.01-.72.266-.972l1.293-1.296-1.293-1.297a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.019.006%201.411zM-223.7%2032.786l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.719.266-.971l1.293-1.297-1.293-1.296a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.389.39%201.019.006%201.411l-1.293%201.296%201.293%201.297a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264zM-71%2071.181v8.02h8a1.002%201.002%200%200%201%200%202.006h-8v8.02c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-8.02h-8a1.002%201.002%200%200%201%200-2.005h8v-8.02c0-.554.448-1.003%201-1.003s1%20.449%201%201.002zM195%206.015a1.004%201.004%200%200%201-1%201.003h-4v4.01c0%20.554-.448%201.003-1%201.003s-1-.45-1-1.003v-4.01h-4a1.002%201.002%200%200%201%200-2.005h4v-4.01c0-.554.448-1.003%201-1.003s1%20.449%201%201.003v4.01h4a.998.998%200%200%201%201%201.002z%22/%3E%3Cpath%20d%3D%22M261.33%2060.51h3.367v-3.903h-3.368v3.903zm3.057-5.424c.015.042.032.083.048.125%201.37-.09%202.761-.063%204.103-.299%201.587-.278%202.188-1.88%201.332-3.18-.74-1.122-2.628-1.351-3.386-.34-.646.863-1.157%201.821-1.703%202.753-.171.292-.265.627-.394.941zm-2.705.097c-.206-.652-1.352-2.776-1.817-3.387a4.102%204.102%200%200%200-.176-.223c-1.076-1.278-3.118-.997-3.772.52-.49%201.13.206%202.567%201.357%202.808%201.445.3%202.917.194%204.408.282zm4.386%205.306h5.892v-3.888h-5.892v3.888zm-11.985.023h5.906v-3.914h-5.906v3.914zm7.236%2011.722h3.366V61.807h-3.366v10.427zm4.76.054h4.897V61.801h-4.898v10.487zm-11.013-.054h4.919V61.796h-4.92v10.438zm-1.322-10.365c-.87-.218-1.047-.107-1.036-1.294.01-1.456.002-2.911.003-4.368%200-.682.192-.865.91-.865.501%200%201.001.002%201.501-.001.103%200%20.204-.012.279-.016-.255-.427-.558-.815-.729-1.25-.62-1.581.11-3.366%201.648-4.132%201.597-.795%203.484-.346%204.528%201.097.792%201.097%201.4%202.292%201.953%203.515.055.12.117.238.208.425.129-.26.235-.459.325-.66.503-1.094%201.032-2.174%201.753-3.159.626-.854%201.425-1.436%202.54-1.574%201.816-.224%203.564%201.017%203.865%202.75.176%201.014-.09%201.912-.705%202.735l-.197.259c.106.014.182.035.259.035.577-.003%201.154-.006%201.73-.015.43-.007.708.226.71.637a833.48%20833.48%200%200%201%200%205.149c0%20.347-.226.575-.597.624-.127.019-.256.022-.42.035v10.708c0%20.124.003.25-.006.373-.035.426-.195.593-.634.656-.14.02-.284.02-.424.02h-16.412c-.087%200-.175.002-.262-.002-.596-.033-.79-.225-.79-.801-.002-3.505%200-7.01%200-10.516v-.365z%22/%3E%3C/g%3E%3C/svg%3E');
}
-@function buildBackgroundRight($stroke-color) {
- @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22106%22%20height%3D%22114%22%3E%3Cg%20fill%3D%22#D4AF37%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M347-.77a1.002%201.002%200%200%200%200-2.006c-5.52-.006-9.994-4.49-10-10.024a1.001%201.001%200%201%200-2%200c-.006%205.505-4.436%209.978-9.928%2010.024H325a1.002%201.002%200%200%200%200%202.006c5.52.006%209.993%204.49%2010%2010.024a1.001%201.001%200%201%200%202%200c.006-5.506%204.436-9.978%209.928-10.024H347zm-10.795%205.422A12.09%2012.09%200%200%200%20330-1.568a12.087%2012.087%200%200%200%206.205-6.22%2012.09%2012.09%200%200%200%206.205%206.22%2012.087%2012.087%200%200%200-6.205%206.22zM421%2028.301v4.01h4a1.001%201.001%200%201%201%200%202.005h-4v4.01a1.001%201.001%200%201%201-2%200v-4.01h-4a1.002%201.002%200%200%201%200-2.006h4V28.3a1.001%201.001%200%201%201%202%200zM118.3-54.614l2.292-2.299-2.293-2.299a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l2.293%202.299%202.293-2.3a.998.998%200%200%201%201.408.007c.388.39.39%201.019.006%201.411l-2.293%202.299%202.293%202.299a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-2.293-2.299-2.293%202.3a.998.998%200%200%201-1.68-.447c-.092-.348.01-.719.266-.971zM35.712%2032.013l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.445c-.092-.349.01-.72.266-.972l1.293-1.296-1.293-1.296a1.004%201.004%200%200%201%20.004-1.414.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.02.006%201.412zm346%2032.078l-1.293%201.297%201.293%201.296a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.719.266-.971l1.293-1.296-1.293-1.297a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.019.006%201.411zM97.3%20102.7l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972l1.293-1.296L93.3%2098.69a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.389.39%201.019.006%201.411l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264zM97%20.994v8.02h8a1.001%201.001%200%201%201%200%202.005h-8v8.02a1.001%201.001%200%201%201-2%200v-8.02h-8a1.002%201.002%200%200%201%200-2.005h8V.994a1.001%201.001%200%201%201%202%200zm216-88.98a1.003%201.003%200%200%201-1%201.003h-4v4.01a1.001%201.001%200%201%201-2%200v-4.01h-4a1.001%201.001%200%201%201%200-2.005h4v-4.01a1.001%201.001%200%201%201%202%200v4.01h4a.998.998%200%200%201%201%201.003z%22/%3E%3Cpath%20d%3D%22M12.146%2095.113h4.746V89.65h-4.746v5.464zm4.308-7.593c.022.06.045.116.069.175%201.929-.126%203.89-.087%205.78-.418%202.237-.39%203.084-2.632%201.878-4.452-1.043-1.572-3.704-1.892-4.771-.477-.911%201.209-1.63%202.55-2.4%203.855-.242.41-.374.877-.556%201.317zm-3.81.136c-.291-.912-1.906-3.886-2.562-4.742a5.749%205.749%200%200%200-.247-.312c-1.517-1.789-4.394-1.395-5.316.728-.689%201.581.29%203.594%201.912%203.93%202.036.42%204.11.273%206.212.396zm6.179%207.429h8.303v-5.444h-8.303v5.444zm-16.888.032h8.322v-5.48H1.935v5.48zm10.196%2016.411h4.744V96.93H12.13v14.598zm6.707.075h6.9V96.922h-6.9v14.681zm-15.518-.075h6.931V96.914h-6.93v14.614zm-1.863-14.51c-1.225-.307-1.474-.15-1.46-1.813.016-2.038.003-4.076.005-6.115%200-.955.271-1.21%201.282-1.21.707%200%201.41.001%202.115-.003.145%200%20.288-.016.393-.022-.359-.598-.786-1.142-1.027-1.75-.875-2.214.156-4.712%202.322-5.784%202.251-1.113%204.91-.485%206.38%201.535%201.116%201.536%201.974%203.21%202.753%204.92.077.169.164.335.292.596.182-.365.331-.642.46-.924.708-1.53%201.452-3.043%202.468-4.422.884-1.196%202.008-2.011%203.58-2.204%202.56-.314%205.022%201.423%205.446%203.85.248%201.42-.128%202.676-.994%203.828l-.277.363c.15.02.256.049.365.049.813-.004%201.626-.008%202.436-.02.609-.01%201%20.316%201.001.892.009%202.402.007%204.805%200%207.207%200%20.487-.318.805-.84.874-.18.027-.361.03-.592.049v14.991c0%20.175.005.351-.008.523-.05.596-.275.83-.894.919-.197.026-.4.026-.598.026-7.71.002-15.417.002-23.125.002-.123%200-.247.002-.369-.004-.84-.046-1.114-.314-1.114-1.121-.002-4.907%200-9.815%200-14.722v-.51z%22/%3E%3C/g%3E%3C/svg%3E');
+@function buildBackgroundRight($primary-color) {
+ @return url('data:image/svg+xml;charset%3dUS-ASCII,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22106%22%20height%3D%22114%22%3E%3Cg%20fill%3D%22#{_url-friendly-color($primary-color)}%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20fill-rule%3D%22nonzero%22%20d%3D%22M347-.77a1.002%201.002%200%200%200%200-2.006c-5.52-.006-9.994-4.49-10-10.024a1.001%201.001%200%201%200-2%200c-.006%205.505-4.436%209.978-9.928%2010.024H325a1.002%201.002%200%200%200%200%202.006c5.52.006%209.993%204.49%2010%2010.024a1.001%201.001%200%201%200%202%200c.006-5.506%204.436-9.978%209.928-10.024H347zm-10.795%205.422A12.09%2012.09%200%200%200%20330-1.568a12.087%2012.087%200%200%200%206.205-6.22%2012.09%2012.09%200%200%200%206.205%206.22%2012.087%2012.087%200%200%200-6.205%206.22zM421%2028.301v4.01h4a1.001%201.001%200%201%201%200%202.005h-4v4.01a1.001%201.001%200%201%201-2%200v-4.01h-4a1.002%201.002%200%200%201%200-2.006h4V28.3a1.001%201.001%200%201%201%202%200zM118.3-54.614l2.292-2.299-2.293-2.299a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l2.293%202.299%202.293-2.3a.998.998%200%200%201%201.408.007c.388.39.39%201.019.006%201.411l-2.293%202.299%202.293%202.299a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-2.293-2.299-2.293%202.3a.998.998%200%200%201-1.68-.447c-.092-.348.01-.719.266-.971zM35.712%2032.013l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.445c-.092-.349.01-.72.266-.972l1.293-1.296-1.293-1.296a1.004%201.004%200%200%201%20.004-1.414.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.02.006%201.412zm346%2032.078l-1.293%201.297%201.293%201.296a1.004%201.004%200%200%201-.446%201.681.998.998%200%200%201-.968-.264l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.719.266-.971l1.293-1.296-1.293-1.297a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.39.39%201.019.006%201.411zM97.3%20102.7l-1.293-1.296-1.293%201.296a.998.998%200%200%201-1.68-.446c-.092-.348.01-.72.266-.972l1.293-1.296L93.3%2098.69a1.004%201.004%200%200%201%20.004-1.413.998.998%200%200%201%201.41-.004l1.293%201.296%201.293-1.296a.998.998%200%200%201%201.408.006c.388.389.39%201.019.006%201.411l-1.293%201.296%201.293%201.296a1.004%201.004%200%200%201-.446%201.682.998.998%200%200%201-.968-.264zM97%20.994v8.02h8a1.001%201.001%200%201%201%200%202.005h-8v8.02a1.001%201.001%200%201%201-2%200v-8.02h-8a1.002%201.002%200%200%201%200-2.005h8V.994a1.001%201.001%200%201%201%202%200zm216-88.98a1.003%201.003%200%200%201-1%201.003h-4v4.01a1.001%201.001%200%201%201-2%200v-4.01h-4a1.001%201.001%200%201%201%200-2.005h4v-4.01a1.001%201.001%200%201%201%202%200v4.01h4a.998.998%200%200%201%201%201.003z%22/%3E%3Cpath%20d%3D%22M12.146%2095.113h4.746V89.65h-4.746v5.464zm4.308-7.593c.022.06.045.116.069.175%201.929-.126%203.89-.087%205.78-.418%202.237-.39%203.084-2.632%201.878-4.452-1.043-1.572-3.704-1.892-4.771-.477-.911%201.209-1.63%202.55-2.4%203.855-.242.41-.374.877-.556%201.317zm-3.81.136c-.291-.912-1.906-3.886-2.562-4.742a5.749%205.749%200%200%200-.247-.312c-1.517-1.789-4.394-1.395-5.316.728-.689%201.581.29%203.594%201.912%203.93%202.036.42%204.11.273%206.212.396zm6.179%207.429h8.303v-5.444h-8.303v5.444zm-16.888.032h8.322v-5.48H1.935v5.48zm10.196%2016.411h4.744V96.93H12.13v14.598zm6.707.075h6.9V96.922h-6.9v14.681zm-15.518-.075h6.931V96.914h-6.93v14.614zm-1.863-14.51c-1.225-.307-1.474-.15-1.46-1.813.016-2.038.003-4.076.005-6.115%200-.955.271-1.21%201.282-1.21.707%200%201.41.001%202.115-.003.145%200%20.288-.016.393-.022-.359-.598-.786-1.142-1.027-1.75-.875-2.214.156-4.712%202.322-5.784%202.251-1.113%204.91-.485%206.38%201.535%201.116%201.536%201.974%203.21%202.753%204.92.077.169.164.335.292.596.182-.365.331-.642.46-.924.708-1.53%201.452-3.043%202.468-4.422.884-1.196%202.008-2.011%203.58-2.204%202.56-.314%205.022%201.423%205.446%203.85.248%201.42-.128%202.676-.994%203.828l-.277.363c.15.02.256.049.365.049.813-.004%201.626-.008%202.436-.02.609-.01%201%20.316%201.001.892.009%202.402.007%204.805%200%207.207%200%20.487-.318.805-.84.874-.18.027-.361.03-.592.049v14.991c0%20.175.005.351-.008.523-.05.596-.275.83-.894.919-.197.026-.4.026-.598.026-7.71.002-15.417.002-23.125.002-.123%200-.247.002-.369-.004-.84-.046-1.114-.314-1.114-1.121-.002-4.907%200-9.815%200-14.722v-.51z%22/%3E%3C/g%3E%3C/svg%3E');
}
diff --git a/src/background.js b/src/background.js
index a6e95e20d..769d532e3 100644
--- a/src/background.js
+++ b/src/background.js
@@ -507,6 +507,25 @@ function handleRewards(name, message, callback) {
*/
function handleGhosteryHub(name, message, callback) {
switch (name) {
+ case 'GET_HOME_PROPS': {
+ const {
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ } = conf;
+ callback({
+ setup_complete,
+ tutorial_complete,
+ enable_metrics,
+ });
+ break;
+ }
+ case 'SET_METRICS': {
+ const { enable_metrics } = message;
+ conf.enable_metrics = enable_metrics;
+ callback({ enable_metrics });
+ break;
+ }
case 'GET_SETUP_SHOW_WARNING_OVERRIDE': {
const { setup_show_warning_override } = conf;
callback({ setup_show_warning_override });
@@ -577,6 +596,18 @@ function handleGhosteryHub(name, message, callback) {
callback({ enable_human_web });
break;
}
+ case 'SET_SETUP_COMPLETE': {
+ const setup_complete = true;
+ conf.setup_complete = setup_complete;
+ callback({ setup_complete });
+ break;
+ }
+ case 'SET_TUTORIAL_COMPLETE': {
+ const tutorial_complete = true;
+ conf.tutorial_complete = tutorial_complete;
+ callback({ tutorial_complete });
+ break;
+ }
default: break;
}
}
diff --git a/src/classes/ConfData.js b/src/classes/ConfData.js
index dff1df923..fd5b74473 100644
--- a/src/classes/ConfData.js
+++ b/src/classes/ConfData.js
@@ -132,6 +132,8 @@ class ConfData {
_initProperty('setup_show_warning_override', true);
_initProperty('setup_path', 0);
_initProperty('setup_block', 1);
+ _initProperty('setup_complete', false);
+ _initProperty('tutorial_complete', false);
_initProperty('cliqz_import_state', 0);
_initProperty('current_theme', 'default');