From 83957d67cb53d8ec3dac215607ceb82401c48110 Mon Sep 17 00:00:00 2001
From: Niels Mokkenstorm <niels@mokkenstorm.dev>
Date: Fri, 3 Oct 2025 13:30:42 +0200
Subject: [PATCH] fix: small dark mode fixes

---
 app/components/theme/themed-button.tsx        |  3 ++-
 .../transaction/transaction-card.tsx          |  9 +++++++-
 .../transaction/transaction-filter.tsx        | 23 ++++++++++++++-----
 app/hooks/use-login.ts                        |  2 +-
 4 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/app/components/theme/themed-button.tsx b/app/components/theme/themed-button.tsx
index 6f806cb..97d2cc6 100644
--- a/app/components/theme/themed-button.tsx
+++ b/app/components/theme/themed-button.tsx
@@ -1,5 +1,6 @@
 import { StyleSheet, TouchableOpacity } from "react-native";
-import { ThemedText, ThemedView  } from "@/components/theme";
+import { ThemedText } from "./themed-text";
+import { ThemedView  } from "./themed-view";
 import { useThemeColor } from "@/hooks/use-theme-color";
 
 interface ThemedButtonProps {
diff --git a/app/components/transaction/transaction-card.tsx b/app/components/transaction/transaction-card.tsx
index e371806..f2e08c3 100644
--- a/app/components/transaction/transaction-card.tsx
+++ b/app/components/transaction/transaction-card.tsx
@@ -5,6 +5,7 @@ import { Price } from "@/components/ui/price";
 import { Transaction } from "@/generated";
 import Ionicons from "@expo/vector-icons/Ionicons";
 import { mapTransactionTypeToIcon } from "@/services/utils";
+import { useRateColor } from "@/hooks/use-rate-color";
 
 interface TransactionCardProps {
   transaction: Transaction;
@@ -17,11 +18,17 @@ export const TransactionCard = ({
 }: TransactionCardProps) => {
   const { description, amount, date, type } = transaction;
 
+  const color = useRateColor(amount);
+
   return (
     <TouchableOpacity onPressOut={() => onPress?.(transaction)}>
       <ThemedView style={styles.transactionContainer}>
         <ThemedView style={[styles.transactionDetail]}>
-          <Ionicons size={20} name={mapTransactionTypeToIcon(type)} />
+          <Ionicons
+            size={20}
+            name={mapTransactionTypeToIcon(type)}
+            color={color}
+          />
         </ThemedView>
         <ThemedView
           style={[styles.transactionDetail, styles.descriptionDetail]}
diff --git a/app/components/transaction/transaction-filter.tsx b/app/components/transaction/transaction-filter.tsx
index 1c3a0ba..330e8d2 100644
--- a/app/components/transaction/transaction-filter.tsx
+++ b/app/components/transaction/transaction-filter.tsx
@@ -41,7 +41,7 @@ export const TransactionFilter = ({
         <ThemedText>filter transactions for </ThemedText>
         <ThemedText type="defaultSemiBold">{account?.name}</ThemedText>
       </ThemedView>
-      <ThemedView>
+      <ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
         <ThemedText type="subtitle">Search by description</ThemedText>
         <ThemedTextInput
           value={filter.search}
@@ -54,7 +54,7 @@ export const TransactionFilter = ({
           }
         />
       </ThemedView>
-      <ThemedView>
+      <ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
         <ThemedText type="subtitle">Filter by transaction type</ThemedText>
         {transactionTypes?.map(({ name, count }) => (
           <TouchableOpacity
@@ -70,7 +70,7 @@ export const TransactionFilter = ({
               }}
             >
               <ThemedView>
-                <Ionicons name={mapTransactionTypeToIcon(name)} />
+                <Ionicons name={mapTransactionTypeToIcon(name)} color={color} />
               </ThemedView>
               <ThemedView>
                 <ThemedText
@@ -83,7 +83,7 @@ export const TransactionFilter = ({
           </TouchableOpacity>
         ))}
       </ThemedView>
-      <ThemedView>
+      <ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
         <ThemedText type="subtitle">Sort by</ThemedText>
         {["amount", "date"]?.map((sort) => (
           <TouchableOpacity
@@ -100,7 +100,7 @@ export const TransactionFilter = ({
           </TouchableOpacity>
         ))}
       </ThemedView>
-      <ThemedView>
+      <ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
         <ThemedText type="subtitle">Sort direction</ThemedText>
         {sortDirections?.map((order) => (
           <TouchableOpacity
@@ -118,7 +118,13 @@ export const TransactionFilter = ({
         ))}
       </ThemedView>
 
-      <ThemedView style={styles.buttonGroup}>
+      <ThemedView
+        style={[
+          styles.buttonGroup,
+          styles.fieldContainer,
+          { borderColor: color },
+        ]}
+      >
         <ThemedButton onPress={() => onSubmit?.(filter)}>filter</ThemedButton>
         <ThemedButton onPress={() => onSubmit?.({})}>clear</ThemedButton>
         <ThemedButton onPress={() => onCancel?.()}>cancel</ThemedButton>
@@ -138,4 +144,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 8,
   },
+  fieldContainer: {
+    borderTopWidth: 1,
+    marginTop: 4,
+    paddingVertical: 8,
+  },
 });
diff --git a/app/hooks/use-login.ts b/app/hooks/use-login.ts
index 73c2b06..f39321c 100644
--- a/app/hooks/use-login.ts
+++ b/app/hooks/use-login.ts
@@ -71,7 +71,7 @@ export const useLogin = () => {
         }
 
         setToken(data);
-        router.replace("/(tabs)");
+        router.push("/(tabs)");
       } catch (e) {
         setError(isLoginError(e) ? e : fromError(e));
       }
-- 
2.51.2