fix: balance screen improvements (#58)

* fix: horizontally center balance on homescreen * fix: update settings icon color * fix: use narrow symbols for displaying fiat currencies * fix: font weight
getAlby · Aug 30, 2024 · 650377f · 650377f
1 parent 88b5d13
commit 650377f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/hooks/useGetFiatAmount.ts b/hooks/useGetFiatAmount.ts
@@ -38,22 +38,24 @@ export function useGetFiatAmount() {
           return `${new Intl.NumberFormat(undefined, {
             style: "currency",
             currency: fiatCurrency,
+            currencyDisplay: "narrowSymbol",
           }).format(rate * amount)}`;
         }
+
         const amountWithCurrencyCode = new Intl.NumberFormat("en-US", {
           style: "currency",
           currency: fiatCurrency,
           currencyDisplay: "code",
         }).format(rate * amount);
 
         return amountWithCurrencyCode.substring(
-          amountWithCurrencyCode.search(/\s/) + 1
+          amountWithCurrencyCode.search(/\s/) + 1,
         );
       }
       return undefined;
     },
 
-    [rate, fiatCurrency]
+    [rate, fiatCurrency],
   );
 
   return rate ? getFiatAmount : undefined;
@@ -65,7 +67,7 @@ export function useGetSatsAmount() {
 
   const getSatsAmount = React.useCallback(
     (fiatAmount: number) => (rate ? Math.round(fiatAmount / rate) : undefined),
-    [rate, fiatCurrency]
+    [rate, fiatCurrency],
   );
 
   return rate ? getSatsAmount : undefined;

diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -106,7 +106,7 @@ export function Home() {
                       getFiatAmount(Math.floor(balance.balance / 1000))}
                     {balanceState == BalanceState.HIDDEN && "****"}
                   </Text>
-                  <Text className="text-muted-foreground text-3xl font-bold2">
+                  <Text className="text-muted-foreground text-3xl font-semibold2">
                     {balanceState == BalanceState.SATS && "sats"}
                   </Text>
                 </>
@@ -131,10 +131,10 @@ export function Home() {
             </View>
           </Pressable>
         </View>
-        <View className="flex items-center justify-center my-5">
+        <View className="flex items-center justify-center">
           <Link href="/transactions" asChild>
             <Button variant="ghost" className="p-10 rounded-full aspect-square">
-              <ChevronUp className="text-foreground" size={32} />
+              <ChevronUp className="text-muted-foreground" size={32} />
             </Button>
           </Link>
         </View>

diff --git a/pages/send/Send.tsx b/pages/send/Send.tsx
@@ -166,7 +166,7 @@ export function Send() {
                     LNURL.
                   </Text>
                   <Input
-                    className="w-full text-center mt-6 border-transparent !text-4xl font-bold text-muted-foreground"
+                    className="w-full text-center mt-6 border-transparent !text-4xl font-semibold2 text-muted-foreground"
                     placeholder="[email protected]"
                     value={keyboardText}
                     onChangeText={setKeyboardText}