Adjust button gaps

Author: vilicvane

src/app/about.tsx

@@ -158,7 +158,7 @@ export default function AboutScreen(): ReactNode {
           />
         </List.Section>
       </ScrollView>
-      <View style={{padding: 16, gap: 8}}>
+      <View style={{padding: 16, gap: 10}}>
         <Button
           mode="contained"
           buttonColor={theme.colors.primaryContainer}

src/app/backup.tsx

@@ -1,5 +1,6 @@
 import {router, useLocalSearchParams} from 'expo-router';
 import {type ReactNode, useEffect, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {Alert, ScrollView, View} from 'react-native';
 import {Appbar, Button, Icon, List, TextInput} from 'react-native-paper';
 
@@ -184,7 +185,7 @@ function StepSetAccessCode({
   const valid = accessCodeValid && confirmAccessCodeValid;
 
   return (
-    <Step status="active" title="Set access code">
+    <Step status="active" title="Set access code" style={{gap: 8}}>
       <TextInput
         mode="outlined"
         secureTextEntry
@@ -303,10 +304,12 @@ function StepFinalize({state}: {state: StepState}): ReactNode {
 function Step({
   status,
   title,
+  style,
   children,
 }: {
   status: 'pending' | 'active' | 'done';
   title: string;
+  style?: StyleProp<ViewStyle>;
   children?: ReactNode;
 }): ReactNode {
   const theme = useTheme();
@@ -350,12 +353,15 @@ function Step({
       right={() => null}
     >
       <View
-        style={{
-          paddingLeft: 48,
-          paddingRight: 16,
-          paddingBottom: 8,
-          gap: 8,
-        }}
+        style={[
+          {
+            paddingLeft: 48,
+            paddingRight: 16,
+            paddingBottom: 8,
+            gap: 10,
+          },
+          style,
+        ]}
       >
         {children}
       </View>

src/app/card-settings.tsx

@@ -118,7 +118,7 @@ export default function CardSettingsScreen(): ReactNode {
           </List.Section>
         )}
       </ScrollView>
-      <View style={{margin: 16, gap: 8}}>
+      <View style={{margin: 16, gap: 10}}>
         {card.backupStatus.status === 'active' && (
           <AsyncButton
             mode="contained"

src/app/index.tsx

@@ -237,7 +237,7 @@ export default function IndexScreen(): ReactNode {
         )}
       </ScrollView>
       {(pendingSessionRequests.length > 0 || wallets.length > 0) && (
-        <View style={{margin: 16, gap: 8}}>
+        <View style={{margin: 16, gap: 10}}>
           <View>
             {pendingSessionRequests.length > 0 && (
               <Button

src/app/session-authenticate.tsx

@@ -101,7 +101,7 @@ export default function SessionAuthenticateScreen(): ReactNode {
             margin: 16,
             marginTop: 'auto',
             flexDirection: 'row',
-            gap: 8,
+            gap: 10,
           }}
         >
           <AsyncButton

src/app/session-proposal.tsx

@@ -80,7 +80,7 @@ export default function SessionProposalScreen(): ReactNode {
           margin: 16,
           marginTop: 'auto',
           flexDirection: 'row',
-          gap: 8,
+          gap: 10,
         }}
       >
         <AsyncButton

src/app/session.tsx

@@ -268,7 +268,7 @@ export default function SessionScreen(): ReactNode {
           </List.Accordion>
         )}
       </ScrollView>
-      <View style={{margin: 16, flexDirection: 'row', gap: 8}}>
+      <View style={{margin: 16, flexDirection: 'row', gap: 10}}>
         <AsyncButton
           mode="contained"
           buttonColor={theme.colors.secondaryContainer}

src/app/wallet.tsx

@@ -121,10 +121,9 @@ export default function WalletScreen(): ReactNode {
           ))}
         </List.Section>
       </ScrollView>
-      <View style={{margin: 16, gap: 8}}>
+      <View style={{margin: 16, gap: 10}}>
         {addingDerivation && (
           <EditableTextInput
-            style={{marginBottom: 8}}
             mode="outlined"
             label="Derivation"
             autoFocus

src/components/request-viewer/send-transaction.tsx

@@ -173,7 +173,7 @@ export function SendTransaction({
             margin: 16,
             marginTop: 'auto',
             flexDirection: 'row',
-            gap: 8,
+            gap: 10,
           }}
         >
           <AsyncButton

src/components/request-viewer/sign-message.tsx

@@ -103,7 +103,7 @@ export function SignMessage({session, request}: SignMessageProps): ReactNode {
             margin: 16,
             marginTop: 'auto',
             flexDirection: 'row',
-            gap: 8,
+            gap: 10,
           }}
         >
           <AsyncButton