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": {