Design spring-plus promo modal

_locales/en/messages.json

@@ -2349,6 +2349,9 @@
   	"seven_day_free_trial": {
 	  "message": "7 Day Free Trial ($14/mo)"
 	},
+	"spring_has_sprung": {
+		"message": "Spring has sprung!"
+	},
   	"full_coverage_protection_promise": {
 	  "message": "Get full-coverage protection across all browsers & apps on your device"
 	},

app/panel/components/BuildingBlocks/ModalExitButton.jsx

@@ -14,6 +14,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import ClassNames from 'classnames';
 
 /**
  * A Functional React component for a Exit Button
@@ -22,19 +23,30 @@ import PropTypes from 'prop-types';
  */
 const ModalExitButton = (props) => {
 	const {
-		toggleModal
+		toggleModal,
+		border
 	} = props;
 
+	const borderClassNames = ClassNames('ModalExitButton__exit flex-container align-middle', {
+		'spring-green': border === 'spring-green'
+	});
+
 	return (
-		<button type="button" onClick={toggleModal} className="ModalExitButton__exit flex-container align-middle">
+		<button type="button" onClick={toggleModal} className={borderClassNames}>
 			<span className="ModalExitButton__exitIcon" />
 		</button>
 	);
 };
 
 // PropTypes ensure we pass required props of the correct type
 ModalExitButton.propTypes = {
-	toggleModal: PropTypes.func.isRequired
+	toggleModal: PropTypes.func.isRequired,
+	border: PropTypes.string,
+};
+
+// Default props used in the App
+ModalExitButton.defaultProps = {
+	border: 'grey'
 };
 
 export default ModalExitButton;

app/panel/components/Panel.jsx

@@ -16,6 +16,7 @@ import { NavLink } from 'react-router-dom';
 import Header from '../containers/HeaderContainer';
 import { PremiumPromoModal } from '../../shared-components';
 import InsightsPromoModal from './InsightsPromoModal';
+import PlusPromoModal from './PlusPromoModal';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
@@ -373,29 +374,57 @@ class Panel extends React.Component {
 		);
 	}
 
+	/**
+	 * @returns {null|JSX}
+	 * @private
+	 * Renders the Insights promo modal if the user is not already an Insights subscriber
+	 */
+	_renderPlusPromoModal = () => {
+		// if (this._plusSubscriber()) return null;
+		if (this._plusSubscriber()) {
+			console.log('test');
+		}
+
+		// sendMessage('promoModals.sawPlusPromo', {});
+
+		// sendMessage('ping', 'promo_modals_show_plus');
+
+		return (
+			<PlusPromoModal
+				handleGoAwayClick={this._handlePromoGoAwayClick}
+				handleSignInClick={this._handlePromoSignInClick}
+				handleSubscribeClick={this._handlePromoSubscribeClick}
+				handleXClick={this._handlePromoXClick}
+				show
+			/>
+		);
+	}
+
+	_renderPromoModal = () => this._renderPlusPromoModal();
+
 	/**
 	 * @returns {null|JSX}
 	 * @private
 	 * Renders either the Insights or the Premium promo modal
 	 */
-	_renderPromoModal = () => {
-		const {
-			promoModal,
-			isPromoModalHidden,
-		} = this.props;
+	// _renderPromoModal = () => {
+	// 	const {
+	// 		promoModal,
+	// 		isPromoModalHidden,
+	// 	} = this.props;
 
-		if (isPromoModalHidden) return null;
+	// 	if (isPromoModalHidden) return null;
 
-		if (promoModal === 'insights') {
-			return this._renderInsightsPromoModal();
-		}
+	// 	if (promoModal === 'insights') {
+	// 		return this._renderInsightsPromoModal();
+	// 	}
 
-		if (promoModal === 'premium') {
-			return this._renderPremiumPromoModal();
-		}
+	// 	if (promoModal === 'premium') {
+	// 		return this._renderPremiumPromoModal();
+	// 	}
 
-		return null;
-	}
+	// 	return null;
+	// }
 
 	/**
 	 * React's required render function. Returns JSX

app/panel/components/PlusPromoModal.jsx

@@ -0,0 +1,94 @@
+/**
+ * PlusPromo Modal Component
+ *
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import ClassNames from 'classnames';
+import Modal from '../../shared-components/Modal';
+import ModalExitButton from './BuildingBlocks/ModalExitButton';
+
+/**
+ * A functional React component for a PlusPromo Modal that may be displayed in the Hub and/or Panel
+ * @return {JSX} JSX for rendering a PlusPromo Modal
+ * @memberof SharedComponents
+ */
+const PlusPromoModal = (props) => {
+	const {
+		show,
+		location,
+		isPlus,
+		handleTryMidnightClick,
+		handleGetPlusClick,
+		handleKeepBasicClick,
+		handleGoAwayClick,
+		handleXClick,
+	} = props;
+
+	const contentClassNames = ClassNames(
+		'PlusPromoModal__content',
+		'flex-container',
+		'flex-dir-column',
+		'align-middle',
+	);
+
+	return (
+		<Modal show={show}>
+			<div className={contentClassNames}>
+				<ModalExitButton className="PlusPromoModal__exitButton" toggleModal={handleXClick} border="spring-green" />
+				<div className="PlusPromoModal__plus-logo" />
+				<div className="PlusPromoModal__main-content-container">
+					<div className="PlusPromoModal__header">
+						<div className="title">
+							<div>Spring has sprung!</div>
+						</div>
+						<div className="description">
+							<div>Support us and unlock a new spring theme, personal tracking insights, and other special perks by upgrading to Ghostery Plus for $2 per month.</div>
+						</div>
+					</div>
+				</div>
+				<div className="PlusPromoModal__call-to-action-container">
+					<div className="PlusPromoModal__button-container flex-container align-center">
+						<button type="button" className="PlusPromoModal__download-button" onClick={handleTryMidnightClick}>
+							<span>UPGRADE TO PLUS</span>
+						</button>
+					</div>
+					<div className="flex-container align-justify">
+						<span className="PlusPromoModal__link">Already a plus subscriber?</span>
+						<span className="PlusPromoModal__link">{t('no_thanks_turn_promos_off')}</span>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+};
+
+
+// PropTypes ensure we pass required props of the correct type
+// PlusPromoModal.propTypes = {
+// 	show: PropTypes.bool.isRequired,
+// 	isPlus: PropTypes.bool.isRequired,
+// 	handleTryMidnightClick: PropTypes.func.isRequired,
+// 	handleGetPlusClick: PropTypes.func.isRequired,
+// 	handleKeepBasicClick: PropTypes.func,
+// 	handleGoAwayClick: PropTypes.func,
+// 	handleXClick: PropTypes.func,
+// };
+
+// const noop = () => {};
+// PlusPromoModal.defaultProps = {
+// 	handleKeepBasicClick: noop,
+// 	handleGoAwayClick: noop,
+// 	handleXClick: noop,
+// };
+
+export default PlusPromoModal;

app/scss/panel.scss

@@ -76,6 +76,7 @@ html body {
 @import './partials/_stats_graph';
 @import './partials/_modal_exit_button';
 @import './partials/insights_promo_modal.scss';
+@import './partials/plus_promo_modal.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';

app/scss/partials/_colors.scss

@@ -39,6 +39,9 @@ $link-blue:					#2092BF; //primary-color
 $button-primary:			#3AA2CF;
 $dark-cyan-blue: 			#325e97; //insights modal border
 
+/*  GREENS  */
+$spring-green:				#6aa103;
+
 /*  MARKETING COLORS */
 $red:						#E74055;
 $purple: 					#720174;

app/scss/partials/_modal_exit_button.scss

@@ -19,9 +19,14 @@
 	width: 26px;
 	height: 26px;
 	border-radius: 15px;
-	border: solid 0.8px #325e97;
 	background-color: #f7f7f7;
 	@include transition(background-color 0.2s);
+	&.grey {
+		border: solid 0.8px #325e97;
+	}
+	&.spring-green {
+		border: solid 2px $spring-green;
+	}
 }
 .ModalExitButton__exit:hover {
 	background-color: #efefef;