Skip to content

Commit 93aef95

Browse files
im-adithyaim-adithya
authored
Merge pull request #378 from getAlby/fix/ui
fix: ui issues
2 parents 44635fb + 765e339 commit 93aef95

File tree

12 files changed

+284
-210
lines changed

12 files changed

+284
-210
lines changed

‎components/AlbyBanner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function AlbyBanner() {
3939
<View className="border bg-card border-muted rounded-2xl mt-5 flex flex-col gap-3 p-5 relative">
4040
<TouchableOpacity
4141
onPress={() => setShowBanner(false)}
42-
className="absolute right-0 p-4"
42+
className="absolute z-10 right-0 p-4"
4343
>
4444
<XIcon className="text-muted-foreground" />
4545
</TouchableOpacity>

‎components/Alert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function Alert({ title, description, type, icon: Icon, className }: Props) {
3939
<CardContent className="flex flex-row items-center gap-4">
4040
<Icon className={textColor} width={24} height={24} />
4141
<View className="flex flex-1 flex-col">
42-
<CardTitle className={textColor}>{title}</CardTitle>
42+
<CardTitle className={cn(textColor, "text-base")}>{title}</CardTitle>
4343
<CardDescription className={textColor}>{description}</CardDescription>
4444
</View>
4545
</CardContent>

‎components/Icons.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
PopiconsCircleCheckLine as CheckCircleIcon,
88
PopiconsCheckSolid as CheckIcon,
99
PopiconsChevronBottomLine as ChevronDownIcon,
10+
PopiconsChevronLeftLine as ChevronLeftIcon,
1011
PopiconsChevronRightSolid as ChevronRightIcon,
1112
PopiconsChevronTopLine as ChevronUpIcon,
1213
PopiconsCopySolid as CopyIcon,
@@ -64,6 +65,7 @@ interopIcon(CameraOffIcon);
6465
interopIcon(CheckCircleIcon);
6566
interopIcon(CheckIcon);
6667
interopIcon(ChevronDownIcon);
68+
interopIcon(ChevronLeftIcon);
6769
interopIcon(ChevronRightIcon);
6870
interopIcon(ChevronUpIcon);
6971
interopIcon(CopyIcon);
@@ -107,6 +109,7 @@ export {
107109
CheckCircleIcon,
108110
CheckIcon,
109111
ChevronDownIcon,
112+
ChevronLeftIcon,
110113
ChevronRightIcon,
111114
ChevronUpIcon,
112115
CopyIcon,

‎components/Screen.tsx‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { type NativeStackHeaderItemProps } from "@react-navigation/native-stack";
2-
import { Stack } from "expo-router";
2+
import { router, Stack } from "expo-router";
3+
import { TouchableOpacity } from "react-native";
34
import { type StackAnimationTypes } from "react-native-screens";
5+
import { ChevronLeftIcon } from "~/components/Icons";
6+
import { Text } from "~/components/ui/text";
47

58
type ScreenProps = {
69
title: string;
@@ -15,7 +18,26 @@ function Screen({ title, animation, right, left }: ScreenProps) {
1518
options={{
1619
title,
1720
animation,
18-
headerLeft: left ? left : undefined,
21+
headerLeft: left
22+
? left
23+
: ({ canGoBack }) => {
24+
return (
25+
canGoBack && (
26+
<TouchableOpacity onPress={() => router.back()}>
27+
<ChevronLeftIcon
28+
className="text-muted-foreground p-4"
29+
width={24}
30+
height={24}
31+
/>
32+
</TouchableOpacity>
33+
)
34+
);
35+
},
36+
headerTitle: () => (
37+
<Text className="text-2xl font-semibold2 text-muted-foreground">
38+
{title}
39+
</Text>
40+
),
1941
headerRight: right ? right : undefined,
2042
headerShadowVisible: false,
2143
}}

‎components/TransactionItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Nip47Transaction } from "@getalby/sdk";
22
import dayjs from "dayjs";
33
import { router } from "expo-router";
44
import React from "react";
5-
import { Pressable, View } from "react-native";
5+
import { TouchableOpacity, View } from "react-native";
66
import Animated from "react-native-reanimated";
77
import FailedTransactionIcon from "~/components/icons/FailedTransaction";
88
import PendingTransactionIcon from "~/components/icons/PendingTransaction";
@@ -54,7 +54,7 @@ export function TransactionItem({ tx }: Props) {
5454
: undefined;
5555

5656
return (
57-
<Pressable
57+
<TouchableOpacity
5858
key={tx.payment_hash}
5959
onPress={() =>
6060
router.navigate({
@@ -123,6 +123,6 @@ export function TransactionItem({ tx }: Props) {
123123
)}
124124
</View>
125125
</Animated.View>
126-
</Pressable>
126+
</TouchableOpacity>
127127
);
128128
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"expo-status-bar": "^3.0.8",
6565
"lottie-react-native": "~7.3.1",
6666
"message-port-polyfill": "^0.2.0",
67-
"nativewind": "^4.0.1",
67+
"nativewind": "^4.2.1",
6868
"react": "19.1.0",
6969
"react-dom": "19.1.0",
7070
"react-native": "0.81.5",

‎pages/Home.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export function Home() {
129129
</Text>
130130
</TouchableOpacity>
131131
)}
132-
<Pressable
132+
<TouchableOpacity
133133
onPress={switchBalanceState}
134134
className="w-full flex flex-col items-center justify-center gap-3"
135135
>
@@ -176,7 +176,7 @@ export function Home() {
176176
)}
177177
</View>
178178
)}
179-
</Pressable>
179+
</TouchableOpacity>
180180
{new Date().getDate() === 21 && <AlbyBanner />}
181181
</View>
182182
</ScrollView>

‎pages/settings/Settings.tsx‎

Lines changed: 82 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Alert, TouchableOpacity, View } from "react-native";
33
import {
44
AddressIcon,
55
BitcoinIcon,
6+
ChevronRightIcon,
67
FingerprintIcon,
78
NotificationIcon,
89
OnboardingIcon,
@@ -19,122 +20,161 @@ import AlbyBanner from "~/components/AlbyBanner";
1920
import Screen from "~/components/Screen";
2021
import { Text } from "~/components/ui/text";
2122
import { useSession } from "~/hooks/useSession";
22-
import { DEFAULT_WALLET_NAME, IS_EXPO_GO } from "~/lib/constants";
23+
import { IS_EXPO_GO } from "~/lib/constants";
2324
import { deregisterWalletNotifications } from "~/lib/notifications";
2425
import { removeAllInfo } from "~/lib/notificationsNativeStorage";
2526
import { useAppStore } from "~/lib/state/appStore";
2627
import { useColorScheme } from "~/lib/useColorScheme";
2728

2829
export function Settings() {
2930
const wallets = useAppStore((store) => store.wallets);
30-
const wallet = useAppStore((store) => store.wallets[store.selectedWalletId]);
31-
const fiatCurrency = useAppStore((store) => store.fiatCurrency);
3231
const [developerCounter, setDeveloperCounter] = React.useState(0);
3332
const [developerMode, setDeveloperMode] = React.useState(__DEV__);
3433
const { colorScheme, toggleColorScheme } = useColorScheme();
3534
const { signOut } = useSession();
3635

3736
return (
38-
<View className="flex-1 p-6 ">
37+
<View className="flex-1">
3938
<Screen title="Settings" />
40-
<View className="flex-1 flex flex-col gap-6">
39+
<View className="flex-1 flex flex-col mt-4">
4140
<Link href="/settings/wallets" asChild>
42-
<TouchableOpacity className="flex flex-row items-center gap-4">
43-
<WalletIcon className="text-muted-foreground" />
41+
<TouchableOpacity className="flex flex-row items-center gap-4 px-6 py-3">
42+
<WalletIcon
43+
className="text-muted-foreground"
44+
width={28}
45+
height={28}
46+
/>
4447
<Text className="font-medium2 text-xl text-foreground">
4548
Wallets
4649
</Text>
47-
<Text
48-
className="text-muted-foreground text-xl flex-shrink"
49-
numberOfLines={1}
50-
ellipsizeMode="tail"
51-
>
52-
({wallet.name || DEFAULT_WALLET_NAME})
53-
</Text>
50+
<ChevronRightIcon
51+
className="ml-auto text-muted-foreground"
52+
width={20}
53+
height={20}
54+
/>
5455
</TouchableOpacity>
5556
</Link>
5657

5758
<Link href="/settings/fiat-currency" asChild>
58-
<TouchableOpacity className="flex flex-row gap-4 items-center">
59-
<BitcoinIcon className="text-muted-foreground" />
59+
<TouchableOpacity className="flex flex-row gap-4 items-center px-6 py-3">
60+
<BitcoinIcon
61+
className="text-muted-foreground"
62+
width={28}
63+
height={28}
64+
/>
6065
<Text className="text-foreground font-medium2 text-xl">
6166
Fiat Currency
6267
</Text>
63-
{fiatCurrency && (
64-
<Text className="text-muted-foreground text-xl">
65-
({fiatCurrency})
66-
</Text>
67-
)}
68+
<ChevronRightIcon
69+
className="ml-auto text-muted-foreground"
70+
width={20}
71+
height={20}
72+
/>
6873
</TouchableOpacity>
6974
</Link>
7075

7176
{!IS_EXPO_GO && (
7277
<Link href="/settings/notifications" asChild>
73-
<TouchableOpacity className="flex flex-row gap-4 items-center">
74-
<NotificationIcon className="text-muted-foreground" />
78+
<TouchableOpacity className="flex flex-row gap-4 items-center px-6 py-3">
79+
<NotificationIcon
80+
className="text-muted-foreground"
81+
width={28}
82+
height={28}
83+
/>
7584
<Text className="text-foreground font-medium2 text-xl">
7685
Notifications
7786
</Text>
87+
<ChevronRightIcon
88+
className="ml-auto text-muted-foreground"
89+
width={20}
90+
height={20}
91+
/>
7892
</TouchableOpacity>
7993
</Link>
8094
)}
8195

8296
<Link href="/settings/security" asChild>
83-
<TouchableOpacity className="flex flex-row gap-4 items-center">
84-
<FingerprintIcon className="text-muted-foreground" />
97+
<TouchableOpacity className="flex flex-row gap-4 items-center px-6 py-3">
98+
<FingerprintIcon
99+
className="text-muted-foreground"
100+
width={28}
101+
height={28}
102+
/>
85103
<Text className="text-foreground font-medium2 text-xl">
86104
Security
87105
</Text>
106+
<ChevronRightIcon
107+
className="ml-auto text-muted-foreground"
108+
width={20}
109+
height={20}
110+
/>
88111
</TouchableOpacity>
89112
</Link>
90113

91114
<TouchableOpacity
92-
className="flex flex-row gap-4 items-center"
115+
className="flex flex-row gap-4 items-center px-6 py-3"
93116
onPress={toggleColorScheme}
94117
>
95-
<ThemeIcon className="text-muted-foreground" />
118+
<ThemeIcon className="text-muted-foreground" width={28} height={28} />
96119
<Text className="text-foreground font-medium2 text-xl">Theme</Text>
97120
<Text className="text-muted-foreground text-xl">
98121
({colorScheme.charAt(0).toUpperCase() + colorScheme.substring(1)})
99122
</Text>
100123
</TouchableOpacity>
101124

102125
<Link href="/settings/address-book" asChild>
103-
<TouchableOpacity className="flex flex-row gap-4 items-center">
104-
<AddressIcon className="text-muted-foreground" />
126+
<TouchableOpacity className="flex flex-row gap-4 items-center px-6 py-3">
127+
<AddressIcon
128+
className="text-muted-foreground"
129+
width={28}
130+
height={28}
131+
/>
105132
<Text className="text-foreground font-medium2 text-xl">
106133
Address Book
107134
</Text>
135+
<ChevronRightIcon
136+
className="ml-auto text-muted-foreground"
137+
width={20}
138+
height={20}
139+
/>
108140
</TouchableOpacity>
109141
</Link>
110142

111143
{developerMode && (
112144
<>
113-
<View className="mt-5 flex flex-col gap-6">
114-
<Text className="text-muted-foreground uppercase">
145+
<View className="mt-2 flex flex-col">
146+
<Text className="text-muted-foreground uppercase px-6 py-3">
115147
Developer mode
116148
</Text>
117149
<TouchableOpacity
118-
className="flex flex-row gap-4 items-center"
150+
className="flex flex-row gap-4 items-center px-6 py-3"
119151
onPress={() => {
120152
signOut();
121153
}}
122154
>
123-
<SignOutIcon className="text-muted-foreground" />
155+
<SignOutIcon
156+
className="text-muted-foreground"
157+
width={28}
158+
height={28}
159+
/>
124160
<Text className="font-medium2 text-xl">Sign out</Text>
125161
</TouchableOpacity>
126162
<TouchableOpacity
127-
className="flex flex-row gap-4 items-center"
163+
className="flex flex-row gap-4 items-center px-6 py-3"
128164
onPress={() => {
129165
router.dismissAll();
130166
useAppStore.getState().setOnboarded(false);
131167
}}
132168
>
133-
<OnboardingIcon className="text-muted-foreground" />
169+
<OnboardingIcon
170+
className="text-muted-foreground"
171+
width={28}
172+
height={28}
173+
/>
134174
<Text className="font-medium2 text-xl">Open Onboarding</Text>
135175
</TouchableOpacity>
136176
<TouchableOpacity
137-
className="flex flex-row gap-4 items-center"
177+
className="flex flex-row gap-4 items-center px-6 py-3"
138178
onPress={() => {
139179
Alert.alert(
140180
"Reset",
@@ -161,7 +201,11 @@ export function Settings() {
161201
);
162202
}}
163203
>
164-
<ResetIcon className="text-destructive" />
204+
<ResetIcon
205+
className="text-destructive"
206+
width={28}
207+
height={28}
208+
/>
165209
<Text className="text-destructive font-medium2 text-xl">
166210
Reset Wallet
167211
</Text>
@@ -170,7 +214,7 @@ export function Settings() {
170214
</>
171215
)}
172216
</View>
173-
<View className="flex flex-col gap-6">
217+
<View className="flex flex-col p-4 gap-6">
174218
<AlbyBanner />
175219
<TouchableOpacity
176220
onPress={() => {

0 commit comments

Comments
 (0)