tuanta/SeaGateway-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update darkMode for modal

Browse Source
This commit is contained in:
MinhNN
2025-11-21 08:50:07 +07:00
parent 51327c7d01
commit 6975358a7f
8 changed files with 750 additions and 766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/tripInfo/modal/CreateOrUpdateHaulModal.tsx
View File

@@ -3,6 +3,7 @@ import { IconSymbol } from "@/components/ui/icon-symbol";
import { queryGpsData } from "@/controller/DeviceController"; import { queryGpsData } from "@/controller/DeviceController";
import { queryUpdateFishingLogs } from "@/controller/TripController"; import { queryUpdateFishingLogs } from "@/controller/TripController";
import { useI18n } from "@/hooks/use-i18n"; import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import { showErrorToast, showSuccessToast } from "@/services/toast_service"; import { showErrorToast, showSuccessToast } from "@/services/toast_service";
import { useFishes } from "@/state/use-fish"; import { useFishes } from "@/state/use-fish";
import { useTrip } from "@/state/use-trip"; import { useTrip } from "@/state/use-trip";
@@ -21,7 +22,7 @@ import {
} from "react-native"; } from "react-native";
import { z } from "zod"; import { z } from "zod";
import { InfoSection } from "./components/InfoSection"; import { InfoSection } from "./components/InfoSection";
import styles from "./style/CreateOrUpdateHaulModal.styles"; import { createStyles } from "./style/CreateOrUpdateHaulModal.styles";
interface CreateOrUpdateHaulModalProps { interface CreateOrUpdateHaulModalProps {
isVisible: boolean; isVisible: boolean;
@@ -74,6 +75,8 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
fishingLog, fishingLog,
fishingLogIndex, fishingLogIndex,
}) => { }) => {
const { colors } = useThemeContext();
const styles = React.useMemo(() => createStyles(colors), [colors]);
const { t } = useI18n(); const { t } = useI18n();
const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info); const [isCreateMode, setIsCreateMode] = React.useState(!fishingLog?.info);
const [isEditing, setIsEditing] = React.useState(false); const [isEditing, setIsEditing] = React.useState(false);
@@ -256,7 +259,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
<TouchableOpacity <TouchableOpacity
onPress={() => remove(index)} onPress={() => remove(index)}
style={{ style={{
backgroundColor: "#FF3B30", backgroundColor: colors.error,
borderRadius: 8, borderRadius: 8,
width: 40, width: 40,
height: 40, height: 40,
@@ -277,7 +280,7 @@ const CreateOrUpdateHaulModal: React.FC<CreateOrUpdateHaulModalProps> = ({
<TouchableOpacity <TouchableOpacity
onPress={() => handleToggleExpanded(index)} onPress={() => handleToggleExpanded(index)}
style={{ style={{
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 8, borderRadius: 8,
width: 40, width: 40,
height: 40, height: 40,

5
components/tripInfo/modal/CrewDetailModal.tsx
View File

@@ -1,8 +1,9 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; import { IconSymbol } from "@/components/ui/icon-symbol";
import { useI18n } from "@/hooks/use-i18n"; import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import React from "react"; import React from "react";
import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native"; import { Modal, ScrollView, Text, TouchableOpacity, View } from "react-native";
import styles from "./style/CrewDetailModal.styles"; import { createStyles } from "./style/CrewDetailModal.styles";
// --------------------------- // ---------------------------
// 🧩 Interface // 🧩 Interface
@@ -23,6 +24,8 @@ const CrewDetailModal: React.FC<CrewDetailModalProps> = ({
crewData, crewData,
}) => { }) => {
const { t } = useI18n(); const { t } = useI18n();
const { colors } = useThemeContext();
const styles = React.useMemo(() => createStyles(colors), [colors]);
if (!crewData) return null; if (!crewData) return null;

5
components/tripInfo/modal/TripCostDetailModal.tsx
View File

@@ -1,5 +1,6 @@
import { IconSymbol } from "@/components/ui/icon-symbol"; import { IconSymbol } from "@/components/ui/icon-symbol";
import { useI18n } from "@/hooks/use-i18n"; import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { import {
KeyboardAvoidingView, KeyboardAvoidingView,
@@ -11,7 +12,7 @@ import {
TouchableOpacity, TouchableOpacity,
View, View,
} from "react-native"; } from "react-native";
import styles from "./style/TripCostDetailModal.styles"; import { createStyles } from "./style/TripCostDetailModal.styles";
// --------------------------- // ---------------------------
// 🧩 Interface // 🧩 Interface
@@ -31,6 +32,8 @@ const TripCostDetailModal: React.FC<TripCostDetailModalProps> = ({
data, data,
}) => { }) => {
const { t } = useI18n(); const { t } = useI18n();
const { colors } = useThemeContext();
const styles = React.useMemo(() => createStyles(colors), [colors]);
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [editableData, setEditableData] = useState<Model.TripCost[]>(data); const [editableData, setEditableData] = useState<Model.TripCost[]>(data);

128
components/tripInfo/modal/components/InfoSection.tsx
View File

@@ -1,4 +1,5 @@
import { useI18n } from "@/hooks/use-i18n"; import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";
import React from "react"; import React from "react";
import { StyleSheet, Text, View } from "react-native"; import { StyleSheet, Text, View } from "react-native";
@@ -12,6 +13,9 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
stt, stt,
}) => { }) => {
const { t } = useI18n(); const { t } = useI18n();
const { colors } = useThemeContext();
const styles = React.useMemo(() => createStyles(colors), [colors]);
if (!fishingLog) { if (!fishingLog) {
return null; return null;
} }
@@ -41,22 +45,6 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
? new Date(fishingLog.end_at).toLocaleString() ? new Date(fishingLog.end_at).toLocaleString()
: "-", : "-",
}, },
// {
// label: "Vị trí hạ thu",
// value: fishingLog.viTriHaThu || "Chưa cập nhật",
// },
// {
// label: "Vị trí thu lưới",
// value: fishingLog.viTriThuLuoi || "Chưa cập nhật",
// },
// {
// label: "Độ sâu hạ thu",
// value: fishingLog.doSauHaThu || "Chưa cập nhật",
// },
// {
// label: "Độ sâu thu lưới",
// value: fishingLog.doSauThuLuoi || "Chưa cập nhật",
// },
]; ];
return ( return (
@@ -68,21 +56,12 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
<View <View
style={[ style={[
styles.statusBadge, styles.statusBadge,
item.value === "Đã hoàn thành" item.value === t("trip.infoSection.statusCompleted")
? styles.statusBadgeCompleted ? styles.statusBadgeCompleted
: styles.statusBadgeInProgress, : styles.statusBadgeInProgress,
]} ]}
> >
<Text <Text style={styles.statusBadgeText}>{item.value}</Text>
style={[
styles.statusBadgeText,
item.value === "Đã hoàn thành"
? styles.statusBadgeTextCompleted
: styles.statusBadgeTextInProgress,
]}
>
{item.value}
</Text>
</View> </View>
) : ( ) : (
<Text style={styles.infoValue}>{item.value}</Text> <Text style={styles.infoValue}>{item.value}</Text>
@@ -93,53 +72,48 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
); );
}; };
const styles = StyleSheet.create({ const createStyles = (colors: any) =>
infoCard: { StyleSheet.create({
borderWidth: 1, infoCard: {
borderColor: "#ddd", borderWidth: 1,
borderRadius: 8, borderColor: colors.border,
padding: 12, borderRadius: 8,
marginBottom: 12, padding: 12,
backgroundColor: "#f9f9f9", marginBottom: 12,
}, backgroundColor: colors.backgroundSecondary,
infoRow: { },
flexDirection: "row", infoRow: {
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
marginBottom: 8, alignItems: "center",
}, marginBottom: 8,
infoLabel: { },
fontSize: 14, infoLabel: {
fontWeight: "600", fontSize: 14,
color: "#333", fontWeight: "600",
}, color: colors.textSecondary,
infoValue: { },
fontSize: 16, infoValue: {
color: "#555", fontSize: 16,
paddingVertical: 8, color: colors.text,
}, paddingVertical: 8,
statusBadge: { },
paddingVertical: 4, statusBadge: {
paddingHorizontal: 12, paddingVertical: 4,
borderRadius: 12, paddingHorizontal: 12,
alignItems: "center", borderRadius: 12,
justifyContent: "center", alignItems: "center",
}, justifyContent: "center",
statusBadgeCompleted: { },
backgroundColor: "#34C759", statusBadgeCompleted: {
}, backgroundColor: colors.success,
statusBadgeInProgress: { },
backgroundColor: "#FF9500", statusBadgeInProgress: {
}, backgroundColor: colors.warning,
statusBadgeText: { },
fontSize: 14, statusBadgeText: {
fontWeight: "600", fontSize: 14,
color: "#fff", fontWeight: "600",
}, color: "#fff",
statusBadgeTextCompleted: { },
color: "#fff", });
},
statusBadgeTextInProgress: {
color: "#fff",
},
});

352
components/tripInfo/modal/style/CreateOrUpdateHaulModal.styles.ts
View File

@@ -1,179 +1,179 @@
import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
const styles = StyleSheet.create({ export const createStyles = (colors: typeof Colors.light) =>
container: { StyleSheet.create({
flex: 1, container: {
backgroundColor: "#f5f5f5", flex: 1,
}, backgroundColor: colors.backgroundSecondary,
header: { },
flexDirection: "row", header: {
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
paddingHorizontal: 20, alignItems: "center",
paddingTop: 30, paddingHorizontal: 20,
paddingBottom: 16, paddingTop: 30,
backgroundColor: "#fff", paddingBottom: 16,
borderBottomWidth: 1, backgroundColor: colors.surface,
borderBottomColor: "#eee", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
title: { },
fontSize: 22, title: {
fontWeight: "700", fontSize: 22,
color: "#000", fontWeight: "700",
flex: 1, color: colors.text,
}, flex: 1,
headerButtons: { },
flexDirection: "row", headerButtons: {
gap: 12, flexDirection: "row",
alignItems: "center", gap: 12,
}, alignItems: "center",
closeButton: { },
padding: 4, closeButton: {
}, padding: 4,
closeIconButton: { },
backgroundColor: "#FF3B30", closeIconButton: {
borderRadius: 10, backgroundColor: colors.error,
padding: 10, borderRadius: 10,
justifyContent: "center", padding: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
saveButton: { },
backgroundColor: "#007bff", saveButton: {
borderRadius: 8, backgroundColor: colors.primary,
paddingHorizontal: 20, borderRadius: 8,
paddingVertical: 10, paddingHorizontal: 20,
justifyContent: "center", paddingVertical: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
saveButtonText: { },
color: "#fff", saveButtonText: {
fontSize: 16, color: "#fff",
fontWeight: "600", fontSize: 16,
}, fontWeight: "600",
content: { },
flex: 1, content: {
padding: 16, flex: 1,
marginBottom: 15, padding: 16,
}, marginBottom: 15,
fishCard: { },
backgroundColor: "#fff", fishCard: {
borderRadius: 12, backgroundColor: colors.card,
padding: 16, borderRadius: 12,
marginBottom: 16, padding: 16,
shadowColor: "#000", marginBottom: 16,
shadowOpacity: 0.05, shadowColor: "#000",
shadowRadius: 4, shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 }, shadowRadius: 4,
elevation: 2, shadowOffset: { width: 0, height: 2 },
}, elevation: 2,
},
fishCardHeaderContent: { fishCardHeaderContent: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: 8, gap: 8,
}, },
fishCardTitle: { fishCardTitle: {
fontSize: 16, fontSize: 16,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
}, },
fishCardSubtitle: { fishCardSubtitle: {
fontSize: 15, fontSize: 15,
color: "#ff6600", color: colors.warning,
fontWeight: "500", fontWeight: "500",
}, },
fieldGroup: { fieldGroup: {
marginBottom: 14, marginBottom: 14,
}, },
label: { label: {
fontSize: 14, fontSize: 14,
fontWeight: "600", fontWeight: "600",
color: "#333", color: colors.textSecondary,
marginBottom: 6, marginBottom: 6,
}, },
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: "#ddd", borderColor: colors.border,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
fontSize: 16, fontSize: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
color: "#000", color: colors.text,
}, },
inputDisabled: { inputDisabled: {
backgroundColor: "#f5f5f5", backgroundColor: colors.backgroundSecondary,
color: "#999", color: colors.textSecondary,
borderColor: "#eee", borderColor: colors.separator,
}, },
errorText: { errorText: {
color: "#dc3545", color: colors.error,
fontSize: 12, fontSize: 12,
marginTop: 4, marginTop: 4,
fontWeight: "500", fontWeight: "500",
}, },
buttonRow: { buttonRow: {
flexDirection: "row", flexDirection: "row",
justifyContent: "flex-end", justifyContent: "flex-end",
gap: 8, gap: 8,
marginTop: 12, marginTop: 12,
}, },
removeButton: { removeButton: {
backgroundColor: "#dc3545", backgroundColor: colors.error,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 8, paddingVertical: 8,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
removeButtonText: { removeButtonText: {
color: "#fff", color: "#fff",
fontSize: 14, fontSize: 14,
fontWeight: "600", fontWeight: "600",
}, },
addButton: { addButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 12, marginBottom: 12,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
shadowColor: "#000", shadowColor: "#000",
shadowOpacity: 0.05, shadowOpacity: 0.05,
shadowRadius: 4, shadowRadius: 4,
shadowOffset: { width: 0, height: 2 }, shadowOffset: { width: 0, height: 2 },
elevation: 2, elevation: 2,
}, },
addButtonText: { addButtonText: {
fontSize: 16, fontSize: 16,
fontWeight: "600", fontWeight: "600",
color: "#fff", color: "#fff",
}, },
footerSection: { footerSection: {
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 16, paddingVertical: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
borderTopWidth: 1, borderTopWidth: 1,
borderTopColor: "#eee", borderTopColor: colors.separator,
}, },
saveButtonLarge: { saveButtonLarge: {
backgroundColor: "#007bff", backgroundColor: colors.primary,
borderRadius: 8, borderRadius: 8,
paddingVertical: 14, paddingVertical: 14,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
saveButtonLargeText: { saveButtonLargeText: {
color: "#fff", color: "#fff",
fontSize: 16, fontSize: 16,
fontWeight: "700", fontWeight: "700",
}, },
emptyStateText: { emptyStateText: {
textAlign: "center", textAlign: "center",
color: "#999", color: colors.textSecondary,
fontSize: 14, fontSize: 14,
marginTop: 20, marginTop: 20,
}, },
}); });
export default styles;

134
components/tripInfo/modal/style/CrewDetailModal.styles.ts
View File

@@ -1,69 +1,69 @@
import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
const styles = StyleSheet.create({ export const createStyles = (colors: typeof Colors.light) =>
container: { StyleSheet.create({
flex: 1, container: {
backgroundColor: "#f5f5f5", flex: 1,
}, backgroundColor: colors.backgroundSecondary,
header: { },
flexDirection: "row", header: {
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
paddingHorizontal: 20, alignItems: "center",
paddingTop: 30, paddingHorizontal: 20,
paddingBottom: 16, paddingTop: 30,
backgroundColor: "#fff", paddingBottom: 16,
borderBottomWidth: 1, backgroundColor: colors.surface,
borderBottomColor: "#eee", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
title: { },
fontSize: 22, title: {
fontWeight: "700", fontSize: 22,
color: "#000", fontWeight: "700",
flex: 1, color: colors.text,
}, flex: 1,
closeButton: { },
padding: 4, closeButton: {
}, padding: 4,
closeIconButton: { },
backgroundColor: "#FF3B30", closeIconButton: {
borderRadius: 10, backgroundColor: colors.error,
padding: 10, borderRadius: 10,
justifyContent: "center", padding: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
content: { },
flex: 1, content: {
padding: 16, flex: 1,
marginBottom: 15, padding: 16,
}, marginBottom: 15,
infoCard: { },
backgroundColor: "#fff", infoCard: {
borderRadius: 12, backgroundColor: colors.card,
padding: 16, borderRadius: 12,
marginBottom: 35, padding: 16,
shadowColor: "#000", marginBottom: 35,
shadowOpacity: 0.05, shadowColor: "#000",
shadowRadius: 4, shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 }, shadowRadius: 4,
elevation: 2, shadowOffset: { width: 0, height: 2 },
}, elevation: 2,
infoRow: { },
paddingVertical: 12, infoRow: {
borderBottomWidth: 1, paddingVertical: 12,
borderBottomColor: "#f0f0f0", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
infoLabel: { },
fontSize: 13, infoLabel: {
fontWeight: "600", fontSize: 13,
color: "#666", fontWeight: "600",
marginBottom: 6, color: colors.textSecondary,
}, marginBottom: 6,
infoValue: { },
fontSize: 16, infoValue: {
color: "#000", fontSize: 16,
fontWeight: "500", color: colors.text,
}, fontWeight: "500",
}); },
});
export default styles;

581
components/tripInfo/modal/style/NetDetailModal.styles.ts
View File

@@ -1,292 +1,293 @@
import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
const styles = StyleSheet.create({ export const createStyles = (colors: typeof Colors.light) =>
container: { StyleSheet.create({
flex: 1, container: {
backgroundColor: "#f5f5f5", flex: 1,
}, backgroundColor: colors.backgroundSecondary,
header: { },
flexDirection: "row", header: {
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
paddingHorizontal: 20, alignItems: "center",
paddingTop: 30, paddingHorizontal: 20,
paddingBottom: 16, paddingTop: 30,
backgroundColor: "#fff", paddingBottom: 16,
borderBottomWidth: 1, backgroundColor: colors.surface,
borderBottomColor: "#eee", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
title: { },
fontSize: 22, title: {
fontWeight: "700", fontSize: 22,
color: "#000", fontWeight: "700",
flex: 1, color: colors.text,
}, flex: 1,
closeButton: { },
padding: 4, closeButton: {
}, padding: 4,
closeIconButton: { },
backgroundColor: "#FF3B30", closeIconButton: {
borderRadius: 10, backgroundColor: colors.error,
padding: 10, borderRadius: 10,
justifyContent: "center", padding: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
content: { },
flex: 1, content: {
padding: 16, flex: 1,
marginBottom: 15, padding: 16,
}, marginBottom: 15,
infoCard: { },
backgroundColor: "#fff", infoCard: {
borderRadius: 12, backgroundColor: colors.card,
padding: 16, borderRadius: 12,
marginBottom: 35, padding: 16,
shadowColor: "#000", marginBottom: 35,
shadowOpacity: 0.05, shadowColor: "#000",
shadowRadius: 4, shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 }, shadowRadius: 4,
elevation: 2, shadowOffset: { width: 0, height: 2 },
}, elevation: 2,
infoRow: { },
paddingVertical: 12, infoRow: {
borderBottomWidth: 1, paddingVertical: 12,
borderBottomColor: "#f0f0f0", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
infoLabel: { },
fontSize: 13, infoLabel: {
fontWeight: "600", fontSize: 13,
color: "#666", fontWeight: "600",
marginBottom: 6, color: colors.textSecondary,
}, marginBottom: 6,
infoValue: { },
fontSize: 16, infoValue: {
color: "#000", fontSize: 16,
fontWeight: "500", color: colors.text,
}, fontWeight: "500",
statusBadge: { },
paddingHorizontal: 12, statusBadge: {
paddingVertical: 6, paddingHorizontal: 12,
borderRadius: 8, paddingVertical: 6,
alignSelf: "flex-start", borderRadius: 8,
}, alignSelf: "flex-start",
statusBadgeCompleted: { },
backgroundColor: "#e8f5e9", statusBadgeCompleted: {
}, backgroundColor: colors.success,
statusBadgeInProgress: { },
backgroundColor: "#fff3e0", statusBadgeInProgress: {
}, backgroundColor: colors.warning,
statusBadgeText: { },
fontSize: 14, statusBadgeText: {
fontWeight: "600", fontSize: 14,
}, fontWeight: "600",
statusBadgeTextCompleted: { color: "#fff",
color: "#2e7d32", },
}, statusBadgeTextCompleted: {
statusBadgeTextInProgress: { color: "#fff",
color: "#f57c00", },
}, statusBadgeTextInProgress: {
headerButtons: { color: "#fff",
flexDirection: "row", },
alignItems: "center", headerButtons: {
gap: 12, flexDirection: "row",
}, alignItems: "center",
editButton: { gap: 12,
padding: 4, },
}, editButton: {
editIconButton: { padding: 4,
backgroundColor: "#007AFF", },
borderRadius: 10, editIconButton: {
padding: 10, backgroundColor: colors.primary,
justifyContent: "center", borderRadius: 10,
alignItems: "center", padding: 10,
}, justifyContent: "center",
cancelButton: { alignItems: "center",
paddingHorizontal: 12, },
paddingVertical: 6, cancelButton: {
}, paddingHorizontal: 12,
cancelButtonText: { paddingVertical: 6,
color: "#007AFF", },
fontSize: 16, cancelButtonText: {
fontWeight: "600", color: colors.primary,
}, fontSize: 16,
saveButton: { fontWeight: "600",
backgroundColor: "#007AFF", },
paddingHorizontal: 16, saveButton: {
paddingVertical: 6, backgroundColor: colors.primary,
borderRadius: 6, paddingHorizontal: 16,
}, paddingVertical: 6,
saveButtonText: { borderRadius: 6,
color: "#fff", },
fontSize: 16, saveButtonText: {
fontWeight: "600", color: "#fff",
}, fontSize: 16,
sectionHeader: { fontWeight: "600",
flexDirection: "row", },
justifyContent: "space-between", sectionHeader: {
alignItems: "center", flexDirection: "row",
marginTop: 16, justifyContent: "space-between",
marginBottom: 12, alignItems: "center",
paddingHorizontal: 4, marginTop: 16,
}, marginBottom: 12,
sectionTitle: { paddingHorizontal: 4,
fontSize: 18, },
fontWeight: "700", sectionTitle: {
color: "#000", fontSize: 18,
}, fontWeight: "700",
totalCatchText: { color: colors.text,
fontSize: 16, },
fontWeight: "600", totalCatchText: {
color: "#007AFF", fontSize: 16,
}, fontWeight: "600",
fishCard: { color: colors.primary,
position: "relative", },
backgroundColor: "#fff", fishCard: {
borderRadius: 12, position: "relative",
padding: 16, backgroundColor: colors.card,
marginBottom: 12, borderRadius: 12,
shadowColor: "#000", padding: 16,
shadowOpacity: 0.05, marginBottom: 12,
shadowRadius: 4, shadowColor: "#000",
shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.05,
elevation: 2, shadowRadius: 4,
}, shadowOffset: { width: 0, height: 2 },
fieldGroup: { elevation: 2,
marginBottom: 12, },
marginTop: 0, fieldGroup: {
}, marginBottom: 12,
rowGroup: { marginTop: 0,
flexDirection: "row", },
marginBottom: 12, rowGroup: {
}, flexDirection: "row",
label: { marginBottom: 12,
fontSize: 13, },
fontWeight: "600", label: {
color: "#666", fontSize: 13,
marginBottom: 6, fontWeight: "600",
}, color: colors.textSecondary,
input: { marginBottom: 6,
borderWidth: 1, },
borderColor: "#007AFF", input: {
borderRadius: 8, borderWidth: 1,
paddingHorizontal: 12, borderColor: colors.primary,
paddingVertical: 10, borderRadius: 8,
fontSize: 15, paddingHorizontal: 12,
color: "#000", paddingVertical: 10,
backgroundColor: "#fff", fontSize: 15,
}, color: colors.text,
selectButton: { backgroundColor: colors.surface,
borderWidth: 1, },
borderColor: "#007AFF", selectButton: {
borderRadius: 8, borderWidth: 1,
paddingHorizontal: 12, borderColor: colors.primary,
paddingVertical: 10, borderRadius: 8,
flexDirection: "row", paddingHorizontal: 12,
justifyContent: "space-between", paddingVertical: 10,
alignItems: "center", flexDirection: "row",
backgroundColor: "#fff", justifyContent: "space-between",
}, alignItems: "center",
selectButtonText: { backgroundColor: colors.surface,
fontSize: 15, },
color: "#000", selectButtonText: {
}, fontSize: 15,
optionsList: { color: colors.text,
position: "absolute", },
top: 46, optionsList: {
left: 0, position: "absolute",
right: 0, top: 46,
borderWidth: 1, left: 0,
borderColor: "#007AFF", right: 0,
borderRadius: 8, borderWidth: 1,
marginTop: 4, borderColor: colors.primary,
backgroundColor: "#fff", borderRadius: 8,
maxHeight: 100, marginTop: 4,
zIndex: 1000, backgroundColor: colors.surface,
elevation: 5, maxHeight: 100,
shadowColor: "#000", zIndex: 1000,
shadowOpacity: 0.15, elevation: 5,
shadowRadius: 8, shadowColor: "#000",
shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15,
}, shadowRadius: 8,
optionItem: { shadowOffset: { width: 0, height: 4 },
paddingHorizontal: 12, },
paddingVertical: 12, optionItem: {
borderBottomWidth: 1, paddingHorizontal: 12,
borderBottomColor: "#f0f0f0", paddingVertical: 12,
}, borderBottomWidth: 1,
optionText: { borderBottomColor: colors.separator,
fontSize: 15, },
color: "#000", optionText: {
}, fontSize: 15,
optionsStatusFishList: { color: colors.text,
borderWidth: 1, },
borderColor: "#007AFF", optionsStatusFishList: {
borderRadius: 8, borderWidth: 1,
marginTop: 4, borderColor: colors.primary,
backgroundColor: "#fff", borderRadius: 8,
maxHeight: 120, marginTop: 4,
zIndex: 1000, backgroundColor: colors.surface,
elevation: 5, maxHeight: 120,
shadowColor: "#000", zIndex: 1000,
shadowOpacity: 0.15, elevation: 5,
shadowRadius: 8, shadowColor: "#000",
shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15,
}, shadowRadius: 8,
fishNameDropdown: { shadowOffset: { width: 0, height: 4 },
position: "absolute", },
top: 46, fishNameDropdown: {
left: 0, position: "absolute",
right: 0, top: 46,
borderWidth: 1, left: 0,
borderColor: "#007AFF", right: 0,
borderRadius: 8, borderWidth: 1,
marginTop: 4, borderColor: colors.primary,
backgroundColor: "#fff", borderRadius: 8,
maxHeight: 180, marginTop: 4,
zIndex: 1000, backgroundColor: colors.surface,
elevation: 5, maxHeight: 180,
shadowColor: "#000", zIndex: 1000,
shadowOpacity: 0.15, elevation: 5,
shadowRadius: 8, shadowColor: "#000",
shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.15,
}, shadowRadius: 8,
fishCardHeaderContent: { shadowOffset: { width: 0, height: 4 },
flexDirection: "row", },
gap: 5, fishCardHeaderContent: {
}, flexDirection: "row",
fishCardTitle: { gap: 5,
fontSize: 16, },
fontWeight: "600", fishCardTitle: {
color: "#000", fontSize: 16,
}, fontWeight: "600",
fishCardSubtitle: { color: colors.text,
fontSize: 15, },
color: "#ff6600", fishCardSubtitle: {
marginTop: 0, fontSize: 15,
}, color: colors.warning,
addFishButton: { marginTop: 0,
backgroundColor: "#007AFF", },
borderRadius: 12, addFishButton: {
padding: 16, backgroundColor: colors.primary,
marginBottom: 12, borderRadius: 12,
justifyContent: "center", padding: 16,
alignItems: "center", marginBottom: 12,
shadowColor: "#000", justifyContent: "center",
shadowOpacity: 0.05, alignItems: "center",
shadowRadius: 4, shadowColor: "#000",
shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.05,
elevation: 2, shadowRadius: 4,
}, shadowOffset: { width: 0, height: 2 },
addFishButtonContent: { elevation: 2,
flexDirection: "row", },
alignItems: "center", addFishButtonContent: {
gap: 8, flexDirection: "row",
}, alignItems: "center",
addFishButtonText: { gap: 8,
fontSize: 16, },
fontWeight: "600", addFishButtonText: {
color: "#fff", fontSize: 16,
}, fontWeight: "600",
}); color: "#fff",
},
export default styles; });

302
components/tripInfo/modal/style/TripCostDetailModal.styles.ts
View File

@@ -1,153 +1,153 @@
import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
const styles = StyleSheet.create({ export const createStyles = (colors: typeof Colors.light) =>
closeIconButton: { StyleSheet.create({
backgroundColor: "#FF3B30", closeIconButton: {
borderRadius: 10, backgroundColor: colors.error,
padding: 10, borderRadius: 10,
justifyContent: "center", padding: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
container: { },
flex: 1, container: {
backgroundColor: "#f5f5f5", flex: 1,
}, backgroundColor: colors.backgroundSecondary,
header: { },
flexDirection: "row", header: {
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
paddingHorizontal: 20, alignItems: "center",
paddingTop: 30, paddingHorizontal: 20,
paddingBottom: 16, paddingTop: 30,
backgroundColor: "#fff", paddingBottom: 16,
borderBottomWidth: 1, backgroundColor: colors.surface,
borderBottomColor: "#eee", borderBottomWidth: 1,
}, borderBottomColor: colors.separator,
title: { },
fontSize: 22, title: {
fontWeight: "700", fontSize: 22,
color: "#000", fontWeight: "700",
flex: 1, color: colors.text,
}, flex: 1,
headerButtons: { },
flexDirection: "row", headerButtons: {
alignItems: "center", flexDirection: "row",
gap: 12, alignItems: "center",
}, gap: 12,
editButton: { },
padding: 4, editButton: {
}, padding: 4,
editIconButton: { },
backgroundColor: "#007AFF", editIconButton: {
borderRadius: 10, backgroundColor: colors.primary,
padding: 10, borderRadius: 10,
justifyContent: "center", padding: 10,
alignItems: "center", justifyContent: "center",
}, alignItems: "center",
cancelButton: { },
paddingHorizontal: 12, cancelButton: {
paddingVertical: 6, paddingHorizontal: 12,
}, paddingVertical: 6,
cancelButtonText: { },
color: "#007AFF", cancelButtonText: {
fontSize: 16, color: colors.primary,
fontWeight: "600", fontSize: 16,
}, fontWeight: "600",
saveButton: { },
backgroundColor: "#007AFF", saveButton: {
paddingHorizontal: 16, backgroundColor: colors.primary,
paddingVertical: 6, paddingHorizontal: 16,
borderRadius: 6, paddingVertical: 6,
}, borderRadius: 6,
saveButtonText: { },
color: "#fff", saveButtonText: {
fontSize: 16, color: "#fff",
fontWeight: "600", fontSize: 16,
}, fontWeight: "600",
closeButton: { },
padding: 4, closeButton: {
}, padding: 4,
content: { },
flex: 1, content: {
padding: 16, flex: 1,
}, padding: 16,
itemCard: { },
backgroundColor: "#fff", itemCard: {
borderRadius: 12, backgroundColor: colors.surfaceSecondary,
padding: 16, borderRadius: 12,
marginBottom: 12, padding: 16,
shadowColor: "#000", marginBottom: 12,
shadowOpacity: 0.05, shadowColor: "#000",
shadowRadius: 4, shadowOpacity: 0.05,
shadowOffset: { width: 0, height: 2 }, shadowRadius: 4,
elevation: 2, shadowOffset: { width: 0, height: 2 },
}, elevation: 2,
fieldGroup: { },
marginBottom: 12, fieldGroup: {
}, marginBottom: 12,
rowGroup: { },
flexDirection: "row", rowGroup: {
marginBottom: 12, flexDirection: "row",
}, marginBottom: 12,
label: { },
fontSize: 13, label: {
fontWeight: "600", fontSize: 13,
color: "#666", fontWeight: "600",
marginBottom: 6, color: colors.textSecondary,
}, marginBottom: 6,
input: { },
borderWidth: 1, input: {
borderColor: "#007AFF", borderWidth: 1,
borderRadius: 8, borderColor: colors.primary,
paddingHorizontal: 12, borderRadius: 8,
paddingVertical: 10, paddingHorizontal: 12,
fontSize: 15, paddingVertical: 10,
color: "#000", fontSize: 15,
backgroundColor: "#fff", color: colors.text,
}, backgroundColor: colors.surface,
inputDisabled: { },
borderColor: "#ddd", inputDisabled: {
backgroundColor: "#f9f9f9", borderColor: colors.border,
color: "#666", backgroundColor: colors.backgroundSecondary,
}, color: colors.textSecondary,
totalContainer: { },
backgroundColor: "#fff5e6", totalContainer: {
borderRadius: 8, backgroundColor: colors.backgroundSecondary,
paddingHorizontal: 12, borderRadius: 8,
paddingVertical: 10, paddingHorizontal: 12,
borderWidth: 1, paddingVertical: 10,
borderColor: "#ffd699", borderWidth: 1,
}, borderColor: colors.border,
totalText: { },
fontSize: 16, totalText: {
fontWeight: "700", fontSize: 16,
color: "#ff6600", fontWeight: "700",
}, color: colors.warning,
footerTotal: { },
backgroundColor: "#fff", footerTotal: {
borderRadius: 12, backgroundColor: colors.card,
padding: 20, borderRadius: 12,
marginTop: 8, padding: 20,
marginBottom: 50, marginTop: 8,
flexDirection: "row", marginBottom: 50,
justifyContent: "space-between", flexDirection: "row",
alignItems: "center", justifyContent: "space-between",
shadowColor: "#000", alignItems: "center",
shadowOpacity: 0.1, shadowColor: "#000",
shadowRadius: 4, shadowOpacity: 0.1,
shadowOffset: { width: 0, height: 2 }, shadowRadius: 4,
elevation: 3, shadowOffset: { width: 0, height: 2 },
}, elevation: 3,
footerLabel: { },
fontSize: 18, footerLabel: {
fontWeight: "700", fontSize: 18,
color: "#007bff", fontWeight: "700",
}, color: colors.primary,
footerAmount: { },
fontSize: 20, footerAmount: {
fontWeight: "700", fontSize: 20,
color: "#ff6600", fontWeight: "700",
}, color: colors.warning,
}); },
});
export default styles;