fix: minor ui fixes (#73)

* fix: cleanup & input fixes

* fix: icon color

* fix: add padding to confirm payment screen

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");
       }

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}

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;

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>

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}

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">

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}

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}

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

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}

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"

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}