fix themes modal, Add English to the trip information tab

components/Select.tsx

@@ -1,3 +1,4 @@
+import { useThemeContext } from "@/hooks/use-theme-context";
 import { AntDesign } from "@expo/vector-icons";
 import React, { useEffect, useState } from "react";
 import {
@@ -93,6 +94,12 @@ const Select: React.FC<SelectProps> = ({
 
   const sz = sizeMap[size];
 
+  // Theme colors from context (consistent with other components)
+  const { colors } = useThemeContext();
+  const selectBackgroundColor = disabled
+    ? colors.backgroundSecondary
+    : colors.surface;
+
   return (
     <View style={styles.wrapper}>
       <TouchableOpacity
@@ -101,7 +108,8 @@ const Select: React.FC<SelectProps> = ({
           {
             height: sz.height,
             paddingHorizontal: sz.paddingHorizontal,
-            opacity: disabled ? 0.6 : 1,
+            backgroundColor: selectBackgroundColor,
+            borderColor: disabled ? colors.border : colors.primary,
           },
           style,
         ]}
@@ -112,14 +120,18 @@ const Select: React.FC<SelectProps> = ({
       >
         <View style={styles.content}>
           {loading ? (
-            <ActivityIndicator size="small" color="#4ecdc4" />
+            <ActivityIndicator size="small" color={colors.primary} />
           ) : (
             <Text
               style={[
                 styles.text,
                 {
                   fontSize: sz.fontSize,
-                  color: selectedValue ? "#111" : "#999",
+                  color: disabled
+                    ? colors.textSecondary
+                    : selectedValue
+                    ? colors.text
+                    : colors.textSecondary,
                 },
               ]}
               numberOfLines={1}
@@ -131,24 +143,41 @@ const Select: React.FC<SelectProps> = ({
         <View style={styles.suffix}>
           {allowClear && selectedValue && !loading ? (
             <TouchableOpacity onPress={handleClear} style={styles.icon}>
-              <AntDesign name="close" size={16} color="#999" />
+              <AntDesign name="close" size={16} color={colors.textSecondary} />
             </TouchableOpacity>
           ) : null}
           <AntDesign
             name={isOpen ? "up" : "down"}
             size={14}
-            color="#999"
+            color={colors.textSecondary}
             style={styles.arrow}
           />
         </View>
       </TouchableOpacity>
 
       {isOpen && (
-        <View style={[styles.dropdown, { top: containerHeight }]}>
+        <View
+          style={[
+            styles.dropdown,
+            {
+              top: containerHeight,
+              backgroundColor: colors.background,
+              borderColor: colors.border,
+            },
+          ]}
+        >
           {showSearch && (
             <TextInput
-              style={styles.searchInput}
+              style={[
+                styles.searchInput,
+                {
+                  backgroundColor: colors.background,
+                  borderColor: colors.border,
+                  color: colors.text,
+                },
+              ]}
               placeholder="Search..."
+              placeholderTextColor={colors.textSecondary}
               value={searchText}
               onChangeText={setSearchText}
               autoFocus
@@ -160,8 +189,13 @@ const Select: React.FC<SelectProps> = ({
                 key={item.value}
                 style={[
                   styles.option,
+                  {
+                    borderBottomColor: colors.separator,
+                  },
                   item.disabled && styles.optionDisabled,
-                  selectedValue === item.value && styles.optionSelected,
+                  selectedValue === item.value && {
+                    backgroundColor: colors.primary + "20", // Add transparency to primary color
+                  },
                 ]}
                 onPress={() => !item.disabled && handleSelect(item.value)}
                 disabled={item.disabled}
@@ -169,14 +203,22 @@ const Select: React.FC<SelectProps> = ({
                 <Text
                   style={[
                     styles.optionText,
-                    item.disabled && styles.optionTextDisabled,
-                    selectedValue === item.value && styles.optionTextSelected,
+                    {
+                      color: colors.text,
+                    },
+                    item.disabled && {
+                      color: colors.textSecondary,
+                    },
+                    selectedValue === item.value && {
+                      color: colors.primary,
+                      fontWeight: "600",
+                    },
                   ]}
                 >
                   {item.label}
                 </Text>
                 {selectedValue === item.value && (
-                  <AntDesign name="check" size={16} color="#4ecdc4" />
+                  <AntDesign name="check" size={16} color={colors.primary} />
                 )}
               </TouchableOpacity>
             ))}
@@ -193,9 +235,7 @@ const styles = StyleSheet.create({
   },
   container: {
     borderWidth: 1,
-    borderColor: "#e6e6e6",
     borderRadius: 8,
-    backgroundColor: "#fff",
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -204,7 +244,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   text: {
-    color: "#111",
+    // Color is set dynamically via theme
   },
   suffix: {
     flexDirection: "row",
@@ -220,9 +260,7 @@ const styles = StyleSheet.create({
     position: "absolute",
     left: 0,
     right: 0,
-    backgroundColor: "#fff",
     borderWidth: 1,
-    borderColor: "#e6e6e6",
     borderTopWidth: 0,
     borderRadius: 10,
     borderBottomLeftRadius: 8,
@@ -236,7 +274,6 @@ const styles = StyleSheet.create({
   },
   searchInput: {
     borderWidth: 1,
-    borderColor: "#e6e6e6",
     borderRadius: 4,
     padding: 8,
     margin: 8,
@@ -247,7 +284,6 @@ const styles = StyleSheet.create({
   option: {
     padding: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "#f0f0f0",
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
@@ -255,20 +291,11 @@ const styles = StyleSheet.create({
   optionDisabled: {
     opacity: 0.5,
   },
-  optionSelected: {
-    backgroundColor: "#f6ffed",
-  },
+  // optionSelected is handled dynamically via inline styles
   optionText: {
     fontSize: 16,
-    color: "#111",
-  },
-  optionTextDisabled: {
-    color: "#999",
-  },
-  optionTextSelected: {
-    color: "#4ecdc4",
-    fontWeight: "600",
   },
+  // optionTextDisabled and optionTextSelected are handled dynamically via inline styles
 });
 
 export default Select;