From 30d23e31413886c5dfb1f053065a8bf90738896c Mon Sep 17 00:00:00 2001
From: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>
Date: Mon, 29 Jul 2024 19:56:54 +0100
Subject: [PATCH] refactor(wallet-mobile): create + restore p_b

---
 apps/wallet-mobile/.env                       |   2 +-
 .../src/components/Modal/ModalScreen.tsx      |   2 +-
 .../AboutRecoveryPhraseScreen.tsx             |  22 +--
 .../CreateWallet/RecoveryPhraseScreen.tsx     |  42 +++--
 .../VerifyRecoveryPhraseScreen.tsx            | 120 ++++++--------
 .../CreateWallet/WalletDetailsScreen.tsx      | 155 ++++++++----------
 .../RestoreWalletDetailsScreen.tsx            |  55 +++----
 7 files changed, 182 insertions(+), 216 deletions(-)

diff --git a/apps/wallet-mobile/.env b/apps/wallet-mobile/.env
index 314cdfb13d..a1031aea55 100644
--- a/apps/wallet-mobile/.env
+++ b/apps/wallet-mobile/.env
@@ -12,7 +12,7 @@ WALLET_2_NETWORK_ID=300
 WALLET_2_MNEMONIC=abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon share
 
 WALLET_3_NETWORK_ID=300
-WALLET_3_MNEMONIC=sign moral mass glare charge type candy debris fine cup torch rotate banana length foot
+WALLET_3_MNEMONIC=typical evoke despair burger ripple venue assist shoot donate alter twice bomb glimpse asthma explain
 
 BANXA_TEST_WALLET=addr1qyfuspldlchc5kechfe5jzdrr9jms2s9w0tq4hggy9zgkhxssydveuc8xyx4zh27fwcmr62mraeezjwf24hzkyejwfmq7yptmd
 
diff --git a/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
index 04600cc5c3..cc1af44c65 100644
--- a/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
+++ b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
@@ -125,9 +125,9 @@ const useStyles = () => {
       borderTopLeftRadius: 20,
     },
     sheet: {
+      backgroundColor: isDark ? color.gray_c50 : color.white_static,
       ...atoms.flex_1,
       ...atoms.self_stretch,
-      backgroundColor: isDark ? color.gray_c50 : color.white_static,
     },
     title: {
       ...atoms.heading_3_medium,
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
index b4042f157a..8774fd95a2 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/AboutRecoveryPhraseScreen.tsx
@@ -59,14 +59,12 @@ export const AboutRecoveryPhraseScreen = () => {
 
       <Spacer fill />
 
-      <LearnMoreButton onPress={handleOnLearMoreButtonPress} />
+      <Actions style={[styles.actions, styles.padding]}>
+        <LearnMoreButton onPress={handleOnLearMoreButtonPress} />
 
-      <Space height="lg" />
-
-      <Actions style={styles.actions}>
         <Button
+          shelleyTheme
           title={strings.next}
-          style={styles.button}
           onPress={() => navigation.navigate('setup-wallet-recovery-phrase-mnemonic')}
           testID="setup-step1-next-button"
         />
@@ -89,21 +87,23 @@ const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
-      ...atoms.px_lg,
-      justifyContent: 'space-between',
       backgroundColor: color.bg_color_high,
+      ...atoms.flex_1,
+      ...atoms.pb_lg,
+    },
+    padding: {
+      ...atoms.px_lg,
     },
     aboutRecoveryPhraseTitle: {
+      color: color.text_gray_normal,
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
     },
-    button: {backgroundColor: color.primary_c500},
     bolder: {
       ...atoms.body_1_lg_medium,
     },
     actions: {
-      ...atoms.p_lg,
+      ...atoms.pt_lg,
+      ...atoms.gap_lg,
     },
     scroll: {
       ...atoms.px_lg,
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
index b51a272733..19f0eff5d1 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/RecoveryPhraseScreen.tsx
@@ -65,7 +65,6 @@ export const RecoveryPhraseScreen = () => {
 
         <Button
           title={strings.continueButton}
-          style={styles.button}
           onPress={() => {
             closeModal()
             showCreateWalletInfoModalChanged(false)
@@ -89,7 +88,6 @@ export const RecoveryPhraseScreen = () => {
     strings.recoveryPhraseCardThirdItem,
     strings.recoveryPhraseCardTitle,
     strings.recoveryPhraseModalTitle,
-    styles.button,
     styles.modal,
   ])
 
@@ -146,8 +144,8 @@ export const RecoveryPhraseScreen = () => {
       <Spacer fill />
 
       <Button
+        shelleyTheme
         title={strings.next}
-        style={styles.button}
         disabled={isBlur}
         onPress={() => {
           mnemonicChanged(mnemonic)
@@ -185,13 +183,12 @@ const useStyles = () => {
   const {atoms, color} = useTheme()
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
-      ...atoms.px_lg,
-      justifyContent: 'space-between',
       backgroundColor: color.bg_color_high,
+      ...atoms.flex_1,
+      ...atoms.px_lg,
     },
     modal: {
-      flex: 1,
+      ...atoms.flex_1,
       ...atoms.px_lg,
     },
     title: {
@@ -204,18 +201,17 @@ const useStyles = () => {
     content: {
       gap: 16,
     },
-    button: {backgroundColor: color.primary_c500},
     mnemonicWords: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      gap: 8,
+      ...atoms.flex_row,
+      ...atoms.flex_wrap,
       ...atoms.py_sm,
+      ...atoms.gap_sm,
     },
     mnemonicTextContainer: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
       borderRadius: 8,
-      overflow: 'hidden',
+      ...atoms.overflow_hidden,
+      ...atoms.flex_row,
+      ...atoms.flex_wrap,
       ...atoms.px_lg,
       ...atoms.py_sm,
     },
@@ -224,31 +220,31 @@ const useStyles = () => {
       color: color.primary_c600,
     },
     blurView: {
-      position: 'absolute',
-      ...atoms.p_2xl,
       left: -8,
       right: -8,
       bottom: 0,
       top: 0,
-      zIndex: 1,
+      ...atoms.z_10,
+      ...atoms.absolute,
+      ...atoms.p_2xl,
     },
     blurButton: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.gap_sm,
     },
     blurTextButton: {
-      ...atoms.button_2_md,
       color: color.primary_c500,
+      ...atoms.button_2_md,
       textTransform: 'none',
     },
     info: {
-      position: 'relative',
+      ...atoms.relative,
     },
     infoIcon: {
-      position: 'absolute',
       top: Platform.OS === 'ios' ? -22 : -18,
       left: 0,
+      ...atoms.absolute,
     },
     buttonBackground: {
       backgroundColor: color.primary_c100,
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
index 4f228be4f3..0ae86b44f7 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/VerifyRecoveryPhraseScreen.tsx
@@ -67,13 +67,14 @@ export const VerifyRecoveryPhraseScreen = () => {
 
   return (
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.container}>
-      <StepperProgress currentStep={3} currentStepTitle={strings.stepVerifyRecoveryPhrase} totalSteps={4} />
-
-      <Space height="lg" />
-
-      <Text style={styles.title}>{strings.verifyRecoveryPhraseTitle(bold)}</Text>
+      <StepperProgress
+        currentStep={3}
+        currentStepTitle={strings.stepVerifyRecoveryPhrase}
+        totalSteps={4}
+        style={styles.padding}
+      />
 
-      <Space height="lg" />
+      <Text style={[styles.title, styles.padding]}>{strings.verifyRecoveryPhraseTitle(bold)}</Text>
 
       <MnemonicInput
         onPress={removeLastEntry}
@@ -82,17 +83,9 @@ export const VerifyRecoveryPhraseScreen = () => {
         error={isPhraseComplete && !isValidPhrase}
       />
 
-      {isPhraseComplete && isLastWordValid() && (
-        <>
-          <Space height="lg" />
-
-          <SuccessMessage />
-        </>
-      )}
-
-      <Space height="lg" />
+      {isPhraseComplete && isLastWordValid() && <SuccessMessage />}
 
-      <ScrollView bounces={false}>
+      <ScrollView bounces={false} style={styles.padding}>
         <WordBadges
           defaultMnemonic={mnemonicDefault}
           mnemonicEntries={mnemonicEntries}
@@ -101,21 +94,13 @@ export const VerifyRecoveryPhraseScreen = () => {
           removeLastEntryAndAddNew={removeLastEntryAndAddNew}
         />
 
-        {!isLastWordValid() && userEntries.length > 0 && (
-          <>
-            <Space height="lg" />
-
-            <ErrorMessage />
-          </>
-        )}
+        {!isLastWordValid() && userEntries.length > 0 && <ErrorMessage />}
       </ScrollView>
 
-      <Space height="lg" />
-
-      <View>
+      <View style={[styles.actions, styles.padding]}>
         <Button
-          title="next"
-          style={styles.button}
+          shelleyTheme
+          title={strings.next}
           disabled={disabled}
           onPress={async () => {
             const {csl, release} = wrappedCsl()
@@ -126,8 +111,6 @@ export const VerifyRecoveryPhraseScreen = () => {
           }}
           testId="setup-next-button"
         />
-
-        <Space height="sm" />
       </View>
     </SafeAreaView>
   )
@@ -137,7 +120,7 @@ const ErrorMessage = () => {
   const {styles} = useStyles()
   const strings = useStrings()
   return (
-    <View style={styles.errorMessageContainer}>
+    <View style={[styles.errorMessageContainer, styles.padding]}>
       <AlertIllustration />
 
       <Space width="sm" />
@@ -151,7 +134,7 @@ const SuccessMessage = () => {
   const {styles} = useStyles()
   const strings = useStrings()
   return (
-    <View style={styles.successMessageContainer}>
+    <View style={[styles.successMessageContainer, styles.padding]}>
       <Check2Illustration />
 
       <Space width="sm" />
@@ -186,7 +169,7 @@ const MnemonicInput = ({defaultMnemonic, userEntries, onPress}: MnemonicInputPro
   }
 
   return (
-    <Animated.View layout={Layout} entering={FadeIn} exiting={FadeOut} style={styles.recoveryPhrase}>
+    <Animated.View layout={Layout} entering={FadeIn} exiting={FadeOut} style={[styles.recoveryPhrase, styles.padding]}>
       <View style={[StyleSheet.absoluteFill, {backgroundColor: colors.gradientBlueGreen}]} />
 
       <View style={styles.recoveryPhraseBackground}>
@@ -370,49 +353,54 @@ const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     container: {
-      flex: 1,
-      ...atoms.px_lg,
-      justifyContent: 'space-between',
       backgroundColor: color.bg_color_high,
+      ...atoms.flex_1,
+      ...atoms.justify_between,
+      ...atoms.gap_lg,
+    },
+    padding: {
+      ...atoms.px_lg,
+    },
+    actions: {
+      ...atoms.pb_lg,
     },
     title: {
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
+      color: color.text_gray_normal,
     },
-    button: {backgroundColor: color.primary_c500},
     recoveryPhrase: {
-      ...atoms.p_2xs,
       minHeight: 182,
       borderRadius: 8,
-      overflow: 'hidden',
+      ...atoms.p_2xs,
+      ...atoms.overflow_hidden,
     },
     recoveryPhraseBackground: {
-      borderRadius: 6,
-      overflow: 'hidden',
       backgroundColor: color.bg_color_high,
+      borderRadius: 6,
       minHeight: 182,
+      ...atoms.overflow_hidden,
     },
     recoveryPhraseOutline: {
-      padding: 6,
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      gap: 8,
+      ...atoms.p_sm,
+      ...atoms.flex_row,
+      ...atoms.flex_wrap,
+      ...atoms.gap_sm,
     },
     errorMessageContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
+      ...atoms.flex_row,
+      ...atoms.align_center,
     },
     errorMessage: {
       color: color.sys_magenta_c500,
       ...atoms.body_2_md_regular,
     },
     successMessageContainer: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_start,
     },
     successMessage: {
-      color: color.gray_cmax,
+      color: color.text_gray_max,
       ...atoms.body_1_lg_medium,
     },
     errorBadge: {
@@ -422,39 +410,39 @@ const useStyles = () => {
       backgroundColor: color.sys_magenta_c100,
     },
     words: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-      gap: 8,
+      ...atoms.flex_row,
+      ...atoms.flex_wrap,
+      ...atoms.gap_sm,
     },
     wordBadgeView: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 2,
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.gap_2xs,
     },
     wordBadgeContainerOutline: {
+      borderRadius: 8,
+      ...atoms.overflow_hidden,
       ...atoms.px_xs,
       ...atoms.py_xs,
-      borderRadius: 8,
-      overflow: 'hidden',
     },
     wordBadgeContainer: {
-      ...atoms.py_sm,
       borderRadius: 8,
-      overflow: 'hidden',
+      ...atoms.py_sm,
+      ...atoms.overflow_hidden,
     },
     wordBadge: {
-      flexDirection: 'row',
-      flexWrap: 'wrap',
+      ...atoms.flex_row,
+      ...atoms.flex_wrap,
     },
     wordBadgeText: {
+      color: color.text_gray_medium,
       ...atoms.body_1_lg_regular,
-      color: color.primary_c600,
     },
     usedWord: {
       color: color.primary_c400,
     },
     usedWordBackground: {
-      position: 'absolute',
+      ...atoms.absolute,
       backgroundColor: color.bg_color_high,
       borderRadius: 6,
       left: 2,
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
index 983c2159f4..e03fef84f5 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/CreateWallet/WalletDetailsScreen.tsx
@@ -160,42 +160,36 @@ export const WalletDetailsScreen = () => {
       strings.walletDetailsModalTitle,
       <View style={styles.modal}>
         <ScrollView bounces={false}>
-          <View>
+          <View style={styles.modalContent}>
             <CardAboutPhrase
               title={strings.walletNameModalCardTitle}
               linesOfText={[strings.walletNameModalCardFirstItem, strings.walletNameModalCardSecondItem]}
             />
 
-            <Space height="lg" />
-
             <CardAboutPhrase
               title={strings.walletPasswordModalCardTitle}
               linesOfText={[strings.walletPasswordModalCardFirstItem, strings.walletPasswordModalCardSecondItem]}
             />
-
-            <Space height="lg" />
-
-            <LearnMoreButton
-              onPress={() => {
-                Linking.openURL(YoroiZendeskLink)
-              }}
-            />
           </View>
         </ScrollView>
 
-        <Space height="sm" />
-
-        <Button
-          title={strings.continueButton}
-          style={styles.button}
-          onPress={() => {
-            closeModal()
-            showRestoreWalletInfoModalChanged(false)
-          }}
-          testId="setup-modal-continue-button"
-        />
+        <View style={styles.modalContent}>
+          <LearnMoreButton
+            onPress={() => {
+              Linking.openURL(YoroiZendeskLink)
+            }}
+          />
 
-        <Space height="lg" />
+          <Button
+            shelleyTheme
+            title={strings.continueButton}
+            onPress={() => {
+              closeModal()
+              showRestoreWalletInfoModalChanged(false)
+            }}
+            testId="setup-modal-continue-button"
+          />
+        </View>
       </View>,
       HEIGHT_MODAL_NAME_PASSWORD,
     )
@@ -212,8 +206,8 @@ export const WalletDetailsScreen = () => {
     strings.walletPasswordModalCardFirstItem,
     strings.walletPasswordModalCardSecondItem,
     strings.walletPasswordModalCardTitle,
-    styles.button,
     styles.modal,
+    styles.modalContent,
   ])
 
   React.useEffect(() => {
@@ -226,41 +220,35 @@ export const WalletDetailsScreen = () => {
       strings.walletDetailsModalTitle,
       <View style={styles.modal}>
         <ScrollView bounces={false}>
-          <View>
-            <CardAboutPhrase
-              title={strings.walletChecksumModalCardTitle}
-              checksumImage={plate.ImagePart}
-              checksumLine={1}
-              linesOfText={[
-                strings.walletChecksumModalCardFirstItem,
-                strings.walletChecksumModalCardSecondItem(plate.TextPart),
-                strings.walletChecksumModalCardThirdItem,
-              ]}
-            />
-
-            <Space height="lg" />
-
-            <LearnMoreButton
-              onPress={() => {
-                Linking.openURL(YoroiZendeskLink)
-              }}
-            />
-          </View>
+          <CardAboutPhrase
+            title={strings.walletChecksumModalCardTitle}
+            checksumImage={plate.ImagePart}
+            checksumLine={1}
+            linesOfText={[
+              strings.walletChecksumModalCardFirstItem,
+              strings.walletChecksumModalCardSecondItem(plate.TextPart),
+              strings.walletChecksumModalCardThirdItem,
+            ]}
+          />
         </ScrollView>
 
-        <Space height="sm" />
-
-        <Button title={strings.continueButton} style={styles.button} onPress={closeModal} />
+        <View style={styles.modalContent}>
+          <LearnMoreButton
+            onPress={() => {
+              Linking.openURL(YoroiZendeskLink)
+            }}
+          />
 
-        <Space height="lg" />
+          <Button title={strings.continueButton} shelleyTheme onPress={closeModal} />
+        </View>
       </View>,
       HEIGHT_MODAL_CHECKSUM,
     )
   }
 
   return (
-    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>
-      <KeyboardAvoidingView style={styles.container}>
+    <KeyboardAvoidingView style={styles.root}>
+      <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.safeAreaView}>
         <StepperProgress
           style={styles.steps}
           currentStep={4}
@@ -268,15 +256,13 @@ export const WalletDetailsScreen = () => {
           totalSteps={4}
         />
 
-        <View style={styles.infoText}>
+        <View style={styles.infoWrapper}>
           <Text style={styles.title}>{strings.walletDetailsTitle(bold)}</Text>
 
           <Info onPress={showModalTipsPassword} />
         </View>
 
-        <Space height="xl" />
-
-        <ScrollView style={styles.scroll}>
+        <ScrollView style={styles.scroll} contentContainerStyle={styles.content}>
           <TextInput
             enablesReturnKeyAutomatically
             autoFocus={!showRestoreWalletInfoModal}
@@ -292,8 +278,6 @@ export const WalletDetailsScreen = () => {
             showErrorOnBlur
           />
 
-          <Space height="xl" />
-
           <TextInput
             enablesReturnKeyAutomatically
             ref={passwordRef}
@@ -311,8 +295,6 @@ export const WalletDetailsScreen = () => {
             textContentType="oneTimeCode"
           />
 
-          <Space height="xl" />
-
           <TextInput
             enablesReturnKeyAutomatically
             ref={passwordConfirmationRef}
@@ -328,8 +310,6 @@ export const WalletDetailsScreen = () => {
             textContentType="oneTimeCode"
           />
 
-          <Space height="xl" />
-
           <View style={styles.checksum}>
             <Icon.WalletAvatar
               image={new Blockies({seed: plate.ImagePart}).asBase64()}
@@ -349,17 +329,15 @@ export const WalletDetailsScreen = () => {
 
         <Actions>
           <Button
+            shelleyTheme
             title={strings.next}
-            style={styles.button}
             onPress={() => handleCreateWallet()}
             disabled={isLoading || Object.keys(passwordErrors).length > 0 || Object.keys(nameErrors).length > 0}
             testID="walletFormContinueButton"
           />
-
-          <Space height="sm" />
         </Actions>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
+      </SafeAreaView>
+    </KeyboardAvoidingView>
   )
 }
 
@@ -388,54 +366,61 @@ const useStyles = () => {
   const {color, atoms} = useTheme()
   const styles = StyleSheet.create({
     root: {
-      flex: 1,
-      justifyContent: 'space-between',
       backgroundColor: color.bg_color_high,
+      ...atoms.flex_1,
     },
-    container: {
-      flex: 1,
+    safeAreaView: {
+      ...atoms.flex_1,
+      ...atoms.pb_lg,
     },
-    infoText: {
+    infoWrapper: {
+      height: 24,
       ...atoms.px_lg,
-      flexDirection: 'row',
-      lineHeight: 24,
+      ...atoms.flex_row,
     },
     modal: {
-      flex: 1,
+      ...atoms.flex_1,
       ...atoms.px_lg,
+      ...atoms.pb_lg,
+    },
+    modalContent: {
+      ...atoms.gap_lg,
     },
     title: {
-      alignSelf: 'center',
+      color: color.text_gray_normal,
+      ...atoms.self_center,
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
     },
     plateNumber: {
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
-      textAlign: 'center',
-      justifyContent: 'center',
-      alignItems: 'center',
+      color: color.text_gray_normal,
+      ...atoms.text_center,
+      ...atoms.justify_center,
+      ...atoms.align_center,
     },
-    button: {backgroundColor: color.primary_c500},
     bolder: {
       ...atoms.body_1_lg_medium,
     },
     checksum: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-      textAlignVertical: 'center',
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_center,
+      ...atoms.align_center,
     },
     walletChecksum: {
       width: 24,
       height: 24,
     },
     actions: {
-      ...atoms.p_lg,
+      ...atoms.px_lg,
     },
     scroll: {
       ...atoms.px_lg,
     },
+    content: {
+      ...atoms.pt_lg,
+      ...atoms.gap_lg,
+    },
     steps: {
       ...atoms.px_lg,
     },
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx
index 984ba2b807..7ff517a329 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/RestoreWalletDetailsScreen.tsx
@@ -137,7 +137,7 @@ export const RestoreWalletDetailsScreen = () => {
   const showModalTipsPassword = () => {
     openModal(
       strings.walletDetailsModalTitle,
-      <View style={styles.flex}>
+      <View style={[styles.flex, styles.modal]}>
         <ScrollView bounces={false}>
           <View>
             <CardAboutPhrase
@@ -164,9 +164,7 @@ export const RestoreWalletDetailsScreen = () => {
 
         <Space height="sm" />
 
-        <Button title={strings.continueButton} style={styles.button} onPress={closeModal} />
-
-        <Space height="lg" />
+        <Button title={strings.continueButton} shelleyTheme onPress={closeModal} />
       </View>,
       HEIGHT_MODAL_NAME_PASSWORD,
     )
@@ -175,7 +173,7 @@ export const RestoreWalletDetailsScreen = () => {
   const showModalTipsPlateNumber = () => {
     openModal(
       strings.walletDetailsModalTitle,
-      <View style={styles.flex}>
+      <View style={[styles.flex, styles.modal]}>
         <ScrollView bounces={false}>
           <View>
             <CardAboutPhrase
@@ -201,17 +199,15 @@ export const RestoreWalletDetailsScreen = () => {
 
         <Space height="sm" />
 
-        <Button title={strings.continueButton} style={styles.button} onPress={closeModal} />
-
-        <Space height="lg" />
+        <Button title={strings.continueButton} shelleyTheme onPress={closeModal} />
       </View>,
       HEIGHT_MODAL_CHECKSUM,
     )
   }
 
   return (
-    <SafeAreaView edges={['left', 'right', 'bottom']} style={[styles.root, styles.flex]}>
-      <KeyboardAvoidingView style={styles.flex}>
+    <KeyboardAvoidingView style={[styles.root, styles.flex]}>
+      <SafeAreaView edges={['left', 'right', 'bottom']} style={[styles.safeAreaView, styles.flex]}>
         <StepperProgress currentStep={2} currentStepTitle={strings.stepWalletDetails} totalSteps={2} />
 
         <View style={styles.info}>
@@ -294,10 +290,10 @@ export const RestoreWalletDetailsScreen = () => {
           </View>
         </ScrollView>
 
-        <View style={styles.actions}>
+        <View>
           <Button
+            shelleyTheme
             title={strings.next}
-            style={styles.button}
             onPress={() =>
               createWallet({
                 name,
@@ -312,8 +308,8 @@ export const RestoreWalletDetailsScreen = () => {
             disabled={isLoading || Object.keys(passwordErrors).length > 0 || Object.keys(nameErrors).length > 0}
           />
         </View>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
+      </SafeAreaView>
+    </KeyboardAvoidingView>
   )
 }
 
@@ -340,44 +336,45 @@ const useStyles = () => {
     flex: {
       ...atoms.flex_1,
     },
+    modal: {
+      ...atoms.pb_lg,
+      ...atoms.px_lg,
+    },
     root: {
-      justifyContent: 'space-between',
       backgroundColor: color.bg_color_high,
+      ...atoms.justify_between,
       ...atoms.px_lg,
     },
+    safeAreaView: {
+      ...atoms.pb_lg,
+    },
     info: {
       flexDirection: 'row',
     },
     title: {
+      color: color.text_gray_normal,
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
     },
     plateNumber: {
+      color: color.text_gray_normal,
       ...atoms.body_1_lg_regular,
-      color: color.gray_c900,
-      textAlign: 'center',
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    button: {
-      backgroundColor: color.primary_c500,
+      ...atoms.text_center,
+      ...atoms.justify_center,
+      ...atoms.align_center,
     },
     bolder: {
       ...atoms.body_1_lg_medium,
     },
     checksum: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
+      ...atoms.flex_row,
+      ...atoms.align_center,
+      ...atoms.justify_center,
       textAlignVertical: 'center',
     },
     walletChecksum: {
       width: 24,
       height: 24,
     },
-    actions: {
-      ...atoms.pt_lg,
-    },
   })
 
   return {styles} as const