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,
-  DISPLAY,
+  BackgroundColor,
+  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,129 +99,107 @@ export default function SecureYourWallet() {
         stage={threeStepStages.RECOVERY_PHRASE_VIDEO}
         marginBottom={4}
       />
-      <Box
-        justifyContent={JustifyContent.center}
-        textAlign={TextAlign.Center}
+      <Text
+        variant={TextVariant.headingLg}
+        as="h2"
         marginBottom={4}
+        textAlign={TextAlign.Center}
       >
-        <Text
-          variant={TextVariant.headingLg}
-          as="h2"
-          fontWeight={FontWeight.Bold}
-        >
-          {t('seedPhraseIntroTitle')}
-        </Text>
-      </Box>
-      <Box justifyContent={JustifyContent.center} marginBottom={6}>
-        <Text
-          variant={TextVariant.headingSm}
-          as="h4"
-          className="secure-your-wallet__details"
-        >
-          {t('seedPhraseIntroTitleCopy')}
-        </Text>
-      </Box>
-      <Box>
-        <video
-          className="secure-your-wallet__video"
-          onPlay={() => {
-            trackEvent({
-              category: MetaMetricsEventCategory.Onboarding,
-              event: MetaMetricsEventName.OnboardingWalletVideoPlay,
-            });
-          }}
-          controls
-        >
-          <source
-            type="video/webm"
-            src="./images/videos/recovery-onboarding/video.webm"
-          />
-          {Object.keys(subtitles).map((key) => {
-            return (
-              <track
-                default={Boolean(key === defaultLang)}
-                srcLang={key}
-                label={subtitles[key]}
-                key={`${key}-subtitles`}
-                kind="subtitles"
-                src={`./images/videos/recovery-onboarding/subtitles/${key}.vtt`}
-              />
-            );
-          })}
-        </video>
+        {t('seedPhraseIntroTitle')}
+      </Text>
+      <Text
+        variant={TextVariant.bodyLgMedium}
+        marginBottom={6}
+        className="secure-your-wallet__details"
+      >
+        {t('seedPhraseIntroTitleCopy')}
+      </Text>
+      <Box
+        as="video"
+        borderRadius={BorderRadius.LG}
+        marginBottom={8}
+        className="secure-your-wallet__video"
+        onPlay={() => {
+          trackEvent({
+            category: MetaMetricsEventCategory.Onboarding,
+            event: MetaMetricsEventName.OnboardingWalletVideoPlay,
+          });
+        }}
+        controls
+      >
+        <source
+          type="video/webm"
+          src="./images/videos/recovery-onboarding/video.webm"
+        />
+        {Object.keys(subtitles).map((key) => {
+          return (
+            <track
+              default={Boolean(key === defaultLang)}
+              srcLang={key}
+              label={subtitles[key]}
+              key={`${key}-subtitles`}
+              kind="subtitles"
+              src={`./images/videos/recovery-onboarding/subtitles/${key}.vtt`}
+            />
+          );
+        })}
       </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"
-          rounded
-          large
+          variant={BUTTON_VARIANT.SECONDARY}
+          size={BUTTON_SIZES.LG}
+          block
           onClick={handleClickNotRecommended}
         >
           {t('seedPhraseIntroNotRecommendedButtonCopy')}
         </Button>
         <Button
           data-testid="secure-wallet-recommended"
-          type="primary"
-          rounded
-          large
+          size={BUTTON_SIZES.LG}
+          block
           onClick={handleClickRecommended}
         >
           {t('seedPhraseIntroRecommendedButtonCopy')}
         </Button>
       </Box>
       <Box className="secure-your-wallet__desc">
-        <Box marginBottom={4}>
-          <Text
-            as="p"
-            variant={TextVariant.headingSm}
-            fontWeight={FontWeight.Bold}
-            boxProps={{ display: DISPLAY.BLOCK }}
-          >
-            {t('seedPhraseIntroSidebarTitleOne')}
-          </Text>
-          <Text as="p" variant={TextVariant.headingSm}>
-            {t('seedPhraseIntroSidebarCopyOne')}
-          </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">
-            <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
-            <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
-            <li>{t('seedPhraseIntroSidebarBulletFour')}</li>
-          </ul>
-        </Box>
-        <Box marginBottom={6}>
-          <Text
-            as="p"
-            variant={TextVariant.headingSm}
-            fontWeight={FontWeight.Bold}
-            boxProps={{ display: DISPLAY.BLOCK }}
-          >
-            {t('seedPhraseIntroSidebarTitleThree')}
-          </Text>
-          <Text as="p" variant={TextVariant.headingSm}>
-            {t('seedPhraseIntroSidebarCopyTwo')}
-          </Text>
-        </Box>
-        <Box className="secure-your-wallet__highlighted" marginBottom={2}>
-          <Text as="p" variant={TextVariant.headingSm}>
-            {t('seedPhraseIntroSidebarCopyThree')}
-          </Text>
+        <Text as="h3" variant={TextVariant.headingSm}>
+          {t('seedPhraseIntroSidebarTitleOne')}
+        </Text>
+        <Text marginBottom={4}>{t('seedPhraseIntroSidebarCopyOne')}</Text>
+        <Text as="h3" variant={TextVariant.headingSm}>
+          {t('seedPhraseIntroSidebarTitleTwo')}
+        </Text>
+        <Box as="ul" className="secure-your-wallet__list" marginBottom={4}>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletOne')}</Text>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletThree')}</Text>
+          <Text as="li">{t('seedPhraseIntroSidebarBulletFour')}</Text>
         </Box>
+        <Text as="h3" variant={TextVariant.headingSm}>
+          {t('seedPhraseIntroSidebarTitleThree')}
+        </Text>
+        <Text as="p" marginBottom={4}>
+          {t('seedPhraseIntroSidebarCopyTwo')}
+        </Text>
+        <Text
+          as="h3"
+          variant={TextVariant.headingSm}
+          backgroundColor={BackgroundColor.primaryMuted}
+          padding={4}
+          borderRadius={BorderRadius.LG}
+        >
+          {t('seedPhraseIntroSidebarCopyThree')}
+        </Text>
       </Box>
-    </div>
+    </Box>
   );
 }