Secure your wallet page (#13571)

* Secure you wallet page

* Remove seedPhraseIntroSidebarBulletThree from messages.json

* Change the second bullet from Figma design

* Requested review changes

app/_locales/en/messages.json

@@ -2590,22 +2590,22 @@
     "message": "Secure my wallet (recommended)"
   },
   "seedPhraseIntroSidebarBulletFour": {
-    "message": "Write down and store in multiple secret places."
+    "message": "Write down and store in multiple secret places"
   },
   "seedPhraseIntroSidebarBulletOne": {
     "message": "Save in a password manager"
   },
   "seedPhraseIntroSidebarBulletThree": {
-    "message": "Store in a safe-deposit box."
+    "message": "Store in a safe deposit box"
   },
   "seedPhraseIntroSidebarBulletTwo": {
-    "message": "Store in a bank vault."
+    "message": "Store in a bank vault"
   },
   "seedPhraseIntroSidebarCopyOne": {
     "message": "Your Secret Recovery Phrase is a 12-word phrase that is the “master key” to your wallet and your funds"
   },
   "seedPhraseIntroSidebarCopyThree": {
-    "message": "If someone asks for your recovery phrase they are likely trying to scam you and steal your wallet funds"
+    "message": "If someone asks for your recovery phrase they are likely trying to scam you and steal your wallet funds."
   },
   "seedPhraseIntroSidebarCopyTwo": {
     "message": "Never, ever share your Secret Recovery Phrase, not even with MetaMask!"

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

@@ -8,6 +8,7 @@
 
   &__details {
     max-width: 550px;
+    padding-inline-end: 10px;
   }
 
   &__actions {

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

@@ -9,6 +9,7 @@ import {
   TYPOGRAPHY,
   JUSTIFY_CONTENT,
   FONT_WEIGHT,
+  DISPLAY,
 } from '../../../helpers/constants/design-system';
 import {
   ThreeStepProgressBar,
@@ -59,16 +60,13 @@ export default function SecureYourWallet() {
         justifyContent={JUSTIFY_CONTENT.CENTER}
         textAlign={TEXT_ALIGN.CENTER}
         marginBottom={4}
+        marginTop={8}
       >
         <Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}>
           {t('seedPhraseIntroTitle')}
         </Typography>
       </Box>
-      <Box
+      <Box justifyContent={JUSTIFY_CONTENT.CENTER} marginBottom={6}>
-        justifyContent={JUSTIFY_CONTENT.CENTER}
-        textAlign={TEXT_ALIGN.CENTER}
-        marginBottom={6}
-      >
         <Typography
           variant={TYPOGRAPHY.H4}
           className="secure-your-wallet__details"
@@ -121,57 +119,54 @@ export default function SecureYourWallet() {
           {t('seedPhraseIntroRecommendedButtonCopy')}
         </Button>
       </Box>
-      <Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}>
+      <Box>
+        <Box marginBottom={4}>
           <Typography
-          tag="span"
+            tag="p"
             variant={TYPOGRAPHY.H4}
             fontWeight={FONT_WEIGHT.BOLD}
-          boxProps={{ display: 'block' }}
+            boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleOne')}
           </Typography>
-        <Typography tag="span" variant={TYPOGRAPHY.H4}>
+          <Typography tag="p" variant={TYPOGRAPHY.H4}>
             {t('seedPhraseIntroSidebarCopyOne')}
           </Typography>
         </Box>
-      <Box marginBottom={4} textAlign={TEXT_ALIGN.CENTER}>
+        <Box marginBottom={4}>
           <Typography
-          tag="span"
+            tag="p"
             variant={TYPOGRAPHY.H4}
             fontWeight={FONT_WEIGHT.BOLD}
-          boxProps={{ display: 'block' }}
+            boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleTwo')}
           </Typography>
           <ul className="secure-your-wallet__list">
             <li>{t('seedPhraseIntroSidebarBulletOne')}</li>
-          <li>{t('seedPhraseIntroSidebarBulletTwo')}</li>
             <li>{t('seedPhraseIntroSidebarBulletThree')}</li>
             <li>{t('seedPhraseIntroSidebarBulletFour')}</li>
           </ul>
         </Box>
-      <Box marginBottom={6} textAlign={TEXT_ALIGN.CENTER}>
+        <Box marginBottom={6}>
           <Typography
-          tag="span"
+            tag="p"
             variant={TYPOGRAPHY.H4}
             fontWeight={FONT_WEIGHT.BOLD}
-          boxProps={{ display: 'block' }}
+            boxProps={{ display: DISPLAY.BLOCK }}
           >
             {t('seedPhraseIntroSidebarTitleThree')}
           </Typography>
-        <Typography tag="span" variant={TYPOGRAPHY.H4}>
+          <Typography tag="p" variant={TYPOGRAPHY.H4}>
             {t('seedPhraseIntroSidebarCopyTwo')}
           </Typography>
         </Box>
-      <Box
+        <Box className="secure-your-wallet__highlighted" marginBottom={2}>
-        className="secure-your-wallet__highlighted"
+          <Typography tag="p" variant={TYPOGRAPHY.H4}>
-        marginBottom={2}
-        textAlign={TEXT_ALIGN.CENTER}
-      >
-        <Typography tag="span" variant={TYPOGRAPHY.H4}>
             {t('seedPhraseIntroSidebarCopyThree')}
           </Typography>
         </Box>
+      </Box>
     </div>
   );
 }