Replacing deprecated components and fixing prop errors (#19745)

ui/helpers/constants/design-system.ts

@@ -215,13 +215,37 @@ export enum BorderStyle {
 }
 
 export enum BorderRadius {
+  /**
+   * 2px
+   */
   XS = 'xs',
+  /**
+   * 4px
+   */
   SM = 'sm',
+  /**
+   * 6px
+   */
   MD = 'md',
+  /**
+   * 8px
+   */
   LG = 'lg',
+  /**
+   * 12px
+   */
   XL = 'xl',
+  /**
+   * 0
+   */
   none = 'none',
+  /**
+   * 9999px
+   */
   pill = 'pill',
+  /**
+   * 50%
+   */
   full = 'full',
 }
 

ui/pages/onboarding-flow/secure-your-wallet/index.scss

@@ -1,50 +1,10 @@
 .secure-your-wallet {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
   &__video {
     max-width: 100%;
-    border-radius: 8px;
-  }
-
-  &__actions {
-    flex-direction: column;
-    justify-content: space-between;
-    width: 100%;
-
-    @include screen-sm-min {
-      flex-direction: row;
-    }
-
-    button {
-      margin-bottom: 16px;
-
-      @include screen-sm-min {
-        + button {
-          margin-left: 16px;
-        }
-      }
-    }
   }
 
   &__list {
     list-style: disc inside;
-
-    li {
-      @include H4;
-    }
-  }
-
-  &__highlighted {
-    background-color: var(--color-primary-muted);
-    padding: 12px;
-    border-radius: 10px;
-
-    @include screen-sm-min {
-      margin-inline-end: 43px;
-    }
   }
 }
 

ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.js

@@ -1,14 +1,17 @@
 import React, { useState, useContext } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useSelector } from 'react-redux';
-import Box from '../../../components/ui/box';
+
-import Button from '../../../components/ui/button';
 import {
   TextAlign,
   TextVariant,
   JustifyContent,
-  FontWeight,
+  BackgroundColor,
-  DISPLAY,
+  BorderRadius,
+  AlignItems,
+  FlexDirection,
+  Display,
+  BlockSize,
 } from '../../../helpers/constants/design-system';
 import {
   ThreeStepProgressBar,
@@ -22,7 +25,13 @@ import {
   MetaMetricsEventCategory,
   MetaMetricsEventName,
 } from '../../../../shared/constants/metametrics';
-import { Text } from '../../../components/component-library';
+import {
+  Text,
+  Box,
+  Button,
+  BUTTON_VARIANT,
+  BUTTON_SIZES,
+} from '../../../components/component-library';
 import SkipSRPBackup from './skip-srp-backup-popover';
 
 export default function SecureYourWallet() {
@@ -75,7 +84,14 @@ export default function SecureYourWallet() {
 
   const defaultLang = subtitles[currentLocale] ? currentLocale : 'en';
   return (
-    <div className="secure-your-wallet" data-testid="secure-your-wallet">
+    <Box
+      display={Display.Flex}
+      justifyContent={JustifyContent.center}
+      alignItems={AlignItems.center}
+      flexDirection={FlexDirection.Column}
+      className="secure-your-wallet"
+      data-testid="secure-your-wallet"
+    >
       {showSkipSRPBackupPopover && (
         <SkipSRPBackup handleClose={() => setShowSkipSRPBackupPopover(false)} />
       )}
@@ -83,30 +99,25 @@ export default function SecureYourWallet() {
         stage={threeStepStages.RECOVERY_PHRASE_VIDEO}
         marginBottom={4}
       />
-      <Box
-        justifyContent={JustifyContent.center}
-        textAlign={TextAlign.Center}
-        marginBottom={4}
-      >
       <Text
         variant={TextVariant.headingLg}
         as="h2"
-          fontWeight={FontWeight.Bold}
+        marginBottom={4}
+        textAlign={TextAlign.Center}
       >
         {t('seedPhraseIntroTitle')}
       </Text>
-      </Box>
-      <Box justifyContent={JustifyContent.center} marginBottom={6}>
       <Text
-          variant={TextVariant.headingSm}
+        variant={TextVariant.bodyLgMedium}
-          as="h4"
+        marginBottom={6}
         className="secure-your-wallet__details"
       >
         {t('seedPhraseIntroTitleCopy')}
       </Text>
-      </Box>
+      <Box
-      <Box>
+        as="video"
-        <video
+        borderRadius={BorderRadius.LG}
+        marginBottom={8}
         className="secure-your-wallet__video"
         onPlay={() => {
           trackEvent({
@@ -132,80 +143,63 @@ export default function SecureYourWallet() {
             />
           );
         })}
-        </video>
       </Box>
       <Box
-        margin={8}
-        justifyContent={JustifyContent.spaceBetween}
         className="secure-your-wallet__actions"
+        marginBottom={8}
+        width={BlockSize.Full}
+        display={Display.Flex}
+        flexDirection={[FlexDirection.Column, FlexDirection.Row]}
+        justifyContent={JustifyContent.spaceBetween}
+        gap={4}
       >
         <Button
           data-testid="secure-wallet-later"
-          type="secondary"
+          variant={BUTTON_VARIANT.SECONDARY}
-          rounded
+          size={BUTTON_SIZES.LG}
-          large
+          block
           onClick={handleClickNotRecommended}
         >
           {t('seedPhraseIntroNotRecommendedButtonCopy')}
         </Button>
         <Button
           data-testid="secure-wallet-recommended"
-          type="primary"
+          size={BUTTON_SIZES.LG}
-          rounded
+          block
-          large
           onClick={handleClickRecommended}
         >
           {t('seedPhraseIntroRecommendedButtonCopy')}
         </Button>
       </Box>
       <Box className="secure-your-wallet__desc">
-        <Box marginBottom={4}>
+        <Text as="h3" variant={TextVariant.headingSm}>
-          <Text
-            as="p"
-            variant={TextVariant.headingSm}
-            fontWeight={FontWeight.Bold}
-            boxProps={{ display: DISPLAY.BLOCK }}
-          >
           {t('seedPhraseIntroSidebarTitleOne')}
         </Text>
-          <Text as="p" variant={TextVariant.headingSm}>
+        <Text marginBottom={4}>{t('seedPhraseIntroSidebarCopyOne')}</Text>
-            {t('seedPhraseIntroSidebarCopyOne')}
+        <Text as="h3" variant={TextVariant.headingSm}>
-          </Text>
-        </Box>
-        <Box marginBottom={4}>
-          <Text
-            as="p"
-            variant={TextVariant.headingSm}
-            fontWeight={FontWeight.Bold}
-            boxProps={{ display: DISPLAY.BLOCK }}
-          >
           {t('seedPhraseIntroSidebarTitleTwo')}
         </Text>
-          <ul className="secure-your-wallet__list">
+        <Box as="ul" className="secure-your-wallet__list" marginBottom={4}>
-            <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletOne')}</Text>
-            <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletThree')}</Text>
-            <li>{t('seedPhraseIntroSidebarBulletFour')}</li>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletFour')}</Text>
-          </ul>
         </Box>
-        <Box marginBottom={6}>
+        <Text as="h3" variant={TextVariant.headingSm}>
-          <Text
-            as="p"
-            variant={TextVariant.headingSm}
-            fontWeight={FontWeight.Bold}
-            boxProps={{ display: DISPLAY.BLOCK }}
-          >
           {t('seedPhraseIntroSidebarTitleThree')}
         </Text>
-          <Text as="p" variant={TextVariant.headingSm}>
+        <Text as="p" marginBottom={4}>
           {t('seedPhraseIntroSidebarCopyTwo')}
         </Text>
-        </Box>
+        <Text
-        <Box className="secure-your-wallet__highlighted" marginBottom={2}>
+          as="h3"
-          <Text as="p" variant={TextVariant.headingSm}>
+          variant={TextVariant.headingSm}
+          backgroundColor={BackgroundColor.primaryMuted}
+          padding={4}
+          borderRadius={BorderRadius.LG}
+        >
           {t('seedPhraseIntroSidebarCopyThree')}
         </Text>
       </Box>
     </Box>
-    </div>
   );
 }