diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d943ca6b0..0d501d046 100644
--- a/_locales/en/messages.json
+++ b/_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"
},
diff --git a/app/fonts/open-sans-latin-bold-700.woff2 b/app/fonts/open-sans-latin-bold-700.woff2
new file mode 100644
index 000000000..3a38286c6
Binary files /dev/null and b/app/fonts/open-sans-latin-bold-700.woff2 differ
diff --git a/app/images/panel/ghosty_signin.png b/app/images/panel/ghosty_signin.png
deleted file mode 100644
index 2f8ac2d3f..000000000
Binary files a/app/images/panel/ghosty_signin.png and /dev/null differ
diff --git a/app/images/panel/premium-sparkles-icon.svg b/app/images/panel/premium-sparkles-icon.svg
new file mode 100644
index 000000000..0ed61864e
--- /dev/null
+++ b/app/images/panel/premium-sparkles-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/panel/components/AccountSuccess.jsx b/app/panel/components/AccountSuccess.jsx
index 03411fea3..2c6925868 100644
--- a/app/panel/components/AccountSuccess.jsx
+++ b/app/panel/components/AccountSuccess.jsx
@@ -12,23 +12,28 @@
*/
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.
* @memberof PanelClasses
*/
-const AccountSuccess = ({ email, is_expert }) => (
+const AccountSuccess = ({ email }) => (
-
-
{ t('panel_signin_success_title') }
-
-
{ t('panel_signin_success') }
+
+
{ t('panel_signin_success_title') }
+
{ t('panel_signin_success') }
{ email }
-
- { t('panel_view_trackers') }
-
+
+
{ t('panel_signin_premium_benefits') }
+
+ {t('learn_more')}
+
+
+ {t('subscribe_pitch_no_thanks')}
+
diff --git a/app/scss/partials/_account.scss b/app/scss/partials/_account.scss
index 78a3d4f1b..3cbe2d5c8 100644
--- a/app/scss/partials/_account.scss
+++ b/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;
+ }
}
diff --git a/app/scss/partials/_fonts.scss b/app/scss/partials/_fonts.scss
index c048be1ee..f44db6509 100644
--- a/app/scss/partials/_fonts.scss
+++ b/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';
diff --git a/manifest.json b/manifest.json
index cecac8abe..20a595fd8 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,8 +3,8 @@
"author": "Ghostery",
"name": "__MSG_name__",
"short_name": "Ghostery",
- "version": "8.5.1",
- "version_name": "8.5.1",
+ "version": "8.5.2",
+ "version_name": "8.5.2",
"default_locale": "en",
"description": "__MSG_short_description__",
"icons": {