diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f1515b434..a436ed0a1 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -527,25 +527,31 @@ "message": "Set Up Ghostery" }, "panel_insights_audit_tags": { - "message": "Audit marketing tags on a page" + "message": "Audit marketing tags on a page", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 30." }, "panel_insights_promotion_explore_trends": { - "message": "Explore global digital trends" + "message": "Explore global digital trends", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 29." }, "panel_insights_promotion_call_to_action": { "message": "Try for free" }, "panel_insights_promotion_header": { - "message": "Try Ghostery Insights" + "message": "Try Ghostery Insights", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 35." }, "panel_insights_promotion_description": { - "message": "Speed up and clean up digital user experience with our professional tag analytics tool." + "message": "Speed up and clean up digital user experience with our professional tag analytics tool.", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 90." }, "panel_insights_promotion_trace_poor_performance": { - "message": "Trace sources of poor performance" + "message": "Trace sources of poor performance", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 33." }, "panel_insights_promotion_watch_pings": { - "message": "Watch pings fire in real-time" + "message": "Watch pings fire in real-time", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 29." }, "panel_about_panel_header": { "message": "About Ghostery Browser Extension" @@ -2022,16 +2028,20 @@ "message": "per month" }, "protection_for_this_browser": { - "message": "Protection for this browser" + "message": "Protection for this browser", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 27." }, "blocks_ads": { - "message": "Blocks Ads" + "message": "Blocks Ads", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 27." }, "blocks_trackers": { - "message": "Blocks Trackers" + "message": "Blocks Trackers", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 27." }, "fast_browsing": { - "message": "Fast Browsing" + "message": "Fast Browsing", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 27." }, "select_basic": { "message": "Select Basic" @@ -2112,7 +2122,8 @@ "message": "Historical Stats" }, "priority_support": { - "message": "Priority Support" + "message": "Priority Support", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 25." }, "on": { "message": "On" @@ -2139,33 +2150,36 @@ "message": "Looks like we can't find this email and password combo. Give it another shot." }, "all_basic_features_plus_COLON": { - "message": "All basic features, plus:" + "message": "All basic features, plus:", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 27." }, "historical_tracker_stats": { - "message": "Historical Tracker Stats" + "message": "Historical Tracker Stats", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 25." }, "new_color_themes": { - "message": "New Color Themes" + "message": "New Color Themes", + "description": "Appears in a non-responsive modal. Character limit (including spaces and punctuation): 25." }, "upgrade_cta_TEXT": { "message": "Unlock historical tracker insights, priority support access, and new color themes by upgrading to Ghostery Plus for only $2 per month.", - "description": "Body text in a non-responsive modal. Character limit: 135." + "description": "Body text in a non-responsive modal. Character limit (including spaces and punctuation): 135." }, "upgrade_your_ghostery_experience": { "message": "Upgrade your Ghostery experience", - "description": "Header text for a non-responsive modal. Character limit: 40." + "description": "Header text for a non-responsive modal. Character limit (including spaces and punctuation): 40." }, "upgrade_to_plus": { "message": "Upgrade to Plus", - "description": "Button text in a non-responsive modal. Character limit: 35." + "description": "Button text in a non-responsive modal. Character limit (including spaces and punctuation): 35." }, "no_thanks_turn_promos_off": { "message": "No thanks, turn promos off", - "description": "Text link in a non-responsive modal. Character limit: 28." + "description": "Text link in a non-responsive modal. Character limit (including spaces and punctuation): 28." }, "already_subscribed_sign_in": { "message": "Already subscribed? Sign In", - "description": "Character limit: 28." + "description": "Character limit (including spaces and punctuation): 28." }, "promos_turned_off_notification": { "message": "Promos turned off. You can turn them back on in", diff --git a/app/panel/components/Panel.jsx b/app/panel/components/Panel.jsx index 75bc16e6f..eaf53021f 100644 --- a/app/panel/components/Panel.jsx +++ b/app/panel/components/Panel.jsx @@ -219,7 +219,6 @@ class Panel extends React.Component { }; _handlePromoSignInClick = () => { - // TODO metrics ping this.props.actions.togglePromoModal(); history.push({ pathname: '/login', @@ -303,6 +302,7 @@ class Panel extends React.Component { location="panel" handleSelectBasicClick={this._handlePromoSelectBasicClick} handleSelectPlusClick={this._handlePromoSelectPlusClick} + handleSignInClick={this._handlePromoSignInClick} /> ); } diff --git a/app/panel/components/PlusUpgradePromoModal.jsx b/app/panel/components/PlusUpgradePromoModal.jsx index c0e701900..8b6898d7e 100644 --- a/app/panel/components/PlusUpgradePromoModal.jsx +++ b/app/panel/components/PlusUpgradePromoModal.jsx @@ -60,7 +60,7 @@ class PlusUpgradePromoModal extends React.Component {
- {t('upgrade_to_plus')} + {t('upgrade_to_plus')}
diff --git a/app/scss/partials/_insights_promo_modal.scss b/app/scss/partials/_insights_promo_modal.scss index 299ac8f5c..c246b0cd5 100644 --- a/app/scss/partials/_insights_promo_modal.scss +++ b/app/scss/partials/_insights_promo_modal.scss @@ -1,3 +1,20 @@ +/** + * Insights Promo Modal Sass + * + * 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 + */ + +// Insights Promo Modal +$standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + .InsightsModal__content { background-color: $alabaster; position: relative; @@ -17,7 +34,7 @@ } .InsightsModal__header { - font-family: 'Roboto'; + font-family: $standard-font-family; height: 27.1px; font-size: 20px; font-weight: 900; @@ -33,7 +50,7 @@ font-weight: 500; text-align: center; margin-bottom: 12.8px; - font-family: 'Roboto'; + font-family: $standard-font-family; } .InsightsModal__features { @@ -47,7 +64,7 @@ } .InsightsModal__feature-text { - font-family: 'Roboto'; + font-family: $standard-font-family; font-size: 14px; line-height: 39px; color: $medium-gray; @@ -70,14 +87,14 @@ .InsightsModal__call-to-action { display: flex; justify-content: center; - width: 176px; + padding: 0px 50px 0px; // more localization-proof than hardcoding width height: 36px; margin-top: 18px; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12); background-image: linear-gradient(101deg, #070e18, #1678a0); font-size: 14px; - font-family: 'Roboto Condensed'; + font-family: $condensed-font-family; letter-spacing: .5px; color: $white; line-height: 36px; @@ -88,7 +105,7 @@ } .InsightsModal__link { - font-family: 'Roboto'; + font-family: $standard-font-family; font-size: 15px; color: $tundora; &:hover { diff --git a/app/shared-components/PlusPromoModal/PlusPromoModal.jsx b/app/shared-components/PlusPromoModal/PlusPromoModal.jsx index 73b4d833f..a18a9abf8 100644 --- a/app/shared-components/PlusPromoModal/PlusPromoModal.jsx +++ b/app/shared-components/PlusPromoModal/PlusPromoModal.jsx @@ -30,10 +30,12 @@ const PlusPromoModal = (props) => { show, location, handleSelectBasicClick, - handleSelectPlusClick + handleSelectPlusClick, + handleSignInClick, } = props; const isInHub = location === 'hub'; + const isInPanel = location === 'panel'; const locationClassName = { 'in-hub': isInHub, @@ -95,7 +97,7 @@ const PlusPromoModal = (props) => {
- {t('select_basic')} + {t('select_basic')}
@@ -109,7 +111,7 @@ const PlusPromoModal = (props) => { {t('locale_appropriate_currency_icon')} {t('plus_monthly_subscription_price_number')} - {t('per month')} + {t('per_month')}
{t('all_basic_features_plus_COLON')}
@@ -128,10 +130,15 @@ const PlusPromoModal = (props) => {
- {t('select_plus')} + {t('select_plus')} + {isInPanel && ( +
+ {t('already_subscribed_sign_in')} +
+ )} ); @@ -143,6 +150,11 @@ PlusPromoModal.propTypes = { location: PropTypes.string.isRequired, handleSelectBasicClick: PropTypes.func.isRequired, handleSelectPlusClick: PropTypes.func.isRequired, + handleSignInClick: PropTypes.func, +}; + +PlusPromoModal.defaultProps = { + handleSignInClick: () => {}, }; export default PlusPromoModal; diff --git a/app/shared-components/PlusPromoModal/PlusPromoModal.scss b/app/shared-components/PlusPromoModal/PlusPromoModal.scss index 100160bdb..c8c305516 100644 --- a/app/shared-components/PlusPromoModal/PlusPromoModal.scss +++ b/app/shared-components/PlusPromoModal/PlusPromoModal.scss @@ -13,6 +13,7 @@ // Plus Promo Modal $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; .PlusPromoModal__gold-ghostie-badge { margin-top: 21px; @@ -80,6 +81,8 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, .PlusPromoModal__choose-your-plan { font-size: 18px; font-weight: bold; + font-family: $standard-font-family; + color: #4a4a4a; &.in-hub { padding-top: 10px; } &.in-panel { padding-top: 17px; } @@ -87,11 +90,16 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, .PlusPromoModal__options-container { height: 100%; - margin-top: 44px; display: flex; - &.in-hub { justify-content: space-evenly; } - &.in-panel { justify-content: space-around; } + &.in-hub { + justify-content: space-evenly; + margin-top: 44px; + } + &.in-panel { + justify-content: space-around; + margin-top: 34px; + } } .PlusPromoModal__option-container { @@ -130,6 +138,7 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, .PlusPromoModal__recommended-banner { position: absolute; + font-family: $standard-font-family; &.in-hub { left: -30px; @@ -154,9 +163,9 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, .PlusPromoModal__option-header { margin-top: 20px; + font-family: $condensed-font-family; font-size: 19px; font-weight: bold; - letter-spacing: -0.5px; text-align: center; &.basic { color: #1dafed; } @@ -172,26 +181,30 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, } .PlusPromoModal__currency-sign { + font-family: $condensed-font-family; font-size: 30px; font-weight: bold; } .PlusPromoModal__amount { vertical-align: middle; - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: $standard-font-family; font-size: 58px; + font-weight: normal; } .PlusPromoModal__per-month { vertical-align: sub; + font-family: $condensed-font-family; font-size: 18px; font-weight: bold; } .PlusPromoModal__option-description-item { padding-bottom: 15px; - font-size: 16px; text-align: center; + font-family: $standard-font-family; + font-size: 16px; color: #333333; &.italic { @@ -218,12 +231,12 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, } .PlusPromoModal__button { - border-radius: 3px; display: flex; justify-content: center; align-items: center; + border-radius: 3px; font-weight: bold; - font-family: $standard-font-family; + font-family: $condensed-font-family; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; @@ -231,9 +244,8 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, -webkit-appearance: none; &.basic { - font-size: 11px; - width: 135px; height: 40px; + font-size: 14px; border: solid 2px #15b4f2; background-color: white; color: #2cbcf4; @@ -245,8 +257,7 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, } &.plus { - font-size: 11px; - width: 163px; + font-size: 14px; height: 38px; border: none; background-image: linear-gradient(to bottom, #2fdbfa, #15b4f2); @@ -268,8 +279,11 @@ $standard-font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, background-color: #0698d6; } + .side-padded { + padding: 0px 20px 0px; // more localization-proof than hardcoding width + } + .button-text { - padding: 0px 20px 0px; color: white; text-decoration: none; }