fix themes modal, Add English to the trip information tab

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>
       )}
     </>