diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 07ba8bba7..ab6c6cdc5 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1366,6 +1366,9 @@ "hub_upgrade_additional_protection": { "message": "Additional Protection" }, + "hub_upgrade_maximum_protection": { + "message": "Maximum Protection" + }, "hub_upgrade_browser_tracker_blocking": { "message": "Browser Tracker Blocking" }, @@ -1770,6 +1773,69 @@ "ghostery_browser_hub_onboarding_lets_do_this": { "message": "Let's do this" }, + "ghostery_browser_hub_onboarding_your_privacy_plan": { + "message": "Your Privacy Plan" + }, + "ghostery_browser_hub_onboarding_based_on_your_privacy_preferences": { + "message": "Based on your privacy preferences" + }, + "ghostery_browser_hub_onboarding_ad_free_with_ghostery_plus_subscription": { + "message": "Ad-free with Ghostery Plus subscription" + }, + "ghostery_browser_hub_onboarding_ad_free_promo": { + "message": "40% off for the first 12 months" + }, + "ghostery_browser_hub_onboarding_ad_free_promo_description": { + "message": "Get to what you want faster. A plus subscription gives Ghostery the support we need to provide YOU with an ad-free experience." + }, + "ghostery_browser_hub_onboarding_or": { + "message": "OR" + }, + "ghostery_browser_hub_onboarding_keep": { + "message": "Keep" + }, + "ghostery_browser_hub_onboarding_upgrade": { + "message": "Upgrade" + }, + "ghostery_browser_hub_onboarding_start_trial": { + "message": "Start Trial" + }, + "ghostery_browser_hub_onboarding_see_all_plans": { + "message": "See all plans" + }, + "ghostery_browser_hub_onboarding_private_search": { + "message": "Private search" + }, + "ghostery_browser_hub_onboarding_tracker_protection": { + "message": "Tracker protection" + }, + "ghostery_browser_hub_onboarding_speedy_page_loads": { + "message": "Speedy page loads" + }, + "ghostery_browser_hub_onboarding_intelligence_technology": { + "message": "Intelligence technology" + }, + "ghostery_browser_hub_onboarding_ad_free": { + "message": "Ad free" + }, + "ghostery_browser_hub_onboarding_supports_ghosterys_mission": { + "message": "Supports Ghostery's Mission" + }, + "ghostery_browser_hub_onboarding_unlimited_bandwidth": { + "message": "Unlimited Bandwidth" + }, + "ghostery_browser_hub_onboarding_already_premium_subscriber": { + "message": "You are already a premium subscriber" + }, + "ghostery_browser_hub_onboarding_already_plus_subscriber": { + "message": "You are already a plus subscriber" + }, + "ghostery_browser_hub_onboarding_keep_your_current_plan_or_upgrade": { + "message": "Keep your current plan or upgrade" + }, + "ghostery_browser_hub_onboarding_choose_an_option": { + "message": "Choose an option" + }, "ghostery_browser_hub_onboarding_create_a_ghostery_account": { "message": "Create a Ghostery Account" }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx index abaddba4d..4ce39dc8a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.jsx @@ -11,8 +11,364 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import React from 'react'; +import React, { Fragment } from 'react'; +import ClassNames from 'classnames'; +import PropTypes from 'prop-types'; +import RadioButton from '../../../../shared-components/RadioButton'; +import globals from '../../../../../src/classes/Globals'; +import { BASIC, PLUS, PREMIUM } from '../../../../hub/Views/UpgradePlanView/UpgradePlanViewConstants'; -const ChoosePlanView = () =>

Step 4: Choose Plan View

; +const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/plus`; +const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/en/premium`; + +const searchPromo = () => ( +
+
+
{ t('ghostery_browser_hub_onboarding_ad_free_with_ghostery_plus_subscription') }
+
{ t('ghostery_browser_hub_onboarding_ad_free_promo') }
+
{ t('ghostery_browser_hub_onboarding_ad_free_promo_description') }
+
+); + +const basicCard = (checked, handleClick) => { + const cardClassNames = ClassNames('ChoosePlanView__card basic', { + checked + }); + return ( +
+
+
+ +
+
+
+
+
+

Ghostery

+
+

{t('hub_upgrade_plan_free')}

+
+

{t('hub_upgrade_basic_protection')}

+
+
+ + {t('ghostery_browser_hub_onboarding_private_search')} +
+
+ + {t('ghostery_browser_hub_onboarding_tracker_protection')} +
+
+ + {t('ghostery_browser_hub_onboarding_speedy_page_loads')} +
+
+ + {t('ghostery_browser_hub_onboarding_intelligence_technology')} +
+
+
+
+ ); +}; + +const plusCard = (checked, handleClick, showCTAButton = false) => { + const cardClassNames = ClassNames('ChoosePlanView__card plus', { + checked + }); + return ( + +
+
+
+ +
+
+
+
+

Ghostery Plus

+
+ +

$4.99

+

{t('per_month')}

+ +
+

{t('hub_upgrade_additional_protection')}

+
+
+ + {t('ghostery_browser_hub_onboarding_private_search')} +
+
+ + {t('ghostery_browser_hub_onboarding_tracker_protection')} +
+
+ + {t('ghostery_browser_hub_onboarding_speedy_page_loads')} +
+
+ + {t('ghostery_browser_hub_onboarding_intelligence_technology')} +
+
+ + {t('ghostery_browser_hub_onboarding_ad_free')} +
+
+ + {t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')} +
+
+
+
+ {showCTAButton && ( + // Route to next screen + + )} + + ); +}; + +const premiumCard = (checked, handleClick, showCTAButton = false) => { + const cardClassNames = ClassNames('ChoosePlanView__card premium', { + checked + }); + return ( + +
+
+
+ +
+
+
+
+
+

Ghostery Premium

+
+ +

$11.99

+

{t('per_month')}

+ +
+

{t('hub_upgrade_maximum_protection')}

+
+
+ + {t('ghostery_browser_hub_onboarding_private_search')} +
+
+ + {t('ghostery_browser_hub_onboarding_tracker_protection')} +
+
+ + {t('ghostery_browser_hub_onboarding_speedy_page_loads')} +
+
+ + {t('ghostery_browser_hub_onboarding_intelligence_technology')} +
+
+ + {t('ghostery_browser_hub_onboarding_ad_free')} +
+
+ + {t('ghostery_browser_hub_onboarding_supports_ghosterys_mission')} +
+
+ + VPN +
+
+ + {t('ghostery_browser_hub_onboarding_unlimited_bandwidth')} +
+
+
+
+ {showCTAButton && ( + {t('ghostery_browser_hub_onboarding_upgrade')} + )} + + ); +}; + +class ChoosePlanView extends React.Component { + constructor(props) { + super(props); + this.state = { + selectedPlan: '', + expanded: false + }; + // User object doesn't get populated immediately, let's delay the first render + setTimeout(this.setDefaultPlan, 200); + } + + setDefaultPlan = () => { + const { user } = this.props; + const isPlus = (user && user.plusAccess) || false; + const isPremium = (user && user.premiumAccess) || false; + + if (isPremium) { + this.selectPremiumPlan(); + return; + } + if (isPlus) { + this.selectPlusPlan(); + return; + } + this.selectBasicPlan(); + } + + isBasicPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === BASIC); + }; + + isPlusPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === PLUS); + }; + + isPremiumPlanChecked = () => { + const { selectedPlan } = this.state; + return (selectedPlan === PREMIUM); + }; + + selectBasicPlan = () => this.setState({ selectedPlan: BASIC }); + + selectPlusPlan = () => this.setState({ selectedPlan: PLUS }); + + selectPremiumPlan = () => this.setState({ selectedPlan: PREMIUM }); + + toggleSection = () => { + const { expanded } = this.state; + if (expanded) { + this.setState({ expanded: !expanded }); + } else { + this.setState({ expanded: !expanded }); + } + }; + + renderTitleText = () => { + const { user } = this.props; + const isPlus = (user && user.plusAccess) || false; + const isPremium = (user && user.premiumAccess) || false; + + if (isPremium) return t('ghostery_browser_hub_onboarding_already_premium_subscriber'); + if (isPlus) return t('ghostery_browser_hub_onboarding_already_plus_subscriber'); + return t('ghostery_browser_hub_onboarding_your_privacy_plan'); + }; + + renderSubtitleText = (fromSearchSelectionScreen) => { + const { user } = this.props; + const isPlus = (user && user.plusAccess) || false; + const isPremium = (user && user.premiumAccess) || false; + + if (fromSearchSelectionScreen) return t('ghostery_browser_hub_onboarding_based_on_your_privacy_preferences'); + if (isPremium) return ''; + if (isPlus) return t('ghostery_browser_hub_onboarding_keep_your_current_plan_or_upgrade'); + return t('ghostery_browser_hub_onboarding_choose_an_option'); + }; + + render() { + const { user, didNotSelectGhosterySearch } = this.props; + const { expanded, selectedPlan } = this.state; + + const isBasic = !user; + const isPlus = (user && user.plusAccess && !user.premiumAccess) || false; + const isPremium = (user && user.premiumAccess) || false; + + const arrowClassNames = ClassNames('ChoosePlanView__arrow', { + up: !expanded, + down: expanded + }); + + return ( +
+
{this.renderTitleText()}
+
{this.renderSubtitleText(didNotSelectGhosterySearch)}
+ {didNotSelectGhosterySearch && isBasic && ( + + {searchPromo()} + {/* TODO: For the CTA button below, + 1. If user is signed in, activate the user’s 7-day free trial for the Ghostery Search Plus plan + and move them to Step 5 if signed in + 2. If user is signed out, clicking this should take them to Step 4b (linked) + */} +
{t('ghostery_browser_hub_onboarding_start_trial')}
+
{t('ghostery_browser_hub_onboarding_see_all_plans')}
+
+ + )} + {((isBasic && !didNotSelectGhosterySearch) || expanded || isPlus || isPremium) && ( +
+ {(isPlus) ? ( +
+
+ {plusCard(this.isPlusPlanChecked(), this.selectPlusPlan, isPlus)} +
+
{t('ghostery_browser_hub_onboarding_or')}
+
+ {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan, isPlus)} +
+
+ ) : ( +
+ {isBasic && ( + basicCard(this.isBasicPlanChecked(), this.selectBasicPlan) + )} + {!isPremium && ( + + {plusCard(this.isPlusPlanChecked(), this.selectPlusPlan)} + + )} + {premiumCard(this.isPremiumPlanChecked(), this.selectPremiumPlan)} +
+ )} + {(isBasic && ( +
+ {(selectedPlan === BASIC) && ( + // Change to route to next page + + )} + {selectedPlan === PLUS && ( + {t('next')} + )} + {selectedPlan === PREMIUM && ( + {t('next')} + )} +
+ ))} + {isPremium && ( + // Change to route to next page + + )} +
+ )} +
+ ); + } +} + +// PropTypes ensure we pass required props of the correct type +ChoosePlanView.propTypes = { + user: PropTypes.shape({ + plusAccess: PropTypes.bool, + premiumAccess: PropTypes.bool, + }), + didNotSelectGhosterySearch: PropTypes.bool.isRequired, +}; + +// Default props used in the Plus View +ChoosePlanView.defaultProps = { + user: { + plusAccess: false, + premiumAccess: false, + }, +}; export default ChoosePlanView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss new file mode 100644 index 000000000..90d077b78 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/ChoosePlanView.scss @@ -0,0 +1,318 @@ +.ChoosePlanView { + padding-bottom: 20px; +} +.ChoosePlanView__yourPrivacyPlan { + margin: auto; + font-size: 24px; + display: flex; + justify-content: center; +} +.ChoosePlanView__subtitle { + margin-top: 12px; + display: flex; + justify-content: center; + font-size: 18px; +} +.ChoosePlanView__searchPromoContainer { + width: 354px; + height: 381px; + margin: 48px auto 0 auto; + border-radius: 4px; + border: solid 4px $ghosty-blue; +} +.ChoosePlanView__searchLogo { + height: 37px; + width: 193px; + margin: 65px auto 0 auto; + background-image: url('/app/images/hub/ChoosePlanView/search.svg'); +} +.ChoosePlanView__adFree { + margin: 16px auto 0 auto; + color: #b8860b; + font-size: 18px; + line-height: 32px; + font-weight: 600; + width: 220px; + text-align: center; +} +.ChoosePlanView__adFreePromo { + margin: auto; + font-size: 18px; + line-height: 32px; + text-align: center; +} +.ChoosePlanView__adFreePromoDescription { + margin: 16px auto 0 auto; + height: 88px; + width: 250px; + font-size: 16px; + line-height: 1.38; + text-align: center; + color: $tundora; +} +.ChoosePlanView__searchCTAButton { + display: flex; + justify-content: center; + margin: 48px auto 0 auto; + height: 44px; + width: 162px; + padding: 7.7px 14px; + line-height: 22px; + background: linear-gradient( + 45deg, + #ff7e74 50%, + $ghosty-blue + ); + background-size: 200% 100%; + background-position: 100% 50%; + transition: 0.25s all; + border: none; + color: $white; + font-size: 14.1px; + font-weight: 700; + border-radius: 3.5px; + text-align: center; + line-height: 2.05; + cursor: pointer; + + &:hover { + background-position: 0% 50%; + transition: 0.25s all; + } + &:focus { + color: $white; + } +} +.ChoosePlanView__premiumCTAButton { + display: flex; + justify-content: center; + margin: 48px auto 0 auto; + height: 44px; + width: 162px; + padding: 7.7px 14px; + line-height: 22px; + background: linear-gradient( + 45deg, + #6c097a 50%, + #03a9ec + ); + background-size: 200% 100%; + background-position: 100% 50%; + transition: 0.25s all; + border: none; + color: $white; + font-size: 14.1px; + font-weight: 700; + border-radius: 3.5px; + text-align: center; + line-height: 2.05; + cursor: pointer; + + &:hover { + color: $white; + background-position: 0% 50%; + transition: 0.25s all; + } +} +.ChoosePlanView__seeAllPlans { + margin-top: 48px; + display: flex; + justify-content: center; + color: $ghosty-blue; + font-size: 16px; + text-decoration: underline; + cursor: pointer; +} +.ChoosePlanView__plansContainer { + margin-top: 20px; + padding-top: 20px; + + .ChoosePlanView__cardOuter { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 15px; + } +} +.ChoosePlanView__orCardContainer { + display: flex; +} +.ChoosePlanView__or { + display: flex; + align-items: center; + justify-content: center; + padding: 0 66px; + height: 180px; + font-size: 24px; + color: $tundora; +} +.ChoosePlanView__ctaButtonContainer { + display: flex; + justify-content: center; +} +.ChoosePlanView__keepOrUpgradeContainer { + margin: 40px auto; +} +.ChoosePlanView__arrow { + margin: 15px auto 0 auto; + height: 12px; + width: 12px; + border-left: 2px solid $ghosty-blue; + border-top: 2px solid $ghosty-blue; + cursor: pointer; + + &.down { + transform: rotate(45deg); + } + &.up { + transform: rotate(225deg); + } +} +.ChoosePlanView__card { + height: 670px; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.5); + margin-bottom: rem-calc(40); + width: 250px; + margin-left: auto; + margin-right: auto; + text-align: center; + padding-bottom: rem-calc(40); + border: 4px solid white; + + &:hover, &.checked { + border: 4px solid $ghosty-blue; + .ghostery-free-image-container, + .ghostery-plus-image-container, + .ghostery-premium-image-background { + width: 244px; + margin-left: -1px; + } + } + h2 { + color: $tundora; + font-family: "Roboto Condensed"; + font-size: 18px; + font-weight: 400; + margin-top: 22px; + margin-bottom: 6px; + } + &-image-top { + margin-top: -76px; + width: 100%; + } + &-sub-header { + margin-bottom: rem-calc(15); + } + .ghostery-free-image-container { + margin: -3px 0 0 -4px; + width: 250px; + height: 85px; + background-color: rgba(0, 174, 240, .25); + display: flex; + justify-content: center; + align-items: center; + + .ghostery-free-image { + width: 55px; + height: 65px; + background-image: url('/app/images/hub/upgrade/ghostery-basic-card.svg'); + background-repeat: no-repeat; + background-position: center; + } + } + .ghostery-plus-image-container { + margin: -3px 0 0 -4px; + width: 250px; + height: 85px; + background-image: linear-gradient(to right, rgba(240,174,133,.25), rgba(241,216,158,.25)); + .ghostery-plus-image { + margin: auto; + width: 225px; + height: 87px; + background-image: url('/app/images/hub/upgrade/ghostery-plus-card.svg') + } + } + .ghostery-premium-image-container { + margin-left: -4px; + position: relative; + } + .ghostery-premium-image { + position: absolute; + margin-top: -79px; + margin-left: 9px; + width: 233px; + height: 161px; + background-image: url('/app/images/hub/upgrade/ghostery-premium-card.svg'); + } + .ghostery-premium-image-background { + margin: -3px 0 0 -4px; + width: 250px; + height: 85px; + background-image: linear-gradient(to right, rgba(113,1,116,.25), rgba(90,37,142,.25) 18%, rgba(42,110,194,.25) 57%, rgba(12,156,227,.25) 86%, rgba(0,174,240,.25)); + } + .card-sub-header { + font-size: 14px; + } +} +.ChoosePlanView__price { + min-height: 85px; + margin-bottom: rem-calc(20); + &-blue { + color: $price-blue; + } + &-blue-alt { + color: $blue-alt; + } + &-gold { + color: $price-gold; + } + &-purple { + color: $price-purple; + } + p { + margin-bottom: 0; + @include breakpoint($medium-large-breakpoint down) { + &.sub-text:first-child { + margin-top: 4px; + } + } + &.sub-text { + font-weight: 500; + } + } +} +.ChoosePlanView__valuePropList { + margin: auto; + width: 174px; + + &.basic { + width: 145px; + } +} +.ChoosePlanView__cardSubCopy { + display: flex; + justify-content: flex-start; + margin-bottom: 5px; +} +.check { + display: inline-block; + width: 20px; + height: 20px; + background-repeat: no-repeat; + margin-top: 3px; + &.blue { + background-image: buildCheckIcon($price-blue); + } + &.yellow { + background-image: buildCheckIcon($price-gold); + } + &.purple { + background-image: buildCheckIcon($price-purple); + } +} +.ChoosePlanView__radioButtonContainer { + padding: 11px; + margin-bottom: 84px; + display: flex; + justify-content: center; +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx new file mode 100644 index 000000000..f21eb0832 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.jsx @@ -0,0 +1,35 @@ +/** + * Point of entry index.js file for Ghostery Browser Hub Choose Plan View + * + * Ghostery Browser Extension + * https://www.ghostery.com/ + * + * Copyright 2020 Ghostery, Inc. All rights reserved. + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0 + */ + +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; + +import ChoosePlanView from './ChoosePlanView'; + +/** + * 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 => ({ ...state.account }); + +/** + * Bind the component's action creators using Redux's bindActionCreators. + * @param {function} dispatch redux store method which dispatches actions + * @return {function} to be used as an argument in redux connect call + * @memberof SetupContainers + */ +const mapDispatchToProps = dispatch => ({}); + +export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ChoosePlanView)); diff --git a/app/images/hub/ChoosePlanView/search.svg b/app/images/hub/ChoosePlanView/search.svg new file mode 100644 index 000000000..1c52a8174 --- /dev/null +++ b/app/images/hub/ChoosePlanView/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/panel/components/BuildingBlocks/index.js b/app/panel/components/BuildingBlocks/index.js index 8f73d6052..edc925cbc 100644 --- a/app/panel/components/BuildingBlocks/index.js +++ b/app/panel/components/BuildingBlocks/index.js @@ -21,8 +21,6 @@ import GhosteryFeature from './GhosteryFeature'; import NotScanned from './NotScanned'; import PauseButton from './PauseButton'; import ToggleSlider from './ToggleSlider'; -import RadioButtonGroup from './RadioButtonGroup'; -import RadioButton from './RadioButton'; import ModalExitButton from './ModalExitButton'; export { @@ -33,7 +31,5 @@ export { NotScanned, PauseButton, ToggleSlider, - RadioButtonGroup, - RadioButton, ModalExitButton }; diff --git a/app/panel/components/Settings/AdBlocker.jsx b/app/panel/components/Settings/AdBlocker.jsx index 2a5466602..dff505050 100644 --- a/app/panel/components/Settings/AdBlocker.jsx +++ b/app/panel/components/Settings/AdBlocker.jsx @@ -13,7 +13,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { RadioButtonGroup } from '../BuildingBlocks'; +import RadioButtonGroup from '../../../shared-components/RadioButtonGroup/RadioButtonGroup'; /** * @class Implement Ad Blocker Settings subview as a React component. diff --git a/app/panel/components/Subscription/SubscriptionThemes.jsx b/app/panel/components/Subscription/SubscriptionThemes.jsx index f486277d6..72087f438 100644 --- a/app/panel/components/Subscription/SubscriptionThemes.jsx +++ b/app/panel/components/Subscription/SubscriptionThemes.jsx @@ -13,7 +13,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { RadioButtonGroup } from '../BuildingBlocks'; +import RadioButtonGroup from '../../../shared-components/RadioButtonGroup/RadioButtonGroup'; /** * @class Implement Themes subview as a React component. diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 759692615..d259e061c 100644 --- a/app/scss/hub.scss +++ b/app/scss/hub.scss @@ -86,6 +86,9 @@ html, body, #root { @import '../hub/Views/LogInView/LogInView.scss'; @import '../hub/Views/CreateAccountView/CreateAccountView.scss'; @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/ChoosePlanView/ChoosePlanView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss'; // Imports from ../shared-components directory @import '../shared-components/ExitButton/ExitButton.scss'; @@ -96,3 +99,4 @@ html, body, #root { @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss'; @import '../shared-components/ToggleSwitch/ToggleSwitch.scss'; @import '../shared-components/ForgotPassword/ForgotPassword.scss'; +@import './partials/radio_button'; diff --git a/app/scss/partials/_colors.scss b/app/scss/partials/_colors.scss index cd15e484b..3b99e216c 100644 --- a/app/scss/partials/_colors.scss +++ b/app/scss/partials/_colors.scss @@ -49,8 +49,8 @@ $spring-green: #6aa103; /* MARKETING COLORS */ $red: #E74055; $purple: #720174; -$dark-purple: #5B005C; -$dark-magenta: #920094; +$dark-purple: #5B005C; +$dark-magenta: #920094; $sinopia: #D3451E; $apple: #67A73A; //button_special $caper: #CEECAF; //success-color diff --git a/app/scss/partials/_radio_button.scss b/app/scss/partials/_radio_button.scss index 44a33a3fd..7675d62e6 100644 --- a/app/scss/partials/_radio_button.scss +++ b/app/scss/partials/_radio_button.scss @@ -40,7 +40,17 @@ align-items: center; justify-content: center; box-sizing: border-box; - &.checked { + + &.altDesign { + height: 24px; + width: 24px; + border: 1px solid black; + &.checked { + background-color: #00aef0; + border: none; + } + } + &.checked:not(.altDesign) { border: 2px solid #2092bf; } } @@ -51,4 +61,14 @@ background-color: #2092bf; border-radius: 50%; } + + &.altDesign { + height: 14px; + width: 14px; + background-image: buildCheckIcon(#FFF); + border: none; + &.checked { + background-color: transparent; + } + } } diff --git a/app/panel/components/BuildingBlocks/RadioButton.jsx b/app/shared-components/RadioButton/RadioButton.jsx similarity index 93% rename from app/panel/components/BuildingBlocks/RadioButton.jsx rename to app/shared-components/RadioButton/RadioButton.jsx index 12924cfb3..63cfba0fe 100644 --- a/app/panel/components/BuildingBlocks/RadioButton.jsx +++ b/app/shared-components/RadioButton/RadioButton.jsx @@ -21,12 +21,14 @@ import ClassNames from 'classnames'; */ const RadioButton = (props) => { - const { checked, handleClick } = props; + const { checked, handleClick, altDesign } = props; const OuterCircleClassNames = ClassNames('RadioButton__outerCircle', { checked, + altDesign }); const InnerCircleClassNames = ClassNames('RadioButton__innerCircle', { checked, + altDesign }); return ( diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.js b/app/shared-components/RadioButton/index.js similarity index 68% rename from app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.js rename to app/shared-components/RadioButton/index.js index 72ed11332..a4160127a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step4_ChoosePlanView/index.js +++ b/app/shared-components/RadioButton/index.js @@ -1,5 +1,5 @@ /** - * Point of entry index.js file for Ghostery Browser Hub Choose Plan View + * Point of entry index.js file for Radio Button * * Ghostery Browser Extension * https://www.ghostery.com/ @@ -11,6 +11,6 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0 */ -import ChoosePlanView from './ChoosePlanView'; +import RadioButton from './RadioButton'; -export default ChoosePlanView; +export default RadioButton; diff --git a/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx b/app/shared-components/RadioButtonGroup/RadioButtonGroup.jsx similarity index 97% rename from app/panel/components/BuildingBlocks/RadioButtonGroup.jsx rename to app/shared-components/RadioButtonGroup/RadioButtonGroup.jsx index 2722ceddc..a91d4b8f4 100644 --- a/app/panel/components/BuildingBlocks/RadioButtonGroup.jsx +++ b/app/shared-components/RadioButtonGroup/RadioButtonGroup.jsx @@ -13,7 +13,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -import RadioButton from './RadioButton'; +import RadioButton from '../RadioButton'; /** * @class Implements a radio button group diff --git a/app/shared-components/RadioButtonGroup/index.js b/app/shared-components/RadioButtonGroup/index.js new file mode 100644 index 000000000..a7d9aa0d8 --- /dev/null +++ b/app/shared-components/RadioButtonGroup/index.js @@ -0,0 +1,16 @@ +/** + * Point of entry index.js file for Radio Button Group + * + * 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 RadioButtonGroup from './RadioButtonGroup'; + +export default RadioButtonGroup;