Skip to content

Commit 1abdced

Browse files
im-adithyaim-adithya
authored
Merge pull request #412 from getAlby/chore/design-issues
fix: design issues
2 parents b89f7ad + 52bc30a commit 1abdced

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1029
-236
lines changed

‎components/AlbyBanner.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function AlbyBanner({ className }: { className?: string }) {
6969
>
7070
<XIcon className="text-muted-foreground" />
7171
</TouchableOpacity>
72-
<Text className="font-semibold2 text-center text-lg">
72+
<Text className="font-semibold2 text-center ios:text-lg android:text-base">
7373
✨ Enjoying Alby Go?
7474
</Text>
7575
<Text className="text-secondary-foreground text-center">

‎components/Alert.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { View } from "react-native";
1+
import { Platform, View } from "react-native";
22
import { type SvgProps } from "react-native-svg";
33
import { Text } from "~/components/ui/text";
44
import { cn } from "~/lib/utils";
@@ -30,12 +30,29 @@ function Alert({ title, description, type, icon: Icon, className }: Props) {
3030
>
3131
<View className="flex flex-row items-center gap-2">
3232
<Icon className={textColor} width={20} height={20} />
33-
<Text className={cn("text-sm sm:text-base font-semibold2", textColor)}>
33+
<Text
34+
className={cn(
35+
Platform.select({
36+
ios: "ios:text-sm ios:sm:text-base",
37+
android: "android:text-sm",
38+
}),
39+
"font-semibold2",
40+
textColor,
41+
)}
42+
>
3443
{title}
3544
</Text>
3645
</View>
3746
{description && (
38-
<Text className={cn("text-xs sm:text-sm", textColor)}>
47+
<Text
48+
className={cn(
49+
Platform.select({
50+
ios: "ios:text-sm ios:sm:text-base",
51+
android: "android:text-sm",
52+
}),
53+
textColor,
54+
)}
55+
>
3956
{description}
4057
</Text>
4158
)}

‎components/BTCMapModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function BTCMapModal({ visible, onClose }: BTCMapModalProps) {
6969
className="w-16 h-16"
7070
resizeMode="contain"
7171
/>
72-
<Text className="text-3xl font-semibold2 text-secondary-foreground">
72+
<Text className="ios:text-3xl android:text-2xl font-semibold2 text-secondary-foreground">
7373
BTC Map
7474
</Text>
7575
<View className="flex flex-col items-center gap-4">

‎components/ConnectionInfoModal.tsx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,15 @@ function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
6363
>
6464
<XIcon className="text-muted-foreground" width={24} height={24} />
6565
</TouchableOpacity>
66-
<Text className="text-xl sm:text-2xl text-center font-bold2 text-secondary-foreground">
66+
<Text
67+
className={cn(
68+
Platform.select({
69+
ios: "ios:text-xl ios:sm:text-2xl",
70+
android: "android:text-xl",
71+
}),
72+
"text-center font-bold2 text-secondary-foreground",
73+
)}
74+
>
6775
Connection Info
6876
</Text>
6977
</View>
@@ -94,21 +102,21 @@ function ConnectionInfoModal({ visible, onClose }: ConnectionInfoModalProps) {
94102

95103
<View className="flex gap-2">
96104
<Text className="font-semibold2">Capabilities</Text>
97-
<Text className="bg-muted p-2 rounded-md text-sm font-mono">
105+
<Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
98106
{capabilities?.join(", ")}
99107
</Text>
100108
</View>
101109

102110
<View className="flex gap-2">
103111
<Text className="font-semibold2">App Pubkey</Text>
104-
<Text className="bg-muted p-2 rounded-md text-sm font-mono">
112+
<Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
105113
{nwcClient?.publicKey}
106114
</Text>
107115
</View>
108116

109117
<View className="flex gap-2">
110118
<Text className="font-semibold2">Wallet Pubkey</Text>
111-
<Text className="bg-muted p-2 rounded-md text-sm font-mono">
119+
<Text className="bg-muted p-2 rounded-md ios:text-sm android:text-xs font-mono">
112120
{nwcClient?.walletPubkey}
113121
</Text>
114122
</View>

‎components/Contact.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function Contact({
3535
}}
3636
>
3737
<Text
38-
className="text-2xl font-semibold2"
38+
className="ios:text-2xl android:text-xl font-semibold2"
3939
style={{
4040
color: isDarkColorScheme ? lightColor : darkColor,
4141
}}
@@ -44,7 +44,9 @@ export default function Contact({
4444
</Text>
4545
</View>
4646
<View className="flex flex-1 flex-col">
47-
<Text className="text-lg font-semibold2">{name || lnAddress}</Text>
47+
<Text className="ios:text-lg android:text-base font-semibold2">
48+
{name || lnAddress}
49+
</Text>
4850
<Text className="text-secondary-foreground">{lnAddress}</Text>
4951
</View>
5052
{onDelete && (

‎components/CreateInvoice.tsx‎

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Nip47Transaction } from "@getalby/sdk";
22
import * as Clipboard from "expo-clipboard";
33
import { router } from "expo-router";
44
import React from "react";
5-
import { Share, View } from "react-native";
5+
import { Platform, Share, View } from "react-native";
66
import Toast from "react-native-toast-message";
77
import { DualCurrencyInput } from "~/components/DualCurrencyInput";
88
import { CopyIcon, ShareIcon } from "~/components/Icons";
@@ -13,7 +13,7 @@ import { Text } from "~/components/ui/text";
1313
import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
1414
import { errorToast } from "~/lib/errorToast";
1515
import { useAppStore } from "~/lib/state/appStore";
16-
import { formatBitcoinAmount } from "~/lib/utils";
16+
import { cn, formatBitcoinAmount } from "~/lib/utils";
1717

1818
export function CreateInvoice() {
1919
const getFiatAmount = useGetFiatAmount();
@@ -153,17 +153,41 @@ export function CreateInvoice() {
153153
<View className="flex-1 justify-center items-center gap-6 mt-4">
154154
<View className="flex flex-row justify-center items-center gap-2">
155155
<Loading />
156-
<Text className="text-lg sm:text-xl font-medium2">
156+
<Text
157+
className={cn(
158+
Platform.select({
159+
ios: "ios:text-lg ios:sm:text-xl",
160+
android: "android:text-lg",
161+
}),
162+
"font-medium2",
163+
)}
164+
>
157165
Waiting for payment
158166
</Text>
159167
</View>
160168
<QRCode value={invoice} showAvatar />
161169
<View className="flex flex-col items-center justify-center gap-2">
162-
<Text className="text-3xl font-semibold2">
170+
<Text
171+
className={cn(
172+
Platform.select({
173+
ios: "ios:text-3xl ios:sm:text-4xl",
174+
android: "android:text-3xl",
175+
}),
176+
"font-semibold2",
177+
)}
178+
>
163179
{formatBitcoinAmount(+amount, bitcoinDisplayFormat)}
164180
</Text>
165181
{getFiatAmount && (
166-
<Text className="text-secondary-foreground text-xl font-semibold2">
182+
<Text
183+
className={cn(
184+
Platform.select({
185+
ios: "ios:text-xl ios:sm:text-2xl",
186+
android: "android:text-xl",
187+
}),
188+
"text-secondary-foreground font-semibold2",
189+
)}
190+
>
167191
{getFiatAmount(+amount)}
168192
</Text>
169193
)}

‎components/DualCurrencyInput.tsx‎

Lines changed: 72 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ function DescriptionInput({
9595
<Text
9696
numberOfLines={2}
9797
ellipsizeMode="tail"
98-
className="text-secondary-foreground font-medium2 text-lg text-center px-2"
98+
className="text-secondary-foreground font-medium2 ios:text-lg android:text-base text-center px-2"
9999
>
100100
{description}
101101
</Text>
@@ -113,7 +113,7 @@ function DescriptionInput({
113113
<Text
114114
numberOfLines={2}
115115
ellipsizeMode="tail"
116-
className="text-secondary-foreground font-medium2 text-lg text-center px-2"
116+
className="text-secondary-foreground font-medium2 ios:text-lg android:text-base text-center px-2"
117117
>
118118
{description || "Add Description"}
119119
</Text>
@@ -153,14 +153,22 @@ function DescriptionInput({
153153
height={24}
154154
/>
155155
</TouchableOpacity>
156-
<Text className="text-xl sm:text-2xl font-semibold2 text-secondary-foreground">
156+
<Text
157+
className={cn(
158+
Platform.select({
159+
ios: "ios:text-xl ios:sm:text-2xl",
160+
android: "android:text-xl",
161+
}),
162+
"font-semibold2 text-secondary-foreground",
163+
)}
164+
>
157165
Add Description
158166
</Text>
159167
</View>
160168
{isIOS ? (
161169
<BottomSheetTextInput
162170
placeholder="Sats for Satoshi"
163-
className="text-foreground placeholder:text-muted border-transparent bg-transparent text-center my-16 p-3 border text-2xl leading-[1.25] font-semibold2 caret-primary"
171+
className="text-foreground placeholder:text-muted border-transparent bg-transparent text-center my-16 p-3 border ios:text-xl ios:sm:text-2xl ios:leading-[1.25] font-semibold2 caret-primary"
164172
placeholderClassName="text-muted"
165173
selectionColor={primary}
166174
value={input}
@@ -171,7 +179,7 @@ function DescriptionInput({
171179
) : (
172180
<Input
173181
placeholder="Sats for Satoshi"
174-
className="text-foreground border-0 border-transparent bg-transparent text-center my-16 p-3 text-2xl leading-[1.25] font-semibold2"
182+
className="text-foreground border-0 border-transparent bg-transparent text-center my-16 p-3 android:text-xl leading-[1.25] font-semibold2"
175183
value={input}
176184
onChangeText={setInput}
177185
onSubmitEditing={save}
@@ -361,10 +369,24 @@ export function DualCurrencyInput({
361369
(inputMode === "sats" && bitcoinDisplayFormat === "bip177")) && (
362370
<Text
363371
className={cn(
364-
displayCharacterCount > 11 ? "text-4xl" : "text-5xl",
365-
displayCharacterCount <= 14 &&
366-
displayCharacterCount >= 11 &&
367-
"sm:text-5xl",
372+
Platform.select({
373+
ios: cn(
374+
displayCharacterCount > 11
375+
? "ios:text-4xl"
376+
: "ios:text-5xl",
377+
displayCharacterCount <= 14 &&
378+
displayCharacterCount >= 11 &&
379+
"ios:sm:text-5xl",
380+
),
381+
android: cn(
382+
displayCharacterCount > 11
383+
? "android:text-4xl"
384+
: "android:text-[42px]",
385+
displayCharacterCount <= 14 &&
386+
displayCharacterCount >= 11 &&
387+
"sm:android:text-[42px]",
388+
),
389+
}),
368390
"text-secondary-foreground font-bold2 !leading-[1.5]",
369391
!text && "text-muted",
370392
)}
@@ -376,10 +398,24 @@ export function DualCurrencyInput({
376398
)}
377399
<Text
378400
className={cn(
379-
displayCharacterCount > 11 ? "text-4xl" : "text-5xl",
380-
displayCharacterCount <= 14 &&
381-
displayCharacterCount >= 11 &&
382-
"sm:text-5xl",
401+
Platform.select({
402+
ios: cn(
403+
displayCharacterCount > 11
404+
? "ios:text-4xl"
405+
: "ios:text-5xl",
406+
displayCharacterCount <= 14 &&
407+
displayCharacterCount >= 11 &&
408+
"ios:sm:text-5xl",
409+
),
410+
android: cn(
411+
displayCharacterCount > 11
412+
? "android:text-4xl"
413+
: "android:text-[42px]",
414+
displayCharacterCount <= 14 &&
415+
displayCharacterCount >= 11 &&
416+
"sm:android:text-[42px]",
417+
),
418+
}),
383419
"font-semibold2 !leading-[1.5]",
384420
!text && "text-muted",
385421
validationMessage && "text-destructive",
@@ -400,10 +436,24 @@ export function DualCurrencyInput({
400436
{inputMode === "sats" && bitcoinDisplayFormat === "sats" && (
401437
<Text
402438
className={cn(
403-
displayCharacterCount > 11 ? "text-4xl" : "text-5xl",
404-
displayCharacterCount <= 14 &&
405-
displayCharacterCount >= 11 &&
406-
"sm:text-5xl",
439+
Platform.select({
440+
ios: cn(
441+
displayCharacterCount > 11
442+
? "ios:text-4xl"
443+
: "ios:text-5xl",
444+
displayCharacterCount <= 14 &&
445+
displayCharacterCount >= 11 &&
446+
"ios:sm:text-5xl",
447+
),
448+
android: cn(
449+
displayCharacterCount > 11
450+
? "android:text-4xl"
451+
: "android:text-[42px]",
452+
displayCharacterCount <= 14 &&
453+
displayCharacterCount >= 11 &&
454+
"sm:android:text-[42px]",
455+
),
456+
}),
407457
"text-secondary-foreground font-semibold2 !leading-[1.5]",
408458
!text && "text-muted",
409459
)}
@@ -416,13 +466,13 @@ export function DualCurrencyInput({
416466
<Pressable onPress={toggleInputMode}>
417467
<View className="flex flex-row gap-2 items-center justify-center">
418468
{getFiatAmount ? (
419-
<Text className="text-secondary-foreground text-3xl font-semibold2">
469+
<Text className="text-secondary-foreground ios:text-3xl android:text-2xl font-semibold2">
420470
{inputMode === "fiat"
421471
? formatBitcoinAmount(+amount, bitcoinDisplayFormat)
422472
: getFiatAmount(+amount) || ""}
423473
</Text>
424474
) : (
425-
<Skeleton className="w-16 text-3xl" />
475+
<Skeleton className="w-16 ios:text-3xl android:text-2xl" />
426476
)}
427477
<SwapIcon
428478
className="text-secondary-foreground"
@@ -502,7 +552,9 @@ export function DualCurrencyInput({
502552
<Text
503553
className={cn(
504554
"font-bold2",
505-
label === "000" ? "text-xl" : "text-3xl",
555+
label === "000"
556+
? "ios:text-xl android:text-xl"
557+
: "ios:text-3xl android:text-3xl",
506558
isDisabledKey && "text-muted-foreground",
507559
)}
508560
>

‎components/HelpModal.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { LikeIcon, XIcon } from "~/components/Icons";
1010
import { Button } from "~/components/ui/button";
1111
import { Text, TextClassContext } from "~/components/ui/text";
1212
import { useThemeColor } from "~/lib/useThemeColor";
13+
import { cn } from "~/lib/utils";
1314

1415
type HelpModalProps = {
1516
visible: boolean;
@@ -58,7 +59,15 @@ function HelpModal({ visible, onClose }: HelpModalProps) {
5859
>
5960
<XIcon className="text-muted-foreground" width={24} height={24} />
6061
</TouchableOpacity>
61-
<Text className="text-xl sm:text-2xl text-center font-bold2 text-secondary-foreground">
62+
<Text
63+
className={cn(
64+
Platform.select({
65+
ios: "ios:text-xl ios:sm:text-2xl",
66+
android: "android:text-xl",
67+
}),
68+
"text-center font-bold2 text-secondary-foreground",
69+
)}
70+
>
6271
How To Connect?
6372
</Text>
6473
</View>
@@ -84,7 +93,7 @@ function HelpModal({ visible, onClose }: HelpModalProps) {
8493
onPress={onClose}
8594
>
8695
<LikeIcon className="text-muted-foreground" />
87-
<Text className="text-lg">Okay</Text>
96+
<Text className="ios:text-lg android:text-base">Okay</Text>
8897
</Button>
8998
</View>
9099
</View>

0 commit comments

Comments
 (0)