v0.1.2: theme Favorites screen (dark mode); versionCode 2

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/app.json

@@ -3,13 +3,14 @@
     "name": "BigBrainParking",
     "slug": "bigbrainparking",
     "scheme": "bigbrainparking",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "icon": "./assets/icon.png",
     "android": {
       "package": "top.mowden.bigbrainparking",
+      "versionCode": 2,
       "edgeToEdgeEnabled": true,
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",

app/src/screens/FavoritesScreen.tsx

@@ -3,6 +3,7 @@ import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ps } from '@/api/client';
+import { useTheme } from '@/theme/ThemeContext';
 import {
   listKiosks,
   removeKiosk,
@@ -15,6 +16,7 @@ type Nav = NativeStackNavigationProp<RootStackParamList>;
 
 export function FavoritesScreen() {
   const navigation = useNavigation<Nav>();
+  const { colors } = useTheme();
   const [items, setItems] = useState<SavedKiosk[]>([]);
 
   useFocusEffect(
@@ -38,27 +40,28 @@ export function FavoritesScreen() {
 
   return (
     <FlatList
+      style={{ backgroundColor: colors.bg }}
       contentContainerStyle={{ padding: 16 }}
       data={items}
       keyExtractor={(k) => k.key}
       ListEmptyComponent={
-        <Text style={styles.empty}>
+        <Text style={[styles.empty, { color: colors.subtext }]}>
           No saved kiosks yet. Scan a kiosk QR and tap “Save kiosk”.
         </Text>
       }
       renderItem={({ item }) => (
-        <View style={styles.card}>
+        <View style={[styles.card, { backgroundColor: colors.card }]}>
           <TouchableOpacity style={{ flex: 1 }} onPress={() => open(item)}>
-            <Text style={styles.name}>{item.zoneName ?? item.key}</Text>
+            <Text style={[styles.name, { color: colors.text }]}>{item.zoneName ?? item.key}</Text>
-            <Text style={styles.meta}>
+            <Text style={[styles.meta, { color: colors.subtext }]}>
               {item.scannerCode ? `Code ${item.scannerCode}` : `Serial ${item.terminalSerNo}`}
             </Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.action} onPress={() => shareKiosk(item)}>
-            <Text style={styles.actionText}>Share</Text>
+            <Text style={[styles.actionText, { color: colors.primary }]}>Share</Text>
           </TouchableOpacity>
           <TouchableOpacity style={styles.action} onPress={() => remove(item)}>
-            <Text style={[styles.actionText, { color: '#c0392b' }]}>Remove</Text>
+            <Text style={[styles.actionText, { color: colors.danger }]}>Remove</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -67,18 +70,17 @@ export function FavoritesScreen() {
 }
 
 const styles = StyleSheet.create({
-  empty: { color: '#888', textAlign: 'center', marginTop: 48 },
+  empty: { textAlign: 'center', marginTop: 48 },
   card: {
     flexDirection: 'row',
     alignItems: 'center',
-    backgroundColor: '#f4f4f4',
     borderRadius: 10,
     padding: 14,
     marginBottom: 10,
     gap: 10,
   },
   name: { fontSize: 16, fontWeight: '600' },
-  meta: { color: '#777', fontSize: 12, marginTop: 2 },
+  meta: { fontSize: 12, marginTop: 2 },
   action: { paddingHorizontal: 6, paddingVertical: 4 },
-  actionText: { color: '#1e6f5c', fontWeight: '600' },
+  actionText: { fontWeight: '600' },
 });