cập nhật themes cho tab

components/diary/StatusDropdown.tsx

@@ -11,6 +11,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import { TripStatus } from "./types";
 import { useI18n } from "@/hooks/use-i18n";
+import { useThemeContext } from "@/hooks/use-theme-context";
 
 interface StatusDropdownProps {
   value: TripStatus | null;
@@ -22,6 +23,7 @@ export default function StatusDropdown({
   onChange,
 }: StatusDropdownProps) {
   const { t } = useI18n();
+  const { colors } = useThemeContext();
   const [isOpen, setIsOpen] = useState(false);
 
   const STATUS_OPTIONS: Array<{ value: TripStatus | null; label: string }> = [
@@ -42,18 +44,29 @@ export default function StatusDropdown({
     setIsOpen(false);
   };
 
+  const themedStyles = {
+    label: { color: colors.text },
+    selector: { backgroundColor: colors.card, borderColor: colors.border },
+    selectorText: { color: colors.text },
+    placeholder: { color: colors.textSecondary },
+    modalContent: { backgroundColor: colors.card },
+    option: { borderBottomColor: colors.separator },
+    selectedOption: { backgroundColor: colors.backgroundSecondary },
+    optionText: { color: colors.text },
+  };
+
   return (
     <View style={styles.container}>
-      <Text style={styles.label}>{t("diary.statusDropdown.label")}</Text>
+      <Text style={[styles.label, themedStyles.label]}>{t("diary.statusDropdown.label")}</Text>
       <TouchableOpacity
-        style={styles.selector}
+        style={[styles.selector, themedStyles.selector]}
         onPress={() => setIsOpen(true)}
         activeOpacity={0.7}
       >
-        <Text style={[styles.selectorText, !value && styles.placeholder]}>
+        <Text style={[styles.selectorText, themedStyles.selectorText, !value && themedStyles.placeholder]}>
           {selectedLabel}
         </Text>
-        <Ionicons name="ellipsis-horizontal" size={20} color="#6B7280" />
+        <Ionicons name="ellipsis-horizontal" size={20} color={colors.textSecondary} />
       </TouchableOpacity>
 
       <Modal
@@ -67,27 +80,28 @@ export default function StatusDropdown({
           activeOpacity={1}
           onPress={() => setIsOpen(false)}
         >
-          <View style={styles.modalContent}>
+          <View style={[styles.modalContent, themedStyles.modalContent]}>
             <ScrollView>
               {STATUS_OPTIONS.map((option, index) => (
                 <TouchableOpacity
                   key={index}
                   style={[
                     styles.option,
-                    value === option.value && styles.selectedOption,
+                    themedStyles.option,
+                    value === option.value && themedStyles.selectedOption,
                   ]}
                   onPress={() => handleSelect(option.value)}
                 >
                   <Text
                     style={[
                       styles.optionText,
-                      value === option.value && styles.selectedOptionText,
+                      themedStyles.optionText,
                     ]}
                   >
                     {option.label}
                   </Text>
                   {value === option.value && (
-                    <Ionicons name="checkmark" size={20} color="#3B82F6" />
+                    <Ionicons name="checkmark" size={20} color={colors.primary} />
                   )}
                 </TouchableOpacity>
               ))}
@@ -106,7 +120,6 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 16,
     fontWeight: "600",
-    color: "#111827",
     marginBottom: 8,
     fontFamily: Platform.select({
       ios: "System",
@@ -118,25 +131,19 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    backgroundColor: "#FFFFFF",
     borderWidth: 1,
-    borderColor: "#D1D5DB",
     borderRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
   },
   selectorText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  placeholder: {
-    color: "#9CA3AF",
-  },
   modalOverlay: {
     flex: 1,
     backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -144,7 +151,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   modalContent: {
-    backgroundColor: "#FFFFFF",
     borderRadius: 12,
     width: "80%",
     maxHeight: "60%",
@@ -165,22 +171,13 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingVertical: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "#F3F4F6",
-  },
-  selectedOption: {
-    backgroundColor: "#EFF6FF",
   },
   optionText: {
     fontSize: 16,
-    color: "#111827",
     fontFamily: Platform.select({
       ios: "System",
       android: "Roboto",
       default: "System",
     }),
   },
-  selectedOptionText: {
-    color: "#3B82F6",
-    fontWeight: "600",
-  },
 });