Promo modal css fixes and upgrades

_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",

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}
 			/>
 		);
 	}

app/panel/components/PlusUpgradePromoModal.jsx

@@ -60,7 +60,7 @@ class PlusUpgradePromoModal extends React.Component {
 					</div>
 					<div className="PlusPromoModal__button-container">
 						<PanelToTabLink onClick={this.handleSubscribeClick} className="PlusPromoModal__button upgrade" href={`http://checkout.${DOMAIN}.com/plus/`}>
-							<span className="button-text">{t('upgrade_to_plus')}</span>
+							<span className="side-padded button-text">{t('upgrade_to_plus')}</span>
 						</PanelToTabLink>
 					</div>
 					<div className="PlusPromoModal__text-link-container">

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 {

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) => {
 							</div>
 						</div>
 						<div className="PlusPromoModal__button basic" onClick={handleSelectBasicClick}>
-							<span>{t('select_basic')}</span>
+							<span className="side-padded">{t('select_basic')}</span>
 						</div>
 					</div>
 					<div className="PlusPromoModal__option-container">
@@ -109,7 +111,7 @@ const PlusPromoModal = (props) => {
 								<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
 								<span className="PlusPromoModal__amount">{t('plus_monthly_subscription_price_number')}</span>
 								<span> </span>
-								<span className="PlusPromoModal__per-month">{t('per month')}</span>
+								<span className="PlusPromoModal__per-month">{t('per_month')}</span>
 							</div>
 							<div className="PlusPromoModal__option-description">
 								<div className="PlusPromoModal__option-description-item italic">{t('all_basic_features_plus_COLON')}</div>
@@ -128,10 +130,15 @@ const PlusPromoModal = (props) => {
 							</div>
 						</div>
 						<a href={`https://checkout.${DOMAIN}.com/plus`} target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus" onClick={handleSelectPlusClick}>
-							<span>{t('select_plus')}</span>
+							<span className="side-padded">{t('select_plus')}</span>
 						</a>
 					</div>
 				</div>
+				{isInPanel && (
+					<div onClick={handleSignInClick} className="PlusPromoModal__text-link">
+						{t('already_subscribed_sign_in')}
+					</div>
+				)}
 			</div>
 		</Modal>
 	);
@@ -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;