fix: Polish onboarding UI

ui/components/app/password-form/password-form.tsx

@@ -83,7 +83,7 @@ export default function PasswordForm({
   }, [password.length]);
 
   return (
-    <Box>
+    <Box paddingInline={3}>
       <FormTextField
         label={t('newPasswordCreate')}
         id="create-password-new"
@@ -99,7 +99,7 @@ export default function PasswordForm({
           handlePasswordChange(e.target.value);
         }}
         helpTextProps={{
-          color: TextColor.textMuted,
+          color: TextColor.textAlternative,
           'data-testid': 'short-password-error',
         }}
         helpText={t('passwordNotLongEnough')}

ui/components/app/srp-details-modal/srp-details-modal.tsx

@@ -4,6 +4,7 @@
   AlignItems,
   Display,
   TextAlign,
+  TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -33,7 +34,7 @@
       <ModalOverlay />
       <ModalContent alignItems={AlignItems.center}>
         <ModalHeader onClose={onClose}>
-          <Text variant={TextVariant.headingMd} textAlign={TextAlign.Center}>
+          <Text variant={TextVariant.bodyMdBold} textAlign={TextAlign.Center}>
             {t('srpDetailsTitle')}
           </Text>
         </ModalHeader>

ui/components/app/srp-input-import/srp-input-import.tsx

@@ -278,11 +278,12 @@ export default function SrpInputImport({ onChange }: SrpInputImportProps) {
               <Box
                 display={Display.Grid}
                 className="srp-input-import__words-list"
-                gap={2}
+                gap={3}
               >
                 {draftSrp.map((word, index) => {
                   return (
                     <TextField
+                      backgroundColor={BackgroundColor.backgroundMuted}
                       inputProps={{
                         ref: (el) => {
                           if (el) {

ui/pages/onboarding-flow/create-password/create-password.js

@@ -336,9 +336,10 @@ export default function CreatePassword({
       href={ZENDESK_URLS.PASSWORD_ARTICLE}
       target="_blank"
       rel="noopener noreferrer"
+      style={{ paddingLeft: '4px' }}
     >
       <span className="create-password__link-text">
-        {t('learnMoreUpperCaseWithDot')}
+        {t('learnMoreUpperCase')}
       </span>
     </a>
   );
@@ -363,84 +364,94 @@ export default function CreatePassword({
       <Box>
         <Box
           justifyContent={JustifyContent.flexStart}
-          marginBottom={4}
+          marginBottom={6}
           width={BlockSize.Full}
+          style={{ paddingInline: '6px' }}
         >
           <ButtonIcon
             iconName={IconName.ArrowLeft}
             color={IconColor.iconDefault}
-            size={ButtonIconSize.Md}
+            size={ButtonIconSize.Sm}
             data-testid="create-password-back-button"
             type="button"
             onClick={handleBackClick}
             ariaLabel={t('back')}
           />
         </Box>
         <Box
+          paddingInline={3}
           justifyContent={JustifyContent.flexStart}
           marginBottom={4}
           width={BlockSize.Full}
         >
-          <Text variant={TextVariant.headingLg} as="h2">
+          <Text variant={TextVariant.headingMd} as="h2" marginBottom={1}>
             {t('createPassword')}
           </Text>
-          {isSocialLoginFlow ? (
-            <Text
-              variant={TextVariant.bodyMd}
-              color={TextColor.textAlternative}
-              as="h2"
-            >
-              {t('createPasswordDetailsSocial')}
+          <Box marginBottom={7}>
+            {isSocialLoginFlow ? (
+              <Text
+                variant={TextVariant.bodyMd}
+                color={TextColor.textAlternative}
+                as="h2"
+              >
+                {t('createPasswordDetailsSocial')}
+                <Text
+                  variant={TextVariant.bodyMd}
+                  color={TextColor.warningDefault}
+                  as="span"
+                >
+                  {t('createPasswordDetailsSocialReset')}
+                </Text>
+              </Text>
+            ) : (
               <Text
                 variant={TextVariant.bodyMd}
-                color={TextColor.warningDefault}
-                as="span"
+                color={TextColor.textAlternative}
+                as="h2"
               >
-                {t('createPasswordDetailsSocialReset')}
+                {t('createPasswordDetails')}
               </Text>
-            </Text>
-          ) : (
-            <Text
-              variant={TextVariant.bodyMd}
-              color={TextColor.textAlternative}
-              as="h2"
-            >
-              {t('createPasswordDetails')}
-            </Text>
-          )}
+            )}
+          </Box>
         </Box>
         <PasswordForm onChange={(newPassword) => setPassword(newPassword)} />
+
+        {/* Terms Container - 24px from password form */}
         <Box
+          marginInline={3}
           className="create-password__terms-container"
           alignItems={AlignItems.center}
-          justifyContent={JustifyContent.spaceBetween}
+          justifyContent={JustifyContent.flexStart}
           marginTop={6}
           backgroundColor={BackgroundColor.backgroundMuted}
           padding={3}
           borderRadius={BorderRadius.LG}
         >
           <Checkbox
-            inputProps={{ 'data-testid': 'create-password-terms' }}
+            inputProps={{
+              'data-testid': 'create-password-terms',
+            }}
             alignItems={AlignItems.flexStart}
             isChecked={termsChecked}
             onChange={() => {
               setTermsChecked(!termsChecked);
             }}
             label={
-              <Text variant={TextVariant.bodySm} color={TextColor.textDefault}>
+              <Text
+                variant={TextVariant.bodySm}
+                color={TextColor.textDefault}
+                style={{ whiteSpace: 'normal' }}
+              >
                 {checkboxLabel}
-                {!isSocialLoginFlow && (
-                  <>
-                    <br />
-                    {createPasswordLink}
-                  </>
-                )}
+                {!isSocialLoginFlow && <>{createPasswordLink}</>}
               </Text>
             }
           />
         </Box>
       </Box>
-      <Box>
+
+      {/* Button pinned to bottom */}
+      <Box paddingInline={3}>
         <Button
           data-testid="create-password-submit"
           variant={ButtonVariant.Primary}

ui/pages/onboarding-flow/creation-successful/creation-successful.js

@@ -196,7 +196,7 @@ export default function CreationSuccessful() {
           alignItems={AlignItems.flexStart}
         >
           <Text
-            variant={TextVariant.headingLg}
+            variant={TextVariant.headingMd}
             as="h2"
             justifyContent={JustifyContent.center}
             style={{

ui/pages/onboarding-flow/import-srp/import-srp.js

@@ -133,53 +133,62 @@
         <SRPDetailsModal onClose={() => setShowSrpDetailsModal(false)} />
       )}
       <Box>
-        <Box marginBottom={4}>
+        {/* Back Button - Isolated */}
+        <Box marginBottom={6} style={{ paddingInline: '6px' }}>
           <ButtonIcon
             iconName={IconName.ArrowLeft}
             color={IconColor.iconDefault}
-            size={ButtonIconSize.Md}
+            size={ButtonIconSize.Sm}
             data-testid="import-srp-back-button"
             onClick={onBack}
             ariaLabel={t('back')}
           />
         </Box>
-        <Box textAlign={TextAlign.Left} marginBottom={2}>
-          <Text variant={TextVariant.headingLg}>{t('importAWallet')}</Text>
-        </Box>
-        <Box
-          display={Display.Flex}
-          alignItems={AlignItems.center}
-          marginBottom={4}
-        >
-          <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
-            {t('typeYourSRP')}
-          </Text>
-          <ButtonIcon
-            iconName={IconName.Info}
-            size={ButtonIconSize.Sm}
-            color={IconColor.iconAlternative}
-            onClick={onShowSrpDetailsModal}
-            ariaLabel="info"
-          />
-        </Box>
-        <Box width={BlockSize.Full}>
-          <form onSubmit={(e) => e.preventDefault()}>
-            <SrpInputImport onChange={setSecretRecoveryPhrase} />
-            {srpError && (
-              <Box marginTop={2}>
-                <Text
-                  data-testid="import-srp-error"
-                  variant={TextVariant.bodySm}
-                  color={TextColor.errorDefault}
-                >
-                  {srpError}
-                </Text>
-              </Box>
-            )}
-          </form>
+
+        {/* All Content with Consistent Padding */}
+        <Box paddingInline={3}>
+          <Box textAlign={TextAlign.Left} marginBottom={1}>
+            <Text variant={TextVariant.headingMd}>{t('importAWallet')}</Text>
+          </Box>
+          <Box
+            display={Display.Flex}
+            alignItems={AlignItems.center}
+            marginBottom={7}
+          >
+            <Text
+              variant={TextVariant.bodyMd}
+              color={TextColor.textAlternative}
+            >
+              {t('typeYourSRP')}
+            </Text>
+            <ButtonIcon
+              iconName={IconName.Info}
+              size={ButtonIconSize.Sm}
+              color={IconColor.iconAlternative}
+              onClick={onShowSrpDetailsModal}
+              ariaLabel="info"
+            />
+          </Box>
+
+          <Box width={BlockSize.Full}>
+            <form onSubmit={(e) => e.preventDefault()}>
+              <SrpInputImport onChange={setSecretRecoveryPhrase} />
+              {srpError && (
+                <Box marginTop={2}>
+                  <Text
+                    data-testid="import-srp-error"
+                    variant={TextVariant.bodySm}
+                    color={TextColor.errorDefault}
+                  >
+                    {srpError}
+                  </Text>
+                </Box>
+              )}
+            </form>
+          </Box>
         </Box>
       </Box>
-      <Box
+      <Box paddingInline={3}
         display={Display.Flex}
         flexDirection={FlexDirection.Column}
         justifyContent={JustifyContent.center}

ui/pages/onboarding-flow/index.scss

@@ -24,7 +24,7 @@
     padding-inline: 24px;
     padding-top: 32px;
     padding-bottom: 32px;
-    max-width: 446px;
+    max-width: 504px;
     min-height: 627px;
     height: auto;