mobile: adjust paddings, make bottom sheet full screen (#672)

daimo-eth · Feb 9, 2024 · f1c7299 · f1c7299
1 parent 34f6592
commit f1c7299
Showing 1 changed file with 37 additions and 25 deletions.
diff --git a/apps/daimo-mobile/src/view/screen/AccountScreen.tsx b/apps/daimo-mobile/src/view/screen/AccountScreen.tsx
@@ -9,7 +9,7 @@ import {
 import { daimoChainFromId } from "@daimo/contract";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { ActivityIndicator, Linking, View } from "react-native";
+import { ActivityIndicator, Linking, StyleSheet, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 
 import { addLastSendTime } from "../../logic/daimoContacts";
@@ -50,8 +50,10 @@ function AccountScreenInner(props: Props & { account: Account }) {
   const { params } = props.route;
 
   return (
-    <View style={ss.container.screen}>
-      <ScreenHeader title="Account" onBack={goBack || goHome} />
+    <View style={[ss.container.screen, styles.noPadding]}>
+      <View style={styles.screenPadding}>
+        <ScreenHeader title="Account" onBack={goBack || goHome} />
+      </View>
       <Spacer h={32} />
       {"link" in params && (
         <AccountScreenLoader account={props.account} link={params.link} />
@@ -162,31 +164,41 @@ function AccountScreenBody({
 
   return (
     <>
-      <View
-        style={{
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-      >
-        <ContactBubble contact={{ type: "eAcc", ...eAcc }} size={64} />
+      <View style={styles.screenPadding}>
+        <View style={styles.mainContent}>
+          <ContactBubble contact={{ type: "eAcc", ...eAcc }} size={64} />
+          <Spacer h={16} />
+          <AccountCopyLinkButton eAcc={eAcc} size="h2" center />
+          <Spacer h={8} />
+          <TextH3 color={color.gray3}>{subtitle}</TextH3>
+        </View>
+        <Spacer h={24} />
+        <View style={ss.container.padH8}>
+          {canSend && <ButtonBig type="primary" title="SEND" onPress={send} />}
+        </View>
         <Spacer h={16} />
-        <AccountCopyLinkButton eAcc={eAcc} size="h2" center />
-        <Spacer h={8} />
-        <TextH3 color={color.gray3}>{subtitle}</TextH3>
-      </View>
-      <Spacer h={24} />
-      <View style={ss.container.padH8}>
-        {canSend && <ButtonBig type="primary" title="SEND" onPress={send} />}
-      </View>
-      <Spacer h={16} />
-      <View style={ss.container.padH8}>
-        <ButtonBig
-          type="subtle"
-          title="VIEW ON BLOCK EXPLORER"
-          onPress={openExplorer}
-        />
+        <View style={ss.container.padH8}>
+          <ButtonBig
+            type="subtle"
+            title="VIEW ON BLOCK EXPLORER"
+            onPress={openExplorer}
+          />
+        </View>
       </View>
       {bottomSheet}
     </>
   );
 }
+
+const styles = StyleSheet.create({
+  mainContent: {
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  noPadding: {
+    paddingHorizontal: 0,
+  },
+  screenPadding: {
+    paddingHorizontal: 16,
+  },
+});