diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 208af51b1..8f7a3520f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1819,7 +1819,7 @@ "message": "Ad free" }, "ghostery_browser_hub_onboarding_supports_ghosterys_mission": { - "message": "Supports Ghostery's Mission" + "message": "Supports Ghostery's mission" }, "ghostery_browser_hub_onboarding_unlimited_bandwidth": { "message": "Unlimited Bandwidth" @@ -1854,6 +1854,9 @@ "ghostery_browser_hub_onboarding_skip": { "message": "Skip" }, + "ghostery_browser_hub_onboarding_back": { + "message": "Back" + }, "ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously": { "message": "We take your privacy very seriously. Learn more" }, @@ -1861,25 +1864,7 @@ "message": "Private by design" }, "ghostery_browser_hub_onboarding_private_by_design_description": { - "message": "Privacy is incredibly important to us at Ghostery and we've taken extra care to design our products that limits the amount of personal information collected." - }, - "ghostery_browser_hub_onboarding_why_do_you_need_my_email": { - "message": "Why do you need my email?" - }, - "ghostery_browser_hub_onboarding_why_do_you_need_my_email_description": { - "message": "We've found email is the simplest way to create and secure a unique account without sharing your information. It helps sync your custom settings across your devices." - }, - "ghostery_browser_hub_onboarding_what_do_you_use_my_email_for": { - "message": "What do you use my email for?" - }, - "ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description": { - "message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features." - }, - "ghostery_browser_hub_onboarding_how_secure_is_": { - "message": "How secure is" - }, - "ghostery_browser_hub_onboarding_how_secure_is_ghostery_description": { - "message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features." + "message": "Privacy is incredibly important to us at Ghostery. That’s why we enforce a strict policy when it comes to your data. When you create an account at Ghostery, the only data we collect is your name and email. This information allows us to offer you a user experience wherein you can sync your settings across devices and hear from us about important updates. Under no circumstances do we share or sell this data with any kind of third party." }, "ghostery_browser_hub_onboarding_can_i_remove_my_account": { "message": "Can I remove my account?" @@ -1896,11 +1881,11 @@ "ghostery_browser_hub_onboarding_you_are_signed_in_as": { "message": "You are signed in as" }, - "ghostery_browser_hub_onboarding_yay_youre_all_set": { - "message": "Yay! You're all set." + "ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser": { + "message": "You've successfully set up your browser!" }, - "ghostery_browser_hub_onboarding_start_browsing_the_web_with": { - "message": "Start browsing the web with" + "ghostery_browser_hub_onboarding_surf_with_ease": { + "message": "Now you can surf with the greatest of ease." }, "ghostery_browser_hub_onboarding_lets_search": { "message": "Let's search" @@ -1935,16 +1920,46 @@ "ghostery_browser_hub_onboarding_question_smart_browsing": { "message": "Do you want to turn on smart-browsing?" }, - "ghostery_browser_hub_info_blocking_all": { + "ghostery_browser_hub_onboarding_info_blocking_all": { "message": "Blocking \"all trackers\" may cause some websites to break." }, - "ghostery_browser_hub_info_anti_tracking": { - "message": "Anti-tracking anonymizes uniquely identifiable data that trackers try to collect" + "ghostery_browser_hub_onboarding_info_anti_tracking": { + "message": "Anti-tracking anonymizes uniquely identifiable data that trackers try to collect." }, - "ghostery_browser_hub_info_smart_browsing": { + "ghostery_browser_hub_onboarding_info_smart_browsing": { "message": "Smart-browsing adjusts your blocking settings to decrease page breakage and accelerate page loads." }, - "ghostery_browser_hub_toast_error": { + "ghostery_browser_hub__onboarding_choose_your_default_search": { + "message": "Choose your default search" + }, + "ghostery_browser_hub_onboarding_pick_a_default_search_engine": { + "message": "Pick a default search engine for all your searches." + }, + "ghostery_browser_hub_onboarding_ad_free_private_search": { + "message": "Ad-free private search" + }, + "ghostery_browser_hub_onboarding_ad_supported_private_search": { + "message": "Ad-supported private search" + }, + "ghostery_browser_hub_onboarding_type_in_search_domain": { + "message": "Type in search domain" + }, + "ghostery_browser_hub_onboarding_just_so_you_know": { + "message": "Just so you know:" + }, + "ghostery_browser_hub_onboarding_search_engine_will_log_your_data": { + "message": "search engine will log your data and use it to serve you targeted ads." + }, + "ghostery_browser_hub_onboarding_go_back": { + "message": "Go Back" + }, + "ghostery_browser_hub_onboarding_confirm": { + "message": "Confirm" + }, + "ghostery_browser_hub_onboarding_other": { + "message": "Other" + }, + "ghostery_browser_hub_onboarding_toast_error": { "message": "Please answer all questions" }, "enable_when_paused": { diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx index 0451de371..13400c4e8 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx @@ -29,21 +29,6 @@ const faqList = [ label: t('ghostery_browser_hub_onboarding_private_by_design'), description: t('ghostery_browser_hub_onboarding_private_by_design_description'), }, - { - icon: 'ghosty-letter.svg', - label: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email'), - description: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email_description'), - }, - { - icon: 'ghosty-shield-letter.svg', - label: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for'), - description: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description'), - }, - { - icon: 'ghosty-lock.svg', - label: `${t('ghostery_browser_hub_onboarding_how_secure_is_')} Ghostery?`, - description: t('ghostery_browser_hub_onboarding_how_secure_is_ghostery_description'), - }, { icon: 'ghosty-box.svg', label: t('ghostery_browser_hub_onboarding_can_i_remove_my_account'), diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss index b61778e86..93fabacfd 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss @@ -158,7 +158,8 @@ $color-create-account-form-error-red: #e74055; cursor: pointer; @include breakpoint(small down) { margin: 39px auto 0 auto; - text-align: center; + display: flex; + justify-content: center; float: none; } } diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index b281816db..51bed3a5a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -13,7 +13,7 @@ import React, { Component } from 'react'; -// import Tooltip from '../../../../panel/components/Tooltip'; +import Tooltip from '../../../../shared-components/Tooltip'; import RadioButton from '../../../../shared-components/RadioButton/RadioButton'; import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox'; import { CHOOSE_DEFAULT_SEARCH, ONBOARDING } from '../../OnboardingView/OnboardingConstants'; @@ -137,7 +137,9 @@ class BlockSettingsView extends Component {
  • {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} -
    +
    + +
    • @@ -159,8 +161,12 @@ class BlockSettingsView extends Component {
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
  • - {t('ghostery_browser_hub_onboarding_question_anti_tracking')} -
    +
    + {t('ghostery_browser_hub_onboarding_question_anti_tracking')} +
    + +
    +
    • @@ -175,8 +181,12 @@ class BlockSettingsView extends Component {
    {t('hub_setup_modal_button_no')}
  • - {t('ghostery_browser_hub_onboarding_question_smart_browsing')} -
    +
    + {t('ghostery_browser_hub_onboarding_question_smart_browsing')} +
    + +
    +
    • diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx index c1a87cc37..aaedb4b67 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -23,8 +23,8 @@ const SuccessView = (props) => { const { sendPing } = actions; return (
    -
    {t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
    -
    {`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
    +
    {t('ghostery_browser_hub_onboarding_youve_successfully_set_up_your_browser')}
    +
    {`${t('ghostery_browser_hub_onboarding_surf_with_ease')}`}
    diff --git a/app/images/hub/browser-create-account-view/ghosty-letter.svg b/app/images/hub/browser-create-account-view/ghosty-letter.svg deleted file mode 100644 index 2921eee09..000000000 --- a/app/images/hub/browser-create-account-view/ghosty-letter.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/hub/browser-create-account-view/ghosty-lock.svg b/app/images/hub/browser-create-account-view/ghosty-lock.svg deleted file mode 100644 index 03f9465db..000000000 --- a/app/images/hub/browser-create-account-view/ghosty-lock.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/images/hub/browser-create-account-view/ghosty-shield-letter.svg b/app/images/hub/browser-create-account-view/ghosty-shield-letter.svg deleted file mode 100644 index 2fb520cf9..000000000 --- a/app/images/hub/browser-create-account-view/ghosty-shield-letter.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/panel-android/components/content/__tests__/OverviewTab.jsx b/app/panel-android/components/content/__tests__/OverviewTab.jsx index 4fec3f938..411a9d52a 100644 --- a/app/panel-android/components/content/__tests__/OverviewTab.jsx +++ b/app/panel-android/components/content/__tests__/OverviewTab.jsx @@ -16,7 +16,7 @@ import renderer from 'react-test-renderer'; import { mount } from 'enzyme'; import OverviewTab from '../OverviewTab'; -jest.mock('../../../../panel/components/Tooltip'); +jest.mock('../../../../shared-components/Tooltip'); describe('app/panel-android/components/content/OverviewTab.jsx', () => { describe('Snapshot tests with react-test-renderer', () => { diff --git a/app/panel/components/BuildingBlocks/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/CliqzFeature.jsx index 3abc03dc9..ca3053c88 100644 --- a/app/panel/components/BuildingBlocks/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/CliqzFeature.jsx @@ -14,7 +14,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ClassNames from 'classnames'; -import Tooltip from '../Tooltip'; +import Tooltip from '../../../shared-components/Tooltip'; /** * @class Implements rendering and interaction for Cliqz feature icon toggles diff --git a/app/panel/components/BuildingBlocks/DonutGraph.jsx b/app/panel/components/BuildingBlocks/DonutGraph.jsx index defd5607f..0bc49cfb4 100644 --- a/app/panel/components/BuildingBlocks/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/DonutGraph.jsx @@ -23,7 +23,7 @@ import { scaleLinear, select } from 'd3'; -import Tooltip from '../Tooltip'; +import Tooltip from '../../../shared-components/Tooltip'; /** * @class Generate donut graph. Used to display tracker data in the Summary View. diff --git a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx index d66e943bd..679f5bae3 100644 --- a/app/panel/components/BuildingBlocks/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/GhosteryFeature.jsx @@ -14,7 +14,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ClassNames from 'classnames'; -import Tooltip from '../Tooltip'; +import Tooltip from '../../../shared-components/Tooltip'; import globals from '../../../../src/classes/Globals'; const { BLACKLISTED, WHITELISTED } = globals; diff --git a/app/panel/components/BuildingBlocks/PauseButton.jsx b/app/panel/components/BuildingBlocks/PauseButton.jsx index d7ab0e287..f02f8bdf2 100644 --- a/app/panel/components/BuildingBlocks/PauseButton.jsx +++ b/app/panel/components/BuildingBlocks/PauseButton.jsx @@ -14,7 +14,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ClassNames from 'classnames'; -import Tooltip from '../Tooltip'; +import Tooltip from '../../../shared-components/Tooltip'; /** * @class Implements the Pause button on the Summary view. diff --git a/app/panel/components/BuildingBlocks/__tests__/CliqzFeature.jsx b/app/panel/components/BuildingBlocks/__tests__/CliqzFeature.jsx index cba12eac1..e2503a56e 100644 --- a/app/panel/components/BuildingBlocks/__tests__/CliqzFeature.jsx +++ b/app/panel/components/BuildingBlocks/__tests__/CliqzFeature.jsx @@ -22,7 +22,7 @@ global.t = function(str) { }; // Fake the Tooltip implementation -jest.mock('../../Tooltip'); +jest.mock('../../../../shared-components/Tooltip'); describe('app/panel/components/CliqzFeature.jsx', () => { describe('Snapshot tests with react-test-renderer', () => { diff --git a/app/panel/components/BuildingBlocks/__tests__/DonutGraph.jsx b/app/panel/components/BuildingBlocks/__tests__/DonutGraph.jsx index 0968d0058..80891ef8e 100644 --- a/app/panel/components/BuildingBlocks/__tests__/DonutGraph.jsx +++ b/app/panel/components/BuildingBlocks/__tests__/DonutGraph.jsx @@ -22,7 +22,7 @@ global.t = function(str) { }; // Fake the Tooltip implementation -jest.mock('../../Tooltip'); +jest.mock('../../../../shared-components/Tooltip'); describe('app/panel/components/DonutGraph.jsx', () => { describe('Snapshot tests with react-test-renderer', () => { diff --git a/app/panel/components/BuildingBlocks/__tests__/GhosteryFeature.jsx b/app/panel/components/BuildingBlocks/__tests__/GhosteryFeature.jsx index e8516f147..30b96e109 100644 --- a/app/panel/components/BuildingBlocks/__tests__/GhosteryFeature.jsx +++ b/app/panel/components/BuildingBlocks/__tests__/GhosteryFeature.jsx @@ -22,7 +22,7 @@ global.t = function(str) { }; // Fake the Tooltip implementation -jest.mock('../../Tooltip'); +jest.mock('../../../../shared-components/Tooltip'); describe('app/panel/components/GhosteryFeature.jsx', () => { describe('Snapshot tests with react-test-renderer', () => { diff --git a/app/panel/components/Header.jsx b/app/panel/components/Header.jsx index f20bb7ac5..81bc35bf3 100644 --- a/app/panel/components/Header.jsx +++ b/app/panel/components/Header.jsx @@ -15,7 +15,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { ReactSVG } from 'react-svg'; import ClassNames from 'classnames'; -import Tooltip from './Tooltip'; +import Tooltip from '../../shared-components/Tooltip'; import HeaderMenu from './HeaderMenu'; import { sendMessage, sendMessageInPromise } from '../utils/msg'; import { log } from '../../../src/utils/common'; diff --git a/app/panel/components/Summary.jsx b/app/panel/components/Summary.jsx index f89f64d0e..bd56b9018 100644 --- a/app/panel/components/Summary.jsx +++ b/app/panel/components/Summary.jsx @@ -14,7 +14,7 @@ import React from 'react'; import { ReactSVG } from 'react-svg'; import ClassNames from 'classnames'; -import Tooltip from './Tooltip'; +import Tooltip from '../../shared-components/Tooltip'; import DynamicUIPortContext from '../contexts/DynamicUIPortContext'; import { sendMessage } from '../utils/msg'; import globals from '../../../src/classes/Globals'; diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 78abaa56e..6d641e247 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -83,5 +83,4 @@ html, body, #root { // Imports from ../shared-components directory @import '../shared-components/ToastMessage/ToastMessage.scss'; @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss'; - - +@import '../shared-components/Tooltip/Tooltip.scss'; diff --git a/app/scss/panel.scss b/app/scss/panel.scss index 3e6585680..839e8ff3e 100644 --- a/app/scss/panel.scss +++ b/app/scss/panel.scss @@ -69,7 +69,6 @@ html body { @import './partials/_donut_graph'; @import './partials/_ghostery_feature'; @import './partials/_cliqz_feature'; -@import './partials/_tooltip'; @import './partials/_not_scanned'; @import './partials/_subscribe'; @import './partials/_stats'; @@ -83,3 +82,4 @@ html body { @import '../shared-components/ModalContent/PlusPromoModalContent/PlusPromoModalContent.scss'; @import '../shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.scss'; @import '../shared-components/ForgotPassword/ForgotPassword.scss'; +@import '../shared-components/Tooltip/Tooltip.scss'; diff --git a/app/panel/components/Tooltip.jsx b/app/shared-components/Tooltip/Tooltip.jsx similarity index 97% rename from app/panel/components/Tooltip.jsx rename to app/shared-components/Tooltip/Tooltip.jsx index 8e7ac4255..028edf59b 100644 --- a/app/panel/components/Tooltip.jsx +++ b/app/shared-components/Tooltip/Tooltip.jsx @@ -87,11 +87,12 @@ class Tooltip extends React.Component { */ render() { const { - theme, position, header, body + theme, position, header, body, isOnboardingHub } = this.props; const { show } = this.state; const compClassNames = ClassNames({ 'dark-theme': theme === 'dark', + onboarding: isOnboardingHub }); return ( diff --git a/app/scss/partials/_tooltip.scss b/app/shared-components/Tooltip/Tooltip.scss similarity index 94% rename from app/scss/partials/_tooltip.scss rename to app/shared-components/Tooltip/Tooltip.scss index 9ae6d4711..13a8d1f64 100644 --- a/app/scss/partials/_tooltip.scss +++ b/app/shared-components/Tooltip/Tooltip.scss @@ -108,6 +108,19 @@ line-height: 1.5; } } + .onboarding .tooltip-content { + color: $white; + background-color: $black; + font-size: 14px; + opacity: .96; + border-radius: 4px; + &:after { + border-color: transparent transparent $black $black; + } + .tooltip-header { + font-weight: 500; + } + } .dark-theme .tooltip-content { background-color: #333333; color: #ffffff; diff --git a/app/shared-components/Tooltip/index.js b/app/shared-components/Tooltip/index.js new file mode 100644 index 000000000..0a5a9a3ae --- /dev/null +++ b/app/shared-components/Tooltip/index.js @@ -0,0 +1,16 @@ +/** + * Point of entry index.js file for Tooltip + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2019 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import Tooltip from './Tooltip'; + +export default Tooltip; diff --git a/src/classes/Metrics.js b/src/classes/Metrics.js index 3f7280635..c2ada585c 100644 --- a/src/classes/Metrics.js +++ b/src/classes/Metrics.js @@ -407,7 +407,6 @@ class Metrics { * @return {number} The deepest setup page reached by user during setup */ static _getSetupStep(type) { - console.log('conf.setup_step', conf.setup_step); if (conf.metrics.install_complete_all || type === 'install_complete' || type === 'gb_onboarding'