BETA - Updating welcome message (#16489)

MetaMask · Nov 16, 2022 · d10e6a4 · d10e6a4
1 parent a523636
commit d10e6a4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
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
@@ -1,15 +1,30 @@
 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();
 
   return (
     <>
       <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
@@ -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
@@ -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>
     </>
   );
 };