Add login link to initial plus promo in panel. update plus promo font…

…s. finish localization-proofing plus promos

_locales/en/messages.json

@@ -2022,16 +2022,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 +2116,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 +2144,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/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;

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,18 +81,25 @@ $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; }
 }
 
 .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,22 +231,21 @@ $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;
 	transition: background-color 0.25s ease-out, color 0.25s ease-out;
 	-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;
 	}