From d10e6a406ce969be34eb8b846850f7898613a42e Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Wed, 16 Nov 2022 14:16:43 -0600
Subject: [PATCH] BETA - Updating welcome message (#16489)

---
 app/_locales/en/messages.json                 | 22 +++++++++----
 .../welcome/beta-welcome-footer.component.js  | 31 +++++++++++++++++--
 ui/pages/first-time-flow/welcome/index.scss   |  9 ------
 .../welcome/welcome-footer.component.js       | 12 ++++---
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 96e1fbfc2..078fda863 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -444,15 +444,25 @@
   "betaMetamaskDescription": {
     "message": "Trusted by millions, MetaMask is a secure wallet making the world of web3 accessible to all."
   },
+  "betaMetamaskDescriptionDisclaimerHeading": {
+    "message": "Beta version disclaimer"
+  },
   "betaMetamaskDescriptionExplanation": {
-    "message": "Use this version to test upcoming features before they’re released. Your use and feedback helps us build the best version of MetaMask possible. Your use of MetaMask Beta is subject to our standard $1 as well as our $2. As a Beta, there may be an increased risk of bugs. By proceeding, you accept and acknowledge these risks, as well as those risks found in our Terms and Beta Terms.",
+    "message": "This version allows you to test upcoming features before they’re released, which helps make MetaMask even better. As with all beta versions, there may be an increased risk of bugs.  MetaMask Beta is subject to our $1 as well as our $2.",
     "description": "$1 represents localization item betaMetamaskDescriptionExplanationTermsLinkText.  $2 represents localization item betaMetamaskDescriptionExplanationBetaTermsLinkText"
   },
+  "betaMetamaskDescriptionExplanation2": {
+    "message": "By proceeding, you accept and acknowledge these risks, our $1, and $2.",
+    "description": "$1 represents localization item betaMetamaskDescriptionExplanationTermsLinkText.  $2 represents localization item betaMetamaskDescriptionExplanation2BetaTermsLinkText"
+  },
+  "betaMetamaskDescriptionExplanation2BetaTermsLinkText": {
+    "message": "Beta Terms"
+  },
   "betaMetamaskDescriptionExplanationBetaTermsLinkText": {
-    "message": "Supplemental Beta Terms"
+    "message": "supplemental Beta Terms"
   },
   "betaMetamaskDescriptionExplanationTermsLinkText": {
-    "message": "Terms"
+    "message": "standard Terms"
   },
   "betaMetamaskVersion": {
     "message": "MetaMask Beta Version"
@@ -461,13 +471,13 @@
     "message": "beta portfolio site"
   },
   "betaTerms": {
-    "message": "BETA Terms of use"
+    "message": "Beta Terms of use"
   },
   "betaWalletCreationSuccessReminder1": {
-    "message": "MetaMask BETA can’t recover your Secret Recovery Phrase."
+    "message": "MetaMask Beta can’t recover your Secret Recovery Phrase."
   },
   "betaWalletCreationSuccessReminder2": {
-    "message": "MetaMask BETA will never ask you for your Secret Recovery Phrase."
+    "message": "MetaMask Beta will never ask you for your Secret Recovery Phrase."
   },
   "betaWelcome": {
     "message": "Welcome to MetaMask Beta"
diff --git a/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js b/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
index e7ebd921d..b3159855c 100644
--- a/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
+++ b/ui/pages/first-time-flow/welcome/beta-welcome-footer.component.js
@@ -1,6 +1,12 @@
 import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
+import Typography from '../../../components/ui/typography/typography';
+import {
+  TEXT_ALIGN,
+  FONT_WEIGHT,
+} from '../../../helpers/constants/design-system';
+
 const BetaWelcomeFooter = () => {
   const t = useI18nContext();
 
@@ -8,8 +14,17 @@ const BetaWelcomeFooter = () => {
     <>
       <div className="welcome-page__header">{t('betaWelcome')}</div>
       <div className="welcome-page__description">
-        <p>{t('betaMetamaskDescription')}</p>
-        <p>
+        <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
+          {t('betaMetamaskDescription')}
+        </Typography>
+        <Typography
+          align={TEXT_ALIGN.CENTER}
+          marginBottom={6}
+          fontWeight={FONT_WEIGHT.BOLD}
+        >
+          {t('betaMetamaskDescriptionDisclaimerHeading')}
+        </Typography>
+        <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
           {t('betaMetamaskDescriptionExplanation', [
             <a href="https://metamask.io/terms.html" key="terms-link">
               {t('betaMetamaskDescriptionExplanationTermsLinkText')}
@@ -18,7 +33,17 @@ const BetaWelcomeFooter = () => {
               {t('betaMetamaskDescriptionExplanationBetaTermsLinkText')}
             </a>,
           ])}
-        </p>
+        </Typography>
+        <Typography align={TEXT_ALIGN.CENTER}>
+          {t('betaMetamaskDescriptionExplanation2', [
+            <a href="https://metamask.io/terms.html" key="terms-link">
+              {t('betaMetamaskDescriptionExplanationTermsLinkText')}
+            </a>,
+            <a href="https://metamask.io/beta-terms.html" key="beta-terms-link">
+              {t('betaMetamaskDescriptionExplanation2BetaTermsLinkText')}
+            </a>,
+          ])}
+        </Typography>
       </div>
     </>
   );
diff --git a/ui/pages/first-time-flow/welcome/index.scss b/ui/pages/first-time-flow/welcome/index.scss
index f3dd786f7..fb90352f4 100644
--- a/ui/pages/first-time-flow/welcome/index.scss
+++ b/ui/pages/first-time-flow/welcome/index.scss
@@ -25,15 +25,6 @@
   }
 
   &__description {
-    text-align: center;
-
-    p {
-      @include Paragraph;
-
-      text-align: start;
-      margin-bottom: 22px;
-    }
-
     a {
       color: var(--color-primary-default);
     }
diff --git a/ui/pages/first-time-flow/welcome/welcome-footer.component.js b/ui/pages/first-time-flow/welcome/welcome-footer.component.js
index 93f42fa97..ea544201f 100644
--- a/ui/pages/first-time-flow/welcome/welcome-footer.component.js
+++ b/ui/pages/first-time-flow/welcome/welcome-footer.component.js
@@ -1,16 +1,20 @@
 import React from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 
+import Typography from '../../../components/ui/typography/typography';
+import { TEXT_ALIGN } from '../../../helpers/constants/design-system';
+
 const WelcomeFooter = () => {
   const t = useI18nContext();
 
   return (
     <>
       <div className="welcome-page__header">{t('welcome')}</div>
-      <div className="welcome-page__description">
-        <p>{t('metamaskDescription')}</p>
-        <p>{t('happyToSeeYou')}</p>
-      </div>
+      <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
+        {t('metamaskDescription')}
+      </Typography>
+
+      <Typography align={TEXT_ALIGN.CENTER}>{t('happyToSeeYou')}</Typography>
     </>
   );
 };