Cập nhật theme cho cảnh báo, giám sát

components/map/ShipInfo.tsx

@@ -13,28 +13,31 @@ interface ShipInfoProps {
 
 const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
   const { t } = useI18n();
-  const { colors } = useAppTheme();
-  // Định nghĩa màu sắc theo trạng thái
+  const { colors, utils } = useAppTheme();
+  const isDark = utils.isDark;
+
+  // Định nghĩa màu sắc theo trạng thái - hỗ trợ cả light và dark theme
   const statusConfig = {
     normal: {
-      dotColor: "bg-green-500",
-      badgeColor: "bg-green-100",
-      badgeTextColor: "text-green-700",
+      dotColor: colors.success,
+      badgeColor: isDark ? "rgba(52, 199, 89, 0.2)" : "#dcfce7",
+      badgeTextColor: isDark ? "#30D158" : "#15803d",
       badgeText: "Bình thường",
     },
     warning: {
-      dotColor: "bg-yellow-500",
-      badgeColor: "bg-yellow-100",
-      badgeTextColor: "text-yellow-700",
+      dotColor: colors.warning,
+      badgeColor: isDark ? "rgba(255, 102, 0, 0.2)" : "#fef3c7",
+      badgeTextColor: isDark ? "#ff9500" : "#b45309",
       badgeText: "Cảnh báo",
     },
     danger: {
-      dotColor: "bg-red-500",
-      badgeColor: "bg-red-100",
-      badgeTextColor: "text-red-700",
+      dotColor: colors.error,
+      badgeColor: isDark ? "rgba(255, 69, 58, 0.2)" : "#fee2e2",
+      badgeTextColor: isDark ? "#FF453A" : "#b91c1c",
       badgeText: "Nguy hiểm",
     },
   };
+
   const getThingStatus = () => {
     switch (thingMetadata?.state_level) {
       case STATUS_NORMAL:
@@ -67,57 +70,82 @@ const ShipInfo = ({ thingMetadata }: ShipInfoProps) => {
       <View className="flex-row items-center justify-between mb-3">
         <View className="flex-row items-center gap-2">
           {/* Status dot */}
-          <View className={`h-3 w-3 rounded-full ${currentStatus.dotColor}`} />
+          <View
+            style={{
+              height: 12,
+              width: 12,
+              borderRadius: 6,
+              backgroundColor: currentStatus.dotColor,
+            }}
+          />
 
           {/* Tên tàu */}
-          <Text className="text-lg font-semibold text-gray-900">
+          <Text
+            style={{
+              fontSize: 18,
+              fontWeight: "600",
+              color: colors.text,
+            }}
+          >
             {thingMetadata?.ship_name}
           </Text>
         </View>
 
         {/* Badge trạng thái */}
-        <View className={`px-3 py-1 rounded-full ${currentStatus.badgeColor}`}>
+        <View
+          style={{
+            paddingHorizontal: 12,
+            paddingVertical: 4,
+            borderRadius: 9999,
+            backgroundColor: currentStatus.badgeColor,
+          }}
+        >
           <Text
-            className={`text-md font-medium ${currentStatus.badgeTextColor}`}
+            style={{
+              fontSize: 14,
+              fontWeight: "500",
+              color: currentStatus.badgeTextColor,
+            }}
           >
             {currentStatus.badgeText}
           </Text>
         </View>
       </View>
 
-      {/* Mã tàu */}
-      {/* <Text className="text-base text-gray-600 mb-2">{shipCode}</Text> */}
+      {/* Tốc độ và hướng */}
       <View className="flex-row items-center justify-between gap-2 mb-3">
         <View className="flex-row items-center gap-2 w-2/3">
-          <Ionicons name="speedometer-outline" size={16} color="#6B7280" />
-          <Text className="text-md text-gray-600">
+          <Ionicons name="speedometer-outline" size={16} color={colors.icon} />
+          <Text style={{ fontSize: 14, color: colors.textSecondary }}>
             {kmhToKnot(gpsData.s || 0)} {t("home.speed_units")}
           </Text>
         </View>
         <View className="flex-row items-start gap-2 w-1/3 ">
-          <Ionicons name="compass-outline" size={16} color="#6B7280" />
-          <Text className="text-md text-gray-600">{gpsData.h}°</Text>
+          <Ionicons name="compass-outline" size={16} color={colors.icon} />
+          <Text style={{ fontSize: 14, color: colors.textSecondary }}>
+            {gpsData.h}°
+          </Text>
         </View>
       </View>
+
       {/* Tọa độ */}
       <View className="flex-row items-center justify-between gap-2 mb-2">
         <View className="flex-row items-center gap-2 w-2/3">
-          <Ionicons name="location-outline" size={16} color="#6B7280" />
-          <Text className="text-md text-gray-600">
+          <Ionicons name="location-outline" size={16} color={colors.icon} />
+          <Text style={{ fontSize: 14, color: colors.textSecondary }}>
             {convertToDMS(gpsData.lat || 0, true)},
             {convertToDMS(gpsData.lon || 0, false)}
           </Text>
         </View>
         <View className=" flex-row items-start gap-2 w-1/3 ">
-          <Ionicons name="time-outline" size={16} color="#6B7280" />
-          <Text className="text-md text-gray-600">
+          <Ionicons name="time-outline" size={16} color={colors.icon} />
+          <Text style={{ fontSize: 14, color: colors.textSecondary }}>
             {formatRelativeTime(gpsData.t)}
           </Text>
         </View>
       </View>
-      {/* <View className="flex">
-        <Description title="Trạng thái" description={thingMetadata?.state} />
-      </View> */}
+
+      {/* Trạng thái */}
       {thingMetadata?.state !== "" && (
         <View className="flex-row items-center gap-2">
           <ThemedText style={{ color: colors.textSecondary, fontSize: 15 }}>