fix themes modal, Add English to the trip information tab

components/map/Description.tsx

@@ -1,4 +1,6 @@
-import { Text, View } from "react-native";
+import { ThemedText } from "@/components/themed-text";
+import { useAppTheme } from "@/hooks/use-app-theme";
+import { View } from "react-native";
 
 interface DescriptionProps {
   title?: string;
@@ -8,10 +10,15 @@ export const Description = ({
   title = "",
   description = "",
 }: DescriptionProps) => {
+  const { colors } = useAppTheme();
   return (
     <View className="flex-row gap-2 ">
-      <Text className="opacity-50 text-lg">{title}:</Text>
-      <Text className="text-lg">{description}</Text>
+      <ThemedText
+        style={{ color: colors.textSecondary, fontSize: 16 }}
+      >
+        {title}:
+      </ThemedText>
+      <ThemedText style={{ fontSize: 16 }}>{description}</ThemedText>
     </View>
   );
 };

components/map/GPSInfoPanel.tsx

@@ -1,3 +1,4 @@
+import { useAppTheme } from "@/hooks/use-app-theme";
 import { useI18n } from "@/hooks/use-i18n";
 import { convertToDMS, kmhToKnot } from "@/utils/geom";
 import { MaterialIcons } from "@expo/vector-icons";
@@ -15,6 +16,8 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
   const translateY = useRef(new Animated.Value(0)).current;
   const blockBottom = useRef(new Animated.Value(0)).current;
   const { t } = useI18n();
+  const { colors, styles } = useAppTheme();
+
   useEffect(() => {
     Animated.timing(translateY, {
       toValue: isExpanded ? 0 : 200, // Dịch chuyển xuống 200px khi thu gọn
@@ -44,45 +47,35 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
           position: "absolute",
           bottom: blockBottom,
           left: 5,
-          // width: 48,
-          // height: 48,
-          // backgroundColor: "blue",
           borderRadius: 4,
           zIndex: 30,
         }}
       >
         <ButtonCreateNewHaulOrTrip gpsData={gpsData} />
-        {/* <TouchableOpacity
-          onPress={() => {
-            // showInfoToast("oad");
-            showWarningToast("This is a warning toast!");
-          }}
-          className="absolute top-2 right-2 z-10 bg-white rounded-full p-1"
-        >
-          <MaterialIcons
-            name={isExpanded ? "close" : "close"}
-            size={20}
-            color="#666"
-          />
-        </TouchableOpacity> */}
       </Animated.View>
 
       <Animated.View
-        style={{
-          transform: [{ translateY }],
-        }}
-        className="absolute bottom-0 gap-3 right-0 p-3 left-0 h-auto w-full rounded-t-xl bg-white shadow-md"
+        style={[
+          styles.card,
+          {
+            transform: [{ translateY }],
+            backgroundColor: colors.card,
+            borderRadius: 0,
+          },
+        ]}
+        className="absolute bottom-0 gap-5 right-0 px-4 pt-12 pb-2 left-0 h-auto w-full rounded-t-xl shadow-md"
         onLayout={(event) => setPanelHeight(event.nativeEvent.layout.height)}
       >
         {/* Nút toggle ở top-right */}
         <TouchableOpacity
           onPress={togglePanel}
-          className="absolute top-2 right-2 z-10 bg-white rounded-full p-1"
+          className="absolute top-2 right-2 z-10 rounded-full p-1"
+          style={{ backgroundColor: colors.card }}
         >
           <MaterialIcons
             name={isExpanded ? "close" : "close"}
             size={20}
-            color="#666"
+            color={colors.icon}
           />
         </TouchableOpacity>
 
@@ -120,9 +113,10 @@ const GPSInfoPanel = ({ gpsData }: GPSInfoPanelProps) => {
       {!isExpanded && (
         <TouchableOpacity
           onPress={togglePanel}
-          className="absolute bottom-5 right-2 z-20 bg-white rounded-full p-2 shadow-lg"
+          className="absolute bottom-5 right-2 z-20 rounded-full p-2 shadow-lg"
+          style={{ backgroundColor: colors.card }}
         >
-          <MaterialIcons name="info-outline" size={24} />
+          <MaterialIcons name="info-outline" size={24} color={colors.icon} />
         </TouchableOpacity>
       )}
     </>

components/map/SosButton.tsx

@@ -12,6 +12,7 @@ import { StyleSheet, Text, TextInput, View } from "react-native";
 import IconButton from "../IconButton";
 import Select from "../Select";
 import Modal from "../ui/modal";
+import { useThemeColor } from "@/hooks/use-theme-color";
 
 const SosButton = () => {
   const [sosData, setSosData] = useState<Model.SosResponse | null>();
@@ -22,6 +23,16 @@ const SosButton = () => {
   const [customMessage, setCustomMessage] = useState("");
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
   const { t } = useI18n();
+
+  // Theme colors
+  const textColor = useThemeColor({}, 'text');
+  const borderColor = useThemeColor({}, 'border');
+  const errorColor = useThemeColor({}, 'error');
+  const backgroundColor = useThemeColor({}, 'background');
+
+  // Dynamic styles
+  const styles = SosButtonStyles(textColor, borderColor, errorColor, backgroundColor);
+
   const sosOptions = [
     ...sosMessage.map((msg) => ({
       ma: msg.ma,
@@ -176,7 +187,7 @@ const SosButton = () => {
                 errors.customMessage ? styles.errorInput : {},
               ]}
               placeholder={t("home.sos.enterStatus")}
-              placeholderTextColor="#999"
+              placeholderTextColor={textColor + '99'} // Add transparency
               value={customMessage}
               onChangeText={(text) => {
                 setCustomMessage(text);
@@ -201,7 +212,7 @@ const SosButton = () => {
   );
 };
 
-const styles = StyleSheet.create({
+const SosButtonStyles = (textColor: string, borderColor: string, errorColor: string, backgroundColor: string) => StyleSheet.create({
   formGroup: {
     marginBottom: 16,
   },
@@ -209,26 +220,27 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 8,
-    color: "#333",
+    color: textColor,
   },
   errorBorder: {
-    borderColor: "#ff4444",
+    borderColor: errorColor,
   },
   input: {
     borderWidth: 1,
-    borderColor: "#ddd",
+    borderColor: borderColor,
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 12,
     fontSize: 14,
-    color: "#333",
+    color: textColor,
+    backgroundColor: backgroundColor,
     textAlignVertical: "top",
   },
   errorInput: {
-    borderColor: "#ff4444",
+    borderColor: errorColor,
   },
   errorText: {
-    color: "#ff4444",
+    color: errorColor,
     fontSize: 12,
     marginTop: 4,
   },