fix: settings design qa

leather-io · Sep 27, 2024 · 82e8857 · 82e8857
1 parent 498a1db
commit 82e8857
Show file tree

Hide file tree

Showing 15 changed files with 176 additions and 128 deletions.
diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
@@ -1997,7 +1997,7 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
+  Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0
 
 PODFILE CHECKSUM: 1183a5e3969c957f2df7140e9b85ba46d355b320
 

diff --git a/apps/mobile/src/app/(home)/settings/display/display-cell.tsx b/apps/mobile/src/app/(home)/settings/display/display-cell.tsx
@@ -1,12 +1,7 @@
 import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
 
-import {
-  Avatar,
-  ChevronRightIcon,
-  Flag,
-  ItemLayout,
-  TouchableOpacity,
-} from '@leather.io/ui/native';
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
 
 interface DisplayCellProps {
   caption: string;
@@ -16,14 +11,14 @@ interface DisplayCellProps {
 }
 export function DisplayCell({ caption, icon, onCreateSheetRef, title }: DisplayCellProps) {
   return (
-    <TouchableOpacity onPress={onCreateSheetRef}>
+    <Pressable onPress={onCreateSheetRef}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<ChevronRightIcon variant="small" />}
           captionLeft={caption}
           titleLeft={title}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/help/help-cell.tsx b/apps/mobile/src/app/(home)/settings/help/help-cell.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
+
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
+
+interface DisplayCellProps {
+  caption: string;
+  icon: ReactNode;
+  onPress(): void;
+  title: string;
+}
+export function HelpCell({ caption, icon, onPress, title }: DisplayCellProps) {
+  return (
+    <Pressable onPress={onPress}>
+      <Flag img={<Avatar>{icon}</Avatar>}>
+        <ItemLayout
+          actionIcon={<ChevronRightIcon variant="small" />}
+          captionLeft={caption}
+          titleLeft={title}
+        />
+      </Flag>
+    </Pressable>
+  );
+}
diff --git a/apps/mobile/src/app/(home)/settings/help/index.tsx b/apps/mobile/src/app/(home)/settings/help/index.tsx
@@ -4,14 +4,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
-import {
-  Box,
-  Cell,
-  GraduateCapIcon,
-  MagicBookIcon,
-  SupportIcon,
-  Theme,
-} from '@leather.io/ui/native';
+import { Box, GraduateCapIcon, MagicBookIcon, SupportIcon, Theme } from '@leather.io/ui/native';
+
+import { HelpCell } from './help-cell';
 
 export default function SettingsHelpScreen() {
   const { bottom } = useSafeAreaInsets();
@@ -27,17 +22,22 @@ export default function SettingsHelpScreen() {
           gap: theme.spacing[5],
         }}
       >
-        <Cell
+        <HelpCell
           title={t`Support and feedback`}
-          subtitle={t`Placeholder`}
-          Icon={SupportIcon}
+          caption={t`Placeholder`}
+          icon={<SupportIcon />}
+          onPress={() => {}}
+        />
+        <HelpCell
+          title={t`Guides`}
+          caption={t`Placeholder`}
+          icon={<MagicBookIcon />}
           onPress={() => {}}
         />
-        <Cell title={t`Guides`} subtitle={t`Placeholder`} Icon={MagicBookIcon} onPress={() => {}} />
-        <Cell
+        <HelpCell
           title={t`Learn`}
-          subtitle={t`Placeholder`}
-          Icon={GraduateCapIcon}
+          caption={t`Placeholder`}
+          icon={<GraduateCapIcon />}
           onPress={() => {}}
         />
       </ScrollView>

diff --git a/apps/mobile/src/app/(home)/settings/index.tsx b/apps/mobile/src/app/(home)/settings/index.tsx
@@ -12,17 +12,19 @@ import {
   BellIcon,
   Box,
   Button,
-  Cell,
   GlobeTiltedIcon,
-  SettingsSliderThreeIcon,
+  SettingsGearIcon,
   ShieldIcon,
-  SunIcon,
+  SquareLinesBottomIcon,
   SupportIcon,
   Text,
   Theme,
+  UsersTwoIcon,
   WalletIcon,
 } from '@leather.io/ui/native';
 
+import { SettingsCell } from './settings-cell';
+
 export default function SettingsScreen() {
   const { bottom } = useSafeAreaInsets();
   const theme = useTheme<Theme>();
@@ -38,61 +40,49 @@ export default function SettingsScreen() {
           gap: theme.spacing[5],
         }}
       >
-        <Cell
+        <SettingsCell
           title={t`Wallets and accounts`}
-          subtitle={t`Add, configure and remove`}
-          Icon={WalletIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsWallet);
-          }}
+          caption={t`Add, configure and remove`}
+          icon={<WalletIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsWallet)}
         />
         <Divider />
-        <Cell
+        <SettingsCell
           title={t`Display`}
-          subtitle={t`Theme, bitcoin unit and more`}
-          Icon={SunIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsDisplay);
-          }}
+          caption={t`Theme, bitcoin unit and more`}
+          icon={<SquareLinesBottomIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsDisplay)}
         />
-        <Cell
+        <SettingsCell
           title={t`Security`}
-          subtitle={t`Analytics and app authentication`}
-          Icon={ShieldIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsSecurity);
-          }}
+          caption={t`Analytics and app authentication`}
+          icon={<ShieldIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsSecurity)}
         />
-        <Cell
+        <SettingsCell
           title={t`Networks`}
-          subtitle={t`Mainnet, testnet or signet`}
-          Icon={GlobeTiltedIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNetworks);
-          }}
+          caption={t`Mainnet, testnet or signet`}
+          icon={<GlobeTiltedIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsNetworks)}
         />
-        <Cell
+        <SettingsCell
           title={t`Notifications`}
-          subtitle={t`Push and email notifications`}
-          Icon={BellIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNotifications);
-          }}
+          caption={t`Push and email notifications`}
+          icon={<BellIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsNotifications)}
         />
-        <Cell
+        <SettingsCell
           title={t`Help`}
-          subtitle={t`Support, guides and articles`}
-          Icon={SupportIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsHelp);
-          }}
+          caption={t`Support, guides and articles`}
+          icon={<SupportIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsHelp)}
         />
         <Accordion
           label={t`More options`}
           content={
             <>
-              <Cell title={t`Contacts`} Icon={SupportIcon} />
-              <Cell title={t`Fees`} Icon={SettingsSliderThreeIcon} />
+              <SettingsCell title={t`Contacts`} icon={<UsersTwoIcon />} onPress={() => {}} />
+              <SettingsCell title={t`Fees`} icon={<SettingsGearIcon />} onPress={() => {}} />
             </>
           }
         />

diff --git a/apps/mobile/src/app/(home)/settings/networks/network-cell.tsx b/apps/mobile/src/app/(home)/settings/networks/network-cell.tsx
@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
 
-import { Avatar, Flag, ItemLayout, RadioButton, TouchableOpacity } from '@leather.io/ui/native';
+import { Avatar, Flag, ItemLayout, RadioButton } from '@leather.io/ui/native';
 
 interface NetworkCellProps {
   caption: string;
@@ -17,14 +18,14 @@ export function NetworkCell({
   title,
 }: NetworkCellProps) {
   return (
-    <TouchableOpacity onPress={onChangeNetwork}>
+    <Pressable onPress={onChangeNetwork}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<RadioButton disabled isSelected={isSelected} />}
           titleLeft={title}
           captionLeft={caption}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/notifications/email.tsx b/apps/mobile/src/app/(home)/settings/notifications/email.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Pressable } from 'react-native';
 
 import { EmailAddressSheet } from '@/features/settings/email-address-sheet';
 import { t } from '@lingui/macro';
@@ -21,7 +21,7 @@ export default function SettingsNotificationsEmailScreen() {
   return (
     <>
       <SettingsScreenLayout>
-        <TouchableOpacity
+        <Pressable
           onPress={() => {
             emailAddressSheetRef.current?.present();
           }}
@@ -39,7 +39,7 @@ export default function SettingsNotificationsEmailScreen() {
               titleLeft={t`Email address`}
             />
           </Flag>
-        </TouchableOpacity>
+        </Pressable>
       </SettingsScreenLayout>
       <EmailAddressSheet sheetRef={emailAddressSheetRef} />
     </>

diff --git a/apps/mobile/src/app/(home)/settings/notifications/index.tsx b/apps/mobile/src/app/(home)/settings/notifications/index.tsx
@@ -1,4 +1,5 @@
-import { Switch, TouchableOpacity } from 'react-native-gesture-handler';
+import { Pressable } from 'react-native';
+import { Switch } from 'react-native-gesture-handler';
 
 import { t } from '@lingui/macro';
 
@@ -10,7 +11,7 @@ import SettingsScreenLayout from '../settings-screen.layout';
 export default function SettingsNotificationsScreen() {
   return (
     <SettingsScreenLayout>
-      <TouchableOpacity onPress={() => {}}>
+      <Pressable onPress={() => {}}>
         <Flag
           img={
             <Avatar>
@@ -24,7 +25,7 @@ export default function SettingsNotificationsScreen() {
             captionLeft={t`Description`}
           />
         </Flag>
-      </TouchableOpacity>
+      </Pressable>
     </SettingsScreenLayout>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/security/security-cell.tsx b/apps/mobile/src/app/(home)/settings/security/security-cell.tsx
@@ -1,12 +1,7 @@
 import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
 
-import {
-  Avatar,
-  ChevronRightIcon,
-  Flag,
-  ItemLayout,
-  TouchableOpacity,
-} from '@leather.io/ui/native';
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
 
 interface SecurityCellProps {
   caption: string;
@@ -16,14 +11,14 @@ interface SecurityCellProps {
 }
 export function SecurityCell({ caption, icon, onCreateSheetRef, title }: SecurityCellProps) {
   return (
-    <TouchableOpacity onPress={onCreateSheetRef}>
+    <Pressable onPress={onCreateSheetRef}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<ChevronRightIcon variant="small" />}
           captionLeft={caption}
           titleLeft={title}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/settings-cell.tsx b/apps/mobile/src/app/(home)/settings/settings-cell.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
+
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
+
+interface SettingsCellProps {
+  caption?: string;
+  icon: ReactNode;
+  onPress(): void;
+  title: string;
+}
+export function SettingsCell({ caption, icon, onPress, title }: SettingsCellProps) {
+  return (
+    <Pressable onPress={onPress}>
+      <Flag img={<Avatar>{icon}</Avatar>}>
+        <ItemLayout
+          actionIcon={<ChevronRightIcon variant="small" />}
+          captionLeft={caption}
+          titleLeft={title}
+        />
+      </Flag>
+    </Pressable>
+  );
+}