Update account creation panel with premium benefits

_locales/en/messages.json

@@ -650,6 +650,9 @@
 	"panel_signin_success": {
 		"message": "You are now signed in as "
 	},
+	"panel_signin_premium_benefits": {
+		"message": "Your account unlocks a free trial of our Premium benefits, including VPN service and device-wide privacy protection, available via our Ghostery Midnight app."
+	},
 	"panel_view_trackers": {
 		"message": "View Trackers"
 	},

app/images/panel/premium-sparkles-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="29"><path fill="#4A4A4A" d="M16.262 19.557c-4.13-.004-7.476-3.603-7.48-8.043 0-.26-.195-.466-.434-.466-.24 0-.434.208-.434.466-.004 4.44-3.35 8.038-7.48 8.043-.24 0-.434.21-.434.467s.195.467.434.467c4.13.004 7.476 3.602 7.48 8.042 0 .258.195.467.434.467.24 0 .434-.209.434-.467.004-4.44 3.35-8.037 7.48-8.042.24 0 .434-.21.434-.467s-.195-.467-.434-.467zm15.449-5.38c-2.754-.003-4.984-2.494-4.987-5.568 0-.18-.13-.323-.29-.323-.16 0-.289.145-.289.323-.002 3.074-2.233 5.565-4.986 5.568-.16 0-.29.145-.29.323 0 .18.13.323.29.323 2.753.003 4.984 2.494 4.986 5.568 0 .18.13.323.29.323.16 0 .29-.145.29-.323.002-3.074 2.232-5.565 4.986-5.568.16 0 .289-.145.289-.323 0-.18-.13-.323-.29-.323zM20.689 3.273c-1.72-.002-3.115-1.386-3.117-3.093a.181.181 0 00-.362 0c-.002 1.707-1.396 3.09-3.116 3.093a.18.18 0 10-.001.359c1.721.002 3.115 1.386 3.117 3.093 0 .1.081.18.181.18.1 0 .181-.08.181-.18.002-1.707 1.396-3.09 3.117-3.093a.18.18 0 100-.36z"/></svg>

app/panel/components/AccountSuccess.jsx

@@ -12,7 +12,8 @@
  */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
+
 /**
  * @class Implement Account Success component which opens
  * in place of Sign In view on successful signing.
@@ -21,14 +22,18 @@ import { Link } from 'react-router-dom';
 const AccountSuccess = (props) => ( // eslint-disable-line arrow-parens
 	<div id="signin-success-panel">
 		<div className="row align-center">
-			<div className="small-7 columns text-center">
-				<h3>{ t('panel_signin_success_title') }</h3>
-				<div className="big-ghosty" />
-				<p className="small-and-pale">{ t('panel_signin_success') }</p>
+			<div className="small-11 columns text-center">
+				<h3 className="signin-success-title">{ t('panel_signin_success_title') }</h3>
+				<p>{ t('panel_signin_success') }</p>
 				<h3 className="signin-success-email">{ props.email }</h3>
-				<Link to={(props.is_expert ? '/detail' : '/')} id="view-trackers-button" className="button">
-					{ t('panel_view_trackers') }
-				</Link>
+				<div className="premium-sparkles-icon" />
+				<h4 className="signin-premium-benefits">{ t('panel_signin_premium_benefits') }</h4>
+				<a className="learn-more-button" href="https://ghostery.com/midnight?utm_source=gbe&utm_campaign=in_app_account_creation_success" alt={t('learn_more')} target="_blank" rel="noopener noreferrer">
+					{t('learn_more')}
+				</a>
+				<NavLink className="no-thanks-maybe-later text-center" to="/">
+					{t('subscribe_pitch_no_thanks')}
+				</NavLink>
 			</div>
 		</div>
 	</div>

app/scss/partials/_account.scss

@@ -170,22 +170,59 @@ p.warning {
 
 /* SIGNIN SUCCESS PANEL */
 #signin-success-panel {
-	margin-top: 75px;
-	h3 {
-		color: #394045;
-		font-size: 18px;
-		font-weight: 400;
-	}
-	.big-ghosty {
-		background: url('../../app/images/panel/ghosty_signin.png') no-repeat center center;
-		background-size: auto 73px;
-		height: 115px;
+	margin-top: 39px;
+	.signin-success-title {
+		margin-bottom: 15px;
+		color: $tundora;
+		font-size: 21px;
+	}
+	.signin-success-email {
+		margin-bottom: 17px;
+		color: $ghosty-blue;
+		font-size: 16px;
+	}
+	.premium-sparkles-icon {
+		margin-bottom: 16px;
+		background: url('../../app/images/panel/premium-sparkles-icon.svg') no-repeat center center;
+		height: 29px;
+	}
+	.signin-premium-benefits {
+		margin: 0 auto 24px auto;
+		width: 442px;
+		color: $tundora;
+		font-size: 16px;
+		font-weight: bold;
+		line-height: 1.75;
 	}
 	p {
+		margin-bottom: 4px;
 		color: #9B9B9B;
-		font-size: 13px;
+		font-size: 16px;
 		font-weight: 300;
-		line-height: 21px;
 	}
-	#view-trackers-button {margin-top: 30px;}
+	.learn-more-button {
+		margin: 0 auto 24px auto;
+		width: 184px;
+		height: 50px;
+		border-radius: 4px;
+		background-image: linear-gradient(104deg, #720174, #00aef0 99%);
+
+		cursor: pointer;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		font-size: 16px;
+		letter-spacing: 0.5px;
+		color: #ffffff;
+
+		&:hover {
+			background-image: linear-gradient(101deg, #A80AAB 19%, #41BCEA 100%);
+		}
+	}
+	.no-thanks-maybe-later {
+		color: $tundora;
+		font-size: 16px;
+		text-decoration: underline;
+	}
 }

app/scss/partials/_fonts.scss

@@ -182,6 +182,14 @@
 	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;
 }
+/* latin */
+@font-face {
+	font-family: 'Open Sans';
+	font-style: normal;
+	font-weight: 700;
+	src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../fonts/open-sans-latin-bold-700.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';