From b6596e523f7dafaf876a9ee2fa0e8cf7a0a5f5d6 Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:22:18 +0000
Subject: [PATCH] Migrate Typography to Text in creation-successful.js

---
 .../creation-successful.js                    | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.js
index c645b93078dc..52b0645a4737 100644
--- a/ui/pages/onboarding-flow/creation-successful/creation-successful.js
+++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.js
@@ -3,12 +3,12 @@ import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 
 import Box from '../../../components/ui/box';
-import Typography from '../../../components/ui/typography';
+import { Text } from '../../../components/component-library';
 import Button from '../../../components/ui/button';
 import {
-  FONT_WEIGHT,
-  TEXT_ALIGN,
-  TypographyVariant,
+  FontWeight,
+  TextAlign,
+  TextVariant,
   AlignItems,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -40,43 +40,44 @@ export default function CreationSuccessful() {
 
   return (
     <div className="creation-successful" data-testid="creation-successful">
-      <Box textAlign={TEXT_ALIGN.CENTER}>
+      <Box textAlign={TextAlign.Center}>
         <img src="./images/tada.png" />
-        <Typography
-          variant={TypographyVariant.H2}
-          fontWeight={FONT_WEIGHT.BOLD}
+        <Text
+          variant={TextVariant.headingLg}
+          fontWeight={FontWeight.Bold}
           margin={6}
         >
           {t('walletCreationSuccessTitle')}
-        </Typography>
-        <Typography variant={TypographyVariant.H4}>
+        </Text>
+        <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
           {t('walletCreationSuccessDetail')}
-        </Typography>
+        </Text>
       </Box>
-      <Typography
-        variant={TypographyVariant.H4}
-        boxProps={{ align: AlignItems.flexStart }}
+      <Text
+        variant={TextVariant.headingSm}
+        alignItems={AlignItems.flexStart}
+        fontWeight={FontWeight.Normal}
         marginLeft={12}
       >
         {t('remember')}
-      </Typography>
+      </Text>
       <ul>
         <li>
-          <Typography variant={TypographyVariant.H4}>
+          <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
             {isBeta()
               ? t('betaWalletCreationSuccessReminder1')
               : t('walletCreationSuccessReminder1')}
-          </Typography>
+          </Text>
         </li>
         <li>
-          <Typography variant={TypographyVariant.H4}>
+          <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
             {isBeta()
               ? t('betaWalletCreationSuccessReminder2')
               : t('walletCreationSuccessReminder2')}
-          </Typography>
+          </Text>
         </li>
         <li>
-          <Typography variant={TypographyVariant.H4}>
+          <Text variant={TextVariant.headingSm} fontWeight={FontWeight.Normal}>
             {t('walletCreationSuccessReminder3', [
               <span
                 key="creation-successful__bold"
@@ -85,7 +86,7 @@ export default function CreationSuccessful() {
                 {t('walletCreationSuccessReminder3BoldSection')}
               </span>,
             ])}
-          </Typography>
+          </Text>
         </li>
         <li>
           <Button