ICS React Native App
fix: small dark mode fixes
+28
-9
+8
-1
app/components/transaction/transaction-card.tsx
+8
-1
app/components/transaction/transaction-card.tsx
···
5
5
import { Transaction } from "@/generated";
6
6
import Ionicons from "@expo/vector-icons/Ionicons";
7
7
import { mapTransactionTypeToIcon } from "@/services/utils";
8
+
import { useRateColor } from "@/hooks/use-rate-color";
8
9
9
10
interface TransactionCardProps {
10
11
transaction: Transaction;
···
17
18
}: TransactionCardProps) => {
18
19
const { description, amount, date, type } = transaction;
19
20
21
+
const color = useRateColor(amount);
22
+
20
23
return (
21
24
<TouchableOpacity onPressOut={() => onPress?.(transaction)}>
22
25
<ThemedView style={styles.transactionContainer}>
23
26
<ThemedView style={[styles.transactionDetail]}>
24
-
<Ionicons size={20} name={mapTransactionTypeToIcon(type)} />
27
+
<Ionicons
28
+
size={20}
29
+
name={mapTransactionTypeToIcon(type)}
30
+
color={color}
31
+
/>
25
32
</ThemedView>
26
33
<ThemedView
27
34
style={[styles.transactionDetail, styles.descriptionDetail]}
+17
-6
app/components/transaction/transaction-filter.tsx
+17
-6
app/components/transaction/transaction-filter.tsx
···
41
41
<ThemedText>filter transactions for </ThemedText>
42
42
<ThemedText type="defaultSemiBold">{account?.name}</ThemedText>
43
43
</ThemedView>
44
-
<ThemedView>
44
+
<ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
45
45
<ThemedText type="subtitle">Search by description</ThemedText>
46
46
<ThemedTextInput
47
47
value={filter.search}
···
54
54
}
55
55
/>
56
56
</ThemedView>
57
-
<ThemedView>
57
+
<ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
58
58
<ThemedText type="subtitle">Filter by transaction type</ThemedText>
59
59
{transactionTypes?.map(({ name, count }) => (
60
60
<TouchableOpacity
···
70
70
}}
71
71
>
72
72
<ThemedView>
73
-
<Ionicons name={mapTransactionTypeToIcon(name)} />
73
+
<Ionicons name={mapTransactionTypeToIcon(name)} color={color} />
74
74
</ThemedView>
75
75
<ThemedView>
76
76
<ThemedText
···
83
83
</TouchableOpacity>
84
84
))}
85
85
</ThemedView>
86
-
<ThemedView>
86
+
<ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
87
87
<ThemedText type="subtitle">Sort by</ThemedText>
88
88
{["amount", "date"]?.map((sort) => (
89
89
<TouchableOpacity
···
100
100
</TouchableOpacity>
101
101
))}
102
102
</ThemedView>
103
-
<ThemedView>
103
+
<ThemedView style={[styles.fieldContainer, { borderColor: color }]}>
104
104
<ThemedText type="subtitle">Sort direction</ThemedText>
105
105
{sortDirections?.map((order) => (
106
106
<TouchableOpacity
···
118
118
))}
119
119
</ThemedView>
120
120
121
-
<ThemedView style={styles.buttonGroup}>
121
+
<ThemedView
122
+
style={[
123
+
styles.buttonGroup,
124
+
styles.fieldContainer,
125
+
{ borderColor: color },
126
+
]}
127
+
>
122
128
<ThemedButton onPress={() => onSubmit?.(filter)}>filter</ThemedButton>
123
129
<ThemedButton onPress={() => onSubmit?.({})}>clear</ThemedButton>
124
130
<ThemedButton onPress={() => onCancel?.()}>cancel</ThemedButton>
···
137
143
borderRadius: 8,
138
144
borderWidth: 1,
139
145
padding: 8,
146
+
},
147
+
fieldContainer: {
148
+
borderTopWidth: 1,
149
+
marginTop: 4,
150
+
paddingVertical: 8,
140
151
},
141
152
});