diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 11e484c8d..42c00d1fb 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1758,6 +1758,15 @@ "ghostery_browser_hub_onboarding_lets_do_this": { "message": "Let's do this" }, + "ghostery_browser_hub_onboarding_yay_youre_all_set": { + "message": "Yay! You're all set." + }, + "ghostery_browser_hub_onboarding_start_browsing_the_web_with": { + "message": "Start browsing the web with" + }, + "ghostery_browser_hub_onboarding_lets_search": { + "message": "Let's search" + }, "enable_when_paused": { "message": "To use this function, Resume Ghostery." }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx index 2ac283a17..815e60463 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx @@ -13,6 +13,18 @@ import React from 'react'; -const SuccessView = () =>

Step 5: Success View

; +/** + * A Functional React component for rendering the Browser Success View + * @return {JSX} JSX for rendering the Browser Success View of the Hub app + * @memberof HubComponents + */ +const SuccessView = () => ( +
+
{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}
+
{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}
+ + +
+); export default SuccessView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss new file mode 100644 index 000000000..9ef034fb7 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss @@ -0,0 +1,57 @@ +.SuccessView__container { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.SuccessView__title { + margin-top: 125px; + font-size: 24px; + font-weight: 600; + line-height: 2.33; +} + +.SuccessView__subtitle { + margin-bottom: 47px; + width: 392px; + font-size: 18px; + line-height: 2.33; + text-align: center; +} + +.SuccessView__ghosterySuite { + margin-bottom: 77px; + height: 298px; + width: 545px; +} + +.SuccessView__ctaButton { + display: flex; + justify-content: center; + margin: auto; + height: 44px; + width: 162px; + padding: 7.7px 14px; + line-height: 22px; + background: linear-gradient( + 45deg, + #ff7e74 50%, + #00aef0 + ); + background-size: 200% 100%; + background-position: 100% 50%; + transition: 0.25s all; + border: none; + &:hover { + background-position: 0% 50%; + transition: 0.25s all; + } + color: #FFF; + font-size: 14.1px; + font-weight: 700; + border-radius: 3.5px; + text-align: center; + line-height: 2.05; + cursor: pointer; +} diff --git a/app/images/hub/success/ghostery-suite.png b/app/images/hub/success/ghostery-suite.png new file mode 100644 index 000000000..ef30ba387 Binary files /dev/null and b/app/images/hub/success/ghostery-suite.png differ diff --git a/app/scss/hub.scss b/app/scss/hub.scss index 9593db249..b5e5780fb 100644 --- a/app/scss/hub.scss +++ b/app/scss/hub.scss @@ -86,7 +86,8 @@ html, body, #root { @import '../hub/Views/LogInView/LogInView.scss'; @import '../hub/Views/CreateAccountView/CreateAccountView.scss'; @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss'; -@import '../hub/Views/BrowserWelcomeView/BrowserWelcomeView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss'; +@import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss'; // Imports from ../shared-components directory @import '../shared-components/ExitButton/ExitButton.scss';