fix themes modal, Add English to the trip information tab

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,
   },