fix: minor ui fixes (#73)

* fix: cleanup & input fixes * fix: icon color * fix: add padding to confirm payment screen
getAlby · Sep 2, 2024 · 398dc02 · 398dc02
1 parent e700ca8
commit 398dc02
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 18 deletions.
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -21,6 +21,7 @@ import { toastConfig } from "~/components/ToastConfig";
 import * as Font from "expo-font";
 import { useInfo } from "~/hooks/useInfo";
 import { secureStorage } from "~/lib/secureStorage";
+import { hasOnboardedKey } from "~/lib/state/appStore";
 
 const LIGHT_THEME: Theme = {
   dark: false,
@@ -46,15 +47,14 @@ SplashScreen.preventAutoHideAsync();
 export default function RootLayout() {
   const { isDarkColorScheme } = useColorScheme();
   const [fontsLoaded, setFontsLoaded] = React.useState(false);
-  const [showOnboarding, setShowOnboarding] = React.useState(false);
   useConnectionChecker();
 
   const rootNavigationState = useRootNavigationState();
   const hasNavigationState = !!rootNavigationState?.key;
 
   React.useEffect(() => {
     const checkOnboardingStatus = async () => {
-      const hasOnboarded = await secureStorage.getItem("hasOnboarded");
+      const hasOnboarded = await secureStorage.getItem(hasOnboardedKey);
       if (!hasOnboarded && hasNavigationState) {
         router.replace("/onboarding");
       }

diff --git a/components/DualCurrencyInput.tsx b/components/DualCurrencyInput.tsx
@@ -1,11 +1,10 @@
 import { Pressable, StyleSheet, View } from "react-native";
 import { useGetFiatAmount, useGetSatsAmount } from "~/hooks/useGetFiatAmount";
 import { Input } from "./ui/input";
-import { Label } from "./ui/label";
 import { Text } from "./ui/text";
 import React from "react";
 import { useAppStore } from "~/lib/state/appStore";
-import { ArrowLeftRight, RefreshCw } from "./Icons";
+import { RefreshCw } from "./Icons";
 import { CURSOR_COLOR, DEFAULT_CURRENCY } from "~/lib/constants";
 
 type DualCurrencyInputProps = {
@@ -49,7 +48,7 @@ export function DualCurrencyInput({
   return (
     <View className="w-full flex flex-col items-center justify-center gap-5">
       <Input
-        className="w-full border-transparent text-center mt-3"
+        className="w-full border-transparent bg-transparent text-center mt-3"
         placeholder="0"
         keyboardType="number-pad"
         value={inputMode === "sats" ? amount : fiatAmount}

diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
@@ -26,7 +26,7 @@ const walletKeyPrefix = "wallet";
 const addressBookEntryKeyPrefix = "addressBookEntry";
 const selectedWalletIdKey = "selectedWalletId";
 const fiatCurrencyKey = "fiatCurrency";
-const hasOnboardedKey = "hasOnboarded";
+export const hasOnboardedKey = "hasOnboarded";
 
 type Wallet = {
   name?: string;

diff --git a/pages/Onboarding.tsx b/pages/Onboarding.tsx
@@ -5,10 +5,11 @@ import { View } from "react-native";
 import { Button } from "~/components/ui/button";
 import { Text } from "~/components/ui/text";
 import { secureStorage } from "~/lib/secureStorage";
+import { hasOnboardedKey } from "~/lib/state/appStore";
 
 export function Onboarding() {
   async function finish() {
-    secureStorage.setItem("hasOnboarded", "true");
+    secureStorage.setItem(hasOnboardedKey, "true");
     router.replace("/");
   }
 
@@ -22,8 +23,8 @@ export function Onboarding() {
       />
       <View className="flex-1 flex items-center justify-center gap-4">
         <Text className="font-semibold2 text-4xl text-center text-foreground">Hello there 👋</Text>
-        <Text className="font-medium2 text-xl text-primary-foreground text-center">
-          <Text className="font-semibold2 text-xl text-primary-foreground">Alby Go</Text> is a simple mobile wallet interface for your Alby Hub or other lightning nodes and wallets.
+        <Text className="font-medium2 text-xl text-muted-foreground text-center">
+          <Text className="font-semibold2 text-xl text-muted-foreground">Alby Go</Text> is a simple mobile wallet interface for your Alby Hub or other lightning nodes and wallets.
         </Text>
       </View>
       <Link href="/" asChild>

diff --git a/pages/receive/Receive.tsx b/pages/receive/Receive.tsx
@@ -286,7 +286,7 @@ export function Receive() {
                   Description (optional)
                 </Text>
                 <Input
-                  className="w-full text-center border-transparent native:text-2xl font-semibold2"
+                  className="w-full text-center border-transparent bg-transparent native:text-2xl font-semibold2"
                   placeholder="No description"
                   value={comment}
                   onChangeText={setComment}

diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx
@@ -59,8 +59,7 @@ export function ConfirmPayment() {
       <Screen
         title="Confirm Payment"
       />
-
-      <View className="flex-1 justify-center items-center gap-8">
+      <View className="flex-1 justify-center items-center gap-8 p-6">
         <View className="flex flex-col gap-2">
           <View className="flex flex-row items-center justify-center gap-2">
             <Text className="text-5xl font-bold2 text-foreground">

diff --git a/pages/send/LNURLPay.tsx b/pages/send/LNURLPay.tsx
@@ -62,7 +62,7 @@ export function LNURLPay() {
                 Comment
               </Text>
               <Input
-                className="w-full border-transparent text-center native:text-2xl font-semibold2 text-foreground"
+                className="w-full border-transparent bg-transparent text-center native:text-2xl font-semibold2"
                 placeholder="Enter an optional comment"
                 value={comment}
                 onChangeText={setComment}

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-semibold2 text-muted-foreground"
+                    className="w-full text-center mt-6 border-transparent bg-transparent !text-4xl font-semibold2 "
                     placeholder="[email protected]"
                     value={keyboardText}
                     onChangeText={setKeyboardText}

diff --git a/pages/settings/Settings.tsx b/pages/settings/Settings.tsx
@@ -66,7 +66,7 @@ export function Settings() {
                 router.replace("/onboarding");
               }}
             >
-              <Egg className="text-primary-foreground" />
+              <Egg className="text-foreground" />
               <Text className="font-medium2 text-xl">Open Onboarding</Text>
             </Pressable>
             <Pressable

diff --git a/pages/settings/wallets/LightningAddress.tsx b/pages/settings/wallets/LightningAddress.tsx
@@ -32,7 +32,7 @@ export function LightningAddress() {
               autoComplete="email"
               inputMode="email"
               autoFocus
-              className="w-full text-center border-transparent native:text-2xl"
+              className="w-full text-center border-transparent bg-transparent native:text-2xl font-semibold2"
               placeholder="[email protected]"
               value={lightningAddress}
               onChangeText={setLightningAddress}

diff --git a/pages/settings/wallets/NewWallet.tsx b/pages/settings/wallets/NewWallet.tsx
@@ -27,7 +27,7 @@ export function NewWallet() {
           </Label>
           <Input
             autoFocus
-            className="w-full border-transparent native:text-2xl text-center"
+            className="w-full border-transparent bg-transparent native:text-2xl text-center"
             value={name}
             onChangeText={setName}
             aria-labelledbyledBy="name"

diff --git a/pages/settings/wallets/RenameWallet.tsx b/pages/settings/wallets/RenameWallet.tsx
@@ -29,7 +29,7 @@ export function RenameWallet() {
           <Text className="text-muted-foreground text-center">Wallet Name</Text>
           <Input
             autoFocus
-            className="w-full text-center border-transparent native:text-2xl"
+            className="w-full text-center border-transparent bg-transparent native:text-2xl"
             placeholder={DEFAULT_WALLET_NAME}
             value={walletName}
             onChangeText={setWalletName}