Changed all Typography to Text component in welcome.js and edit-gas-d…

…isplay.component.js (#18116) Co-authored-by: George Marshall <[email protected]>
MetaMask · Mar 21, 2023 · b9f00ba · b9f00ba
1 parent be63190
commit b9f00ba
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 29 deletions.
diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -5,14 +5,14 @@ import BigNumber from 'bignumber.js';
 import { EditGasModes } from '../../../../shared/constants/gas';
 
 import Button from '../../ui/button';
-import Typography from '../../ui/typography/typography';
 
 import {
   TEXT_ALIGN,
-  TypographyVariant,
   FONT_WEIGHT,
   TextColor,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
+import { Text } from '../../component-library';
 import { areDappSuggestedAndTxParamGasFeesTheSame } from '../../../helpers/utils/confirm-tx.util';
 
 import InfoTooltip from '../../ui/info-tooltip';
@@ -97,26 +97,28 @@ export default function EditGasDisplay({
         )}
         {mode === EditGasModes.speedUp && (
           <div className="edit-gas-display__top-tooltip">
-            <Typography
+            <Text
               color={TextColor.textDefault}
-              variant={TypographyVariant.H8}
+              variant={TextVariant.bodySm}
+              as="h6"
               fontWeight={FONT_WEIGHT.BOLD}
             >
               {t('speedUpTooltipText')}{' '}
               <InfoTooltip
                 position="top"
                 contentText={t('speedUpExplanation')}
               />
-            </Typography>
+            </Text>
           </div>
         )}
-        <Typography
+        <Text
           color={TextColor.textDefault}
-          variant={TypographyVariant.H1}
-          align={TEXT_ALIGN.CENTER}
+          variant={TextVariant.displayMd}
+          as="h1"
+          textAlign={TEXT_ALIGN.CENTER}
         >
           {estimatedMinimumNative}
-        </Typography>
+        </Text>
         {requireDappAcknowledgement && (
           <Button
             className="edit-gas-display__dapp-acknowledgement-button"

diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js
@@ -5,11 +5,11 @@ import { useHistory } from 'react-router-dom';
 import { Carousel } from 'react-responsive-carousel';
 import Mascot from '../../../components/ui/mascot';
 import Button from '../../../components/ui/button';
-import Typography from '../../../components/ui/typography/typography';
+import { Text } from '../../../components/component-library';
 import {
-  TypographyVariant,
   FONT_WEIGHT,
   TEXT_ALIGN,
+  TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -81,16 +81,17 @@ export default function OnboardingWelcome() {
     <div className="onboarding-welcome" data-testid="onboarding-welcome">
       <Carousel showThumbs={false} showStatus={false} showArrows>
         <div>
-          <Typography
-            variant={TypographyVariant.H2}
-            align={TEXT_ALIGN.CENTER}
+          <Text
+            variant={TextVariant.headingLg}
+            as="h2"
+            textAlign={TEXT_ALIGN.CENTER}
             fontWeight={FONT_WEIGHT.BOLD}
           >
             {t('welcomeToMetaMask')}
-          </Typography>
-          <Typography align={TEXT_ALIGN.CENTER} marginLeft={6} marginRight={6}>
+          </Text>
+          <Text textAlign={TEXT_ALIGN.CENTER} marginLeft={6} marginRight={6}>
             {t('welcomeToMetaMaskIntro')}
-          </Typography>
+          </Text>
           <div className="onboarding-welcome__mascot">
             <Mascot
               animationEventEmitter={eventEmitter}
@@ -100,16 +101,17 @@ export default function OnboardingWelcome() {
           </div>
         </div>
         <div>
-          <Typography
-            variant={TypographyVariant.H2}
-            align={TEXT_ALIGN.CENTER}
+          <Text
+            variant={TextVariant.headingLg}
+            as="h2"
+            textAlign={TEXT_ALIGN.CENTER}
             fontWeight={FONT_WEIGHT.BOLD}
           >
             {t('welcomeExploreTitle')}
-          </Typography>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          </Text>
+          <Text textAlign={TEXT_ALIGN.CENTER}>
             {t('welcomeExploreDescription')}
-          </Typography>
+          </Text>
           <div className="onboarding-welcome__image">
             <img
               src="/images/onboarding-welcome-say-hello.svg"
@@ -120,16 +122,17 @@ export default function OnboardingWelcome() {
           </div>
         </div>
         <div>
-          <Typography
-            variant={TypographyVariant.H2}
-            align={TEXT_ALIGN.CENTER}
+          <Text
+            variant={TextVariant.headingLg}
+            as="h2"
+            textAlign={TEXT_ALIGN.CENTER}
             fontWeight={FONT_WEIGHT.BOLD}
           >
             {t('welcomeLoginTitle')}
-          </Typography>
-          <Typography align={TEXT_ALIGN.CENTER}>
+          </Text>
+          <Text textAlign={TEXT_ALIGN.CENTER}>
             {t('welcomeLoginDescription')}
-          </Typography>
+          </Text>
           <div className="onboarding-welcome__image">
             <img
               src="/images/onboarding-welcome-decentralised-apps.svg"