update darkMode for modal

2025-11-21 08:50:07 +07:00
parent 51327c7d01
commit 6975358a7f
8 changed files with 750 additions and 766 deletions
--- a/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
+++ b/components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
@@ -1,179 +1,179 @@
+import { Colors } from "@/constants/theme";
 import { StyleSheet } from "react-native";

-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#f5f5f5",
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 30,
-    paddingBottom: 16,
-    backgroundColor: "#fff",
-    borderBottomWidth: 1,
-    borderBottomColor: "#eee",
-  },
-  title: {
-    fontSize: 22,
-    fontWeight: "700",
-    color: "#000",
-    flex: 1,
-  },
-  headerButtons: {
-    flexDirection: "row",
-    gap: 12,
-    alignItems: "center",
-  },
-  closeButton: {
-    padding: 4,
-  },
-  closeIconButton: {
-    backgroundColor: "#FF3B30",
-    borderRadius: 10,
-    padding: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButton: {
-    backgroundColor: "#007bff",
-    borderRadius: 8,
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButtonText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "600",
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-    marginBottom: 15,
-  },
-  fishCard: {
-    backgroundColor: "#fff",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 16,
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
+export const createStyles = (colors: typeof Colors.light) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.backgroundSecondary,
+    },
+    header: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      paddingHorizontal: 20,
+      paddingTop: 30,
+      paddingBottom: 16,
+      backgroundColor: colors.surface,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.separator,
+    },
+    title: {
+      fontSize: 22,
+      fontWeight: "700",
+      color: colors.text,
+      flex: 1,
+    },
+    headerButtons: {
+      flexDirection: "row",
+      gap: 12,
+      alignItems: "center",
+    },
+    closeButton: {
+      padding: 4,
+    },
+    closeIconButton: {
+      backgroundColor: colors.error,
+      borderRadius: 10,
+      padding: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "600",
+    },
+    content: {
+      flex: 1,
+      padding: 16,
+      marginBottom: 15,
+    },
+    fishCard: {
+      backgroundColor: colors.card,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 16,
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },

-  fishCardHeaderContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  fishCardTitle: {
-    fontSize: 16,
-    fontWeight: "700",
-    color: "#000",
-  },
-  fishCardSubtitle: {
-    fontSize: 15,
-    color: "#ff6600",
-    fontWeight: "500",
-  },
-  fieldGroup: {
-    marginBottom: 14,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: "600",
-    color: "#333",
-    marginBottom: 6,
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ddd",
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontSize: 16,
-    backgroundColor: "#fff",
-    color: "#000",
-  },
-  inputDisabled: {
-    backgroundColor: "#f5f5f5",
-    color: "#999",
-    borderColor: "#eee",
-  },
-  errorText: {
-    color: "#dc3545",
-    fontSize: 12,
-    marginTop: 4,
-    fontWeight: "500",
-  },
-  buttonRow: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 8,
-    marginTop: 12,
-  },
-  removeButton: {
-    backgroundColor: "#dc3545",
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  removeButtonText: {
-    color: "#fff",
-    fontSize: 14,
-    fontWeight: "600",
-  },
-  addButton: {
-    backgroundColor: "#007AFF",
-    borderRadius: 12,
-    padding: 16,
-    marginBottom: 12,
-    justifyContent: "center",
-    alignItems: "center",
-    shadowColor: "#000",
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    shadowOffset: { width: 0, height: 2 },
-    elevation: 2,
-  },
-  addButtonText: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#fff",
-  },
-  footerSection: {
-    paddingHorizontal: 16,
-    paddingVertical: 16,
-    backgroundColor: "#fff",
-    borderTopWidth: 1,
-    borderTopColor: "#eee",
-  },
-  saveButtonLarge: {
-    backgroundColor: "#007bff",
-    borderRadius: 8,
-    paddingVertical: 14,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  saveButtonLargeText: {
-    color: "#fff",
-    fontSize: 16,
-    fontWeight: "700",
-  },
-  emptyStateText: {
-    textAlign: "center",
-    color: "#999",
-    fontSize: 14,
-    marginTop: 20,
-  },
-});
-
-export default styles;
+    fishCardHeaderContent: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+    },
+    fishCardTitle: {
+      fontSize: 16,
+      fontWeight: "700",
+      color: colors.text,
+    },
+    fishCardSubtitle: {
+      fontSize: 15,
+      color: colors.warning,
+      fontWeight: "500",
+    },
+    fieldGroup: {
+      marginBottom: 14,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: colors.textSecondary,
+      marginBottom: 6,
+    },
+    input: {
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      fontSize: 16,
+      backgroundColor: colors.surface,
+      color: colors.text,
+    },
+    inputDisabled: {
+      backgroundColor: colors.backgroundSecondary,
+      color: colors.textSecondary,
+      borderColor: colors.separator,
+    },
+    errorText: {
+      color: colors.error,
+      fontSize: 12,
+      marginTop: 4,
+      fontWeight: "500",
+    },
+    buttonRow: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      gap: 8,
+      marginTop: 12,
+    },
+    removeButton: {
+      backgroundColor: colors.error,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    removeButtonText: {
+      color: "#fff",
+      fontSize: 14,
+      fontWeight: "600",
+    },
+    addButton: {
+      backgroundColor: colors.primary,
+      borderRadius: 12,
+      padding: 16,
+      marginBottom: 12,
+      justifyContent: "center",
+      alignItems: "center",
+      shadowColor: "#000",
+      shadowOpacity: 0.05,
+      shadowRadius: 4,
+      shadowOffset: { width: 0, height: 2 },
+      elevation: 2,
+    },
+    addButtonText: {
+      fontSize: 16,
+      fontWeight: "600",
+      color: "#fff",
+    },
+    footerSection: {
+      paddingHorizontal: 16,
+      paddingVertical: 16,
+      backgroundColor: colors.surface,
+      borderTopWidth: 1,
+      borderTopColor: colors.separator,
+    },
+    saveButtonLarge: {
+      backgroundColor: colors.primary,
+      borderRadius: 8,
+      paddingVertical: 14,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    saveButtonLargeText: {
+      color: "#fff",
+      fontSize: 16,
+      fontWeight: "700",
+    },
+    emptyStateText: {
+      textAlign: "center",
+      color: colors.textSecondary,
+      fontSize: 14,
+      marginTop: 20,
+    },
+  });