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_info')} + + + {t('hub_home_header_info_link')} + +
+
+ + + {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_info + + + hub_home_header_info_link + +
+
+
+ + + +
+ + hub_home_header_checkbox_label + +
+
+
+
+
+ hub_home_subheader_optimize +
+ + test@example.com + +
+
+
+
+
+ hub_home_feature_tutorial_title +
+
+ hub_home_feature_tutorial_text +
+ + hub_home_feature_tutorial_button + +
+
+
+
+
+ hub_home_feature_setup_title +
+
+ hub_home_feature_setup_text +
+ + hub_home_feature_setup_button + +
+
+
+
+
+ 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_info + + + hub_home_header_info_link + +
+
+
+ + + +
+ + hub_home_header_checkbox_label + +
+
+
+
+
+ hub_home_subheader_optimize +
+ + test create account + +
+
+
+
+
+ hub_home_feature_tutorial_title +
+
+ hub_home_feature_tutorial_text +
+ + hub_home_feature_tutorial_button_alt + +
+
+
+
+
+ hub_home_feature_setup_title +
+
+ hub_home_feature_setup_text +
+ + hub_home_feature_setup_button_alt + +
+
+
+
+
+ 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 => ( +
+ +
+
{item.text}
+ +
+ ))} +
+
+ {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');