BETA - Updating welcome message (#16489)

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"

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>
+        <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
-        <p>
+          {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>
     </>
   );

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);
     }

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">
+      <Typography align={TEXT_ALIGN.CENTER} marginBottom={6}>
-        <p>{t('metamaskDescription')}</p>
+        {t('metamaskDescription')}
-        <p>{t('happyToSeeYou')}</p>
+      </Typography>
-      </div>
+
+      <Typography align={TEXT_ALIGN.CENTER}>{t('happyToSeeYou')}</Typography>
     </>
   );
 };