Created modal UI

app/images/panel/checked-circle-icon.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 58 (101010) - https://sketch.com -->
+    <title>99F3B28B-E969-460E-887A-CDE6B30A5D8C</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="In-App-Promo-&quot;Upgrade&quot;-(Insights)" transform="translate(-319.000000, -283.000000)" fill="#167AA4">
+            <g id="Group-7" transform="translate(31.000000, 26.000000)">
+                <path d="M297,257 C301.970563,257 306,261.029437 306,266 C306,270.970563 301.970563,275 297,275 C292.029437,275 288,270.970563 288,266 C288,261.029437 292.029437,257 297,257 Z M300.34456,262.528846 C298.942616,264.091702 297.550032,265.641971 296.157449,267.194338 C295.261993,266.492626 294.381098,265.802452 293.491883,265.104936 C293.178838,265.50981 292.877233,265.902097 292.567308,266.303825 C293.830929,267.293983 295.07791,268.272604 296.336332,269.259615 C298.048201,267.351673 299.750709,265.454219 301.461538,263.546276 C301.086092,263.204336 300.721046,262.871835 300.34456,262.528846 Z" id="Combined-Shape-Copy-3"></path>
+            </g>
+        </g>
+    </g>
+</svg>

app/panel/components/Panel.jsx

@@ -16,13 +16,18 @@ import Header from '../containers/HeaderContainer';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
+import { Modal } from '../../shared-components';
+import ModalExitButton from '../../shared-components/ModalExitButton/ModalExitButton';
 /**
  * @class Implement base view with functionality common to all views.
  * @memberof PanelClasses
  */
 class Panel extends React.Component {
 	constructor(props) {
 		super(props);
+		this.state = {
+			showModal: true
+		};
 
 		// event bindings
 		this.closeNotification = this.closeNotification.bind(this);
@@ -58,6 +63,77 @@ class Panel extends React.Component {
 		this._dynamicUIPort.disconnect();
 	}
 
+	/**
+	* Function to handle clicking yes on the Modal
+	*/
+	_answerModalYes = () => {
+		this._toggleModal();
+	}
+
+	/**
+	* Function to toggle the Modal
+	*/
+	_toggleModal = () => {
+		const { showModal } = this.state;
+		this.setState({
+			showModal: !showModal,
+		});
+	}
+
+	_renderModalChildren() {
+		return (
+			<div className="InsightsModal__content flex-container flex-dir-column align-middle">
+				<ModalExitButton exitModal={this._toggleModal} className="InsightsModal__exitButton" hrefExit="Test" textExit="" />
+				<div className="InsightsModal__image" />
+				<div className="InsightsModal__header">
+					Try Ghostery Insights
+				</div>
+				<div className="InsightsModal__description">
+					Speed up and clean up digital user experience with our professional tag analytics tool.
+				</div>
+				<div className="flex-container">
+					<div className="flex-container flex-dir-column InsightsModal__feature-column-1">
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<div className="InsightsModal__featureText">
+								Identify sources of poor performance
+							</div>
+						</div>
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								Audit all marketing tags on a site
+							</span>
+						</div>
+					</div>
+					<div className="InsightsModal__feature-column-2 flex-container flex-dir-column">
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								View requests firing in real-time
+							</span>
+						</div>
+						<div className="flex-container align-middle">
+							<span className="InsightsModal__checkedCircleIcon" />
+							<span className="InsightsModal__featureText">
+								View digital trends over time
+							</span>
+						</div>
+					</div>
+				</div>
+				<div className="InsightsModal__callToActionContainer flex-container flex-dir-column">
+					<button type="button" className="btn InsightsModal__callToAction align-self-middle">
+						<span className="InsightsModal__callToActionText">CTA TEXT</span>
+					</button>
+					<div className="InsightsModal__otherOptionsContainer flex-container align-justify">
+						<a className="InsightsModal__link">Already an Insights subscriber?</a>
+						<a className="InsightsModal__link">No thanks, maybe later</a>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
 	/**
 	 * Close banner notification
 	 * @param  {Object} event
@@ -148,6 +224,7 @@ class Panel extends React.Component {
 		}
 	}
 
+
 	/**
 	 * Helper render function for the notification callout
 	 * @return {JSX} JSX for the notification callout
@@ -203,6 +280,7 @@ class Panel extends React.Component {
 			return null;
 		}
 
+		const { showModal } = this.state;
 		const notificationText = this.props.notificationShown && this.renderNotification();
 
 		return (
@@ -220,6 +298,9 @@ class Panel extends React.Component {
 					</div>
 				</div>
 				<Header />
+				<Modal show={showModal}>
+					{this._renderModalChildren()}
+				</Modal>
 				<DynamicUIPortContext.Provider value={this._dynamicUIPort}>
 					{ this.props.children }
 				</DynamicUIPortContext.Provider>

app/scss/panel.scss

@@ -73,3 +73,10 @@ html body {
 @import './partials/_subscribe';
 @import './partials/_stats';
 @import './partials/_stats_graph';
+@import './partials/_insights_modal.scss';
+
+// Imports from ../shared-components directory
+@import './partials/shared_components_svgs';
+@import '../shared-components/Modal/Modal.scss';
+@import '../shared-components/ExitButton/ExitButton.scss';
+@import '../shared-components/ModalExitButton/ModalExitButton.scss';

app/scss/partials/_fonts.scss

@@ -8,7 +8,7 @@
  * 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
@@ -182,3 +182,45 @@
 	src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../fonts/opensans-semibold-latin.woff2) format('woff2');
 	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
+/* roboto-300 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('../../../app/fonts/roboto-latin-bold-300.woff2') format('woff2'),
+}
+/* roboto-regular - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('../../../app/fonts/roboto-all-charsets.woff2') format('woff2'),
+}
+/* roboto-500 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('../../../app/fonts/roboto-latin-bold-500.woff2') format('woff2'),
+}
+/* roboto-700 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('../../../app/fonts/roboto-latin-bold-700.woff2') format('woff2'),
+}
+/* roboto-900 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('../../../app/fonts/roboto-latin-bold-900.woff2') format('woff2'),
+}
+/* roboto-condensed-700 - latin */
+@font-face {
+  font-family: 'Roboto Condensed';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url('../../../app/fonts/roboto-condensed-latin-bold-700.woff2') format('woff2'), /* Super Modern Browsers */
+}

app/scss/partials/_insights_modal.scss

@@ -0,0 +1,106 @@
+
+.InsightsModal__content {
+	background-color: #f7f7f7;
+	position: relative;
+	width: 518px;
+	min-height: 437px;
+	padding-top: 21px;
+	color: #4a4a4a;
+	border: 2px solid #325e97;
+	z-index: 10;
+}
+
+.InsightsModal__image {
+	height: 94px;
+	width: 177px;
+	margin-bottom: 16px;
+	background-size: 177px 94px;
+	background-image: url('/app/images/panel/insights-ribbon.svg');
+	background-position: center center;
+	background-repeat: no-repeat;
+}
+.InsightsModal__header {
+	font-family: 'Roboto';
+	width: 348px;
+	height: 27.1px;
+	font-size: 20px;
+	font-weight: 900;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.35;
+	letter-spacing: normal;
+	text-align: center;
+	color: #4a4a4a;
+	margin-bottom: 8.9px;
+}
+.InsightsModal__description {
+	width: 372px;
+	height: 54.2px;
+	font-size: 18px;
+	font-weight: 700;
+	font-style: normal;
+	font-stretch: normal;
+	line-height: 1.5;
+	letter-spacing: normal;
+	text-align: center;
+	color: #4a4a4a;
+	margin-bottom: 12.8px;
+	font-family: 'Roboto';
+}
+.InsightsModal__feature-column-1 {
+	width: 268px;
+	margin-left: 10px;
+}
+.InsightsModal__feature-column-2 {
+	width: 229.8px;
+}
+.InsightsModal__featureText {
+	font-family: 'Roboto';
+	font-size: 14px;
+	line-height: 39px;
+	color: #333333;
+}
+.InsightsModal__checkedCircleIcon {
+	height: 18px;
+	width: 18px;
+	margin-right: 8px;
+	object-fit: contain;
+	background-image: url('/app/images/panel/checked-circle-icon.svg');
+	padding-right: 10px;
+}
+.InsightsModal__callToActionContainer {
+	height: 107px;
+	width: 506px;
+	margin-top: 10px;
+	background-color: #e7ecee;
+}
+.InsightsModal__callToAction {
+	width: 176px;
+	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);
+}
+.InsightsModal__callToActionText {
+	font-size: 14px;
+	font-family: 'Roboto Condensed';
+	letter-spacing: .5px;
+	color: #FFFFFF;
+}
+.InsightsModal__link {
+	font-family: 'Roboto';
+	font-size: 15px;
+	color: #4a4a4a;
+
+}
+.InsightsModal__otherOptionsContainer {
+	margin-top: 23px;
+	padding: 0 10.5px;
+	text-decoration: underline;
+	font-size: 15px;
+	color: #4a4a4a;
+}
+
+
+//TODO: color variables

app/shared-components/ModalExitButton/ModalExitButton.jsx

@@ -0,0 +1,40 @@
+
+/**
+ * Modal Exit Button 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';
+
+/**
+ * A Functional React component for a Exit Button
+ * @return {JSX} JSX for rendering a Exit Button
+ * @memberof SharedComponents
+ */
+const ModalExitButton = (props) => {
+	const {
+		exitModal
+	} = props;
+
+	return (
+		<button type="button" onClick={exitModal} className="ModalExitButton__exit flex-container align-middle">
+			<span className="ModalExitButton__exitIcon" />
+		</button>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+ModalExitButton.propTypes = {
+	exitModal: PropTypes.func.isRequired
+};
+
+export default ModalExitButton;

app/shared-components/ModalExitButton/ModalExitButton.scss

@@ -0,0 +1,36 @@
+/**
+ * Exit Button 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
+ */
+
+// Exit Button
+.ModalExitButton__exit {
+	position: absolute;
+	top: -10px;
+	right: -10px;
+	width: 26px;
+	height: 26px;
+	border-radius: 15px;
+	border: solid 0.8px #325e97;
+	background-color: #f7f7f7;
+	@include transition(background-color 0.2s);
+}
+.ModalExitButton__exit:hover {
+	background-color: #efefef;
+}
+.ModalExitButton__exitIcon {
+	height: 11px;
+	width: 11px;
+	margin: 0 auto;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-image: buildIconX(#4a4a4a);
+}