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);

54
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,14 +72,15 @@ export const InfoSection: React.FC<InfoSectionProps> = ({
); );
}; };
const styles = StyleSheet.create({ const createStyles = (colors: any) =>
StyleSheet.create({
infoCard: { infoCard: {
borderWidth: 1, borderWidth: 1,
borderColor: "#ddd", borderColor: colors.border,
borderRadius: 8, borderRadius: 8,
padding: 12, padding: 12,
marginBottom: 12, marginBottom: 12,
backgroundColor: "#f9f9f9", backgroundColor: colors.backgroundSecondary,
}, },
infoRow: { infoRow: {
flexDirection: "row", flexDirection: "row",
@@ -111,11 +91,11 @@ const styles = StyleSheet.create({
infoLabel: { infoLabel: {
fontSize: 14, fontSize: 14,
fontWeight: "600", fontWeight: "600",
color: "#333", color: colors.textSecondary,
}, },
infoValue: { infoValue: {
fontSize: 16, fontSize: 16,
color: "#555", color: colors.text,
paddingVertical: 8, paddingVertical: 8,
}, },
statusBadge: { statusBadge: {
@@ -126,20 +106,14 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
}, },
statusBadgeCompleted: { statusBadgeCompleted: {
backgroundColor: "#34C759", backgroundColor: colors.success,
}, },
statusBadgeInProgress: { statusBadgeInProgress: {
backgroundColor: "#FF9500", backgroundColor: colors.warning,
}, },
statusBadgeText: { statusBadgeText: {
fontSize: 14, fontSize: 14,
fontWeight: "600", fontWeight: "600",
color: "#fff", color: "#fff",
}, },
statusBadgeTextCompleted: {
color: "#fff",
},
statusBadgeTextInProgress: {
color: "#fff",
},
}); });

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

@@ -1,9 +1,11 @@
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) =>
StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#f5f5f5", backgroundColor: colors.backgroundSecondary,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
@@ -12,14 +14,14 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 30, paddingTop: 30,
paddingBottom: 16, paddingBottom: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#eee", borderBottomColor: colors.separator,
}, },
title: { title: {
fontSize: 22, fontSize: 22,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
flex: 1, flex: 1,
}, },
headerButtons: { headerButtons: {
@@ -31,14 +33,14 @@ const styles = StyleSheet.create({
padding: 4, padding: 4,
}, },
closeIconButton: { closeIconButton: {
backgroundColor: "#FF3B30", backgroundColor: colors.error,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
}, },
saveButton: { saveButton: {
backgroundColor: "#007bff", backgroundColor: colors.primary,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 20, paddingHorizontal: 20,
paddingVertical: 10, paddingVertical: 10,
@@ -56,7 +58,7 @@ const styles = StyleSheet.create({
marginBottom: 15, marginBottom: 15,
}, },
fishCard: { fishCard: {
backgroundColor: "#fff", backgroundColor: colors.card,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 16, marginBottom: 16,
@@ -75,11 +77,11 @@ const styles = StyleSheet.create({
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: {
@@ -88,26 +90,26 @@ const styles = StyleSheet.create({
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",
@@ -119,7 +121,7 @@ const styles = StyleSheet.create({
marginTop: 12, marginTop: 12,
}, },
removeButton: { removeButton: {
backgroundColor: "#dc3545", backgroundColor: colors.error,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 8, paddingVertical: 8,
@@ -132,7 +134,7 @@ const styles = StyleSheet.create({
fontWeight: "600", fontWeight: "600",
}, },
addButton: { addButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 12, marginBottom: 12,
@@ -152,12 +154,12 @@ const styles = StyleSheet.create({
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",
@@ -170,10 +172,8 @@ const styles = StyleSheet.create({
}, },
emptyStateText: { emptyStateText: {
textAlign: "center", textAlign: "center",
color: "#999", color: colors.textSecondary,
fontSize: 14, fontSize: 14,
marginTop: 20, marginTop: 20,
}, },
}); });
export default styles;

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

@@ -1,9 +1,11 @@
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) =>
StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#f5f5f5", backgroundColor: colors.backgroundSecondary,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
@@ -12,21 +14,21 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 30, paddingTop: 30,
paddingBottom: 16, paddingBottom: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#eee", borderBottomColor: colors.separator,
}, },
title: { title: {
fontSize: 22, fontSize: 22,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
flex: 1, flex: 1,
}, },
closeButton: { closeButton: {
padding: 4, padding: 4,
}, },
closeIconButton: { closeIconButton: {
backgroundColor: "#FF3B30", backgroundColor: colors.error,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
marginBottom: 15, marginBottom: 15,
}, },
infoCard: { infoCard: {
backgroundColor: "#fff", backgroundColor: colors.card,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 35, marginBottom: 35,
@@ -51,19 +53,17 @@ const styles = StyleSheet.create({
infoRow: { infoRow: {
paddingVertical: 12, paddingVertical: 12,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#f0f0f0", borderBottomColor: colors.separator,
}, },
infoLabel: { infoLabel: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
color: "#666", color: colors.textSecondary,
marginBottom: 6, marginBottom: 6,
}, },
infoValue: { infoValue: {
fontSize: 16, fontSize: 16,
color: "#000", color: colors.text,
fontWeight: "500", fontWeight: "500",
}, },
}); });
export default styles;

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

@@ -1,9 +1,11 @@
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) =>
StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#f5f5f5", backgroundColor: colors.backgroundSecondary,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
@@ -12,21 +14,21 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 30, paddingTop: 30,
paddingBottom: 16, paddingBottom: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#eee", borderBottomColor: colors.separator,
}, },
title: { title: {
fontSize: 22, fontSize: 22,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
flex: 1, flex: 1,
}, },
closeButton: { closeButton: {
padding: 4, padding: 4,
}, },
closeIconButton: { closeIconButton: {
backgroundColor: "#FF3B30", backgroundColor: colors.error,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
marginBottom: 15, marginBottom: 15,
}, },
infoCard: { infoCard: {
backgroundColor: "#fff", backgroundColor: colors.card,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 35, marginBottom: 35,
@@ -51,17 +53,17 @@ const styles = StyleSheet.create({
infoRow: { infoRow: {
paddingVertical: 12, paddingVertical: 12,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#f0f0f0", borderBottomColor: colors.separator,
}, },
infoLabel: { infoLabel: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
color: "#666", color: colors.textSecondary,
marginBottom: 6, marginBottom: 6,
}, },
infoValue: { infoValue: {
fontSize: 16, fontSize: 16,
color: "#000", color: colors.text,
fontWeight: "500", fontWeight: "500",
}, },
statusBadge: { statusBadge: {
@@ -71,20 +73,21 @@ const styles = StyleSheet.create({
alignSelf: "flex-start", alignSelf: "flex-start",
}, },
statusBadgeCompleted: { statusBadgeCompleted: {
backgroundColor: "#e8f5e9", backgroundColor: colors.success,
}, },
statusBadgeInProgress: { statusBadgeInProgress: {
backgroundColor: "#fff3e0", backgroundColor: colors.warning,
}, },
statusBadgeText: { statusBadgeText: {
fontSize: 14, fontSize: 14,
fontWeight: "600", fontWeight: "600",
color: "#fff",
}, },
statusBadgeTextCompleted: { statusBadgeTextCompleted: {
color: "#2e7d32", color: "#fff",
}, },
statusBadgeTextInProgress: { statusBadgeTextInProgress: {
color: "#f57c00", color: "#fff",
}, },
headerButtons: { headerButtons: {
flexDirection: "row", flexDirection: "row",
@@ -95,7 +98,7 @@ const styles = StyleSheet.create({
padding: 4, padding: 4,
}, },
editIconButton: { editIconButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
@@ -106,12 +109,12 @@ const styles = StyleSheet.create({
paddingVertical: 6, paddingVertical: 6,
}, },
cancelButtonText: { cancelButtonText: {
color: "#007AFF", color: colors.primary,
fontSize: 16, fontSize: 16,
fontWeight: "600", fontWeight: "600",
}, },
saveButton: { saveButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 6, paddingVertical: 6,
borderRadius: 6, borderRadius: 6,
@@ -132,16 +135,16 @@ const styles = StyleSheet.create({
sectionTitle: { sectionTitle: {
fontSize: 18, fontSize: 18,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
}, },
totalCatchText: { totalCatchText: {
fontSize: 16, fontSize: 16,
fontWeight: "600", fontWeight: "600",
color: "#007AFF", color: colors.primary,
}, },
fishCard: { fishCard: {
position: "relative", position: "relative",
backgroundColor: "#fff", backgroundColor: colors.card,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 12, marginBottom: 12,
@@ -162,33 +165,33 @@ const styles = StyleSheet.create({
label: { label: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
color: "#666", color: colors.textSecondary,
marginBottom: 6, marginBottom: 6,
}, },
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
fontSize: 15, fontSize: 15,
color: "#000", color: colors.text,
backgroundColor: "#fff", backgroundColor: colors.surface,
}, },
selectButton: { selectButton: {
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
flexDirection: "row", flexDirection: "row",
justifyContent: "space-between", justifyContent: "space-between",
alignItems: "center", alignItems: "center",
backgroundColor: "#fff", backgroundColor: colors.surface,
}, },
selectButtonText: { selectButtonText: {
fontSize: 15, fontSize: 15,
color: "#000", color: colors.text,
}, },
optionsList: { optionsList: {
position: "absolute", position: "absolute",
@@ -196,10 +199,10 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
marginTop: 4, marginTop: 4,
backgroundColor: "#fff", backgroundColor: colors.surface,
maxHeight: 100, maxHeight: 100,
zIndex: 1000, zIndex: 1000,
elevation: 5, elevation: 5,
@@ -212,18 +215,18 @@ const styles = StyleSheet.create({
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 12, paddingVertical: 12,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#f0f0f0", borderBottomColor: colors.separator,
}, },
optionText: { optionText: {
fontSize: 15, fontSize: 15,
color: "#000", color: colors.text,
}, },
optionsStatusFishList: { optionsStatusFishList: {
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
marginTop: 4, marginTop: 4,
backgroundColor: "#fff", backgroundColor: colors.surface,
maxHeight: 120, maxHeight: 120,
zIndex: 1000, zIndex: 1000,
elevation: 5, elevation: 5,
@@ -238,10 +241,10 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
marginTop: 4, marginTop: 4,
backgroundColor: "#fff", backgroundColor: colors.surface,
maxHeight: 180, maxHeight: 180,
zIndex: 1000, zIndex: 1000,
elevation: 5, elevation: 5,
@@ -257,15 +260,15 @@ const styles = StyleSheet.create({
fishCardTitle: { fishCardTitle: {
fontSize: 16, fontSize: 16,
fontWeight: "600", fontWeight: "600",
color: "#000", color: colors.text,
}, },
fishCardSubtitle: { fishCardSubtitle: {
fontSize: 15, fontSize: 15,
color: "#ff6600", color: colors.warning,
marginTop: 0, marginTop: 0,
}, },
addFishButton: { addFishButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 12, marginBottom: 12,
@@ -288,5 +291,3 @@ const styles = StyleSheet.create({
color: "#fff", color: "#fff",
}, },
}); });
export default styles;

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

@@ -1,8 +1,10 @@
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) =>
StyleSheet.create({
closeIconButton: { closeIconButton: {
backgroundColor: "#FF3B30", backgroundColor: colors.error,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
@@ -10,7 +12,7 @@ const styles = StyleSheet.create({
}, },
container: { container: {
flex: 1, flex: 1,
backgroundColor: "#f5f5f5", backgroundColor: colors.backgroundSecondary,
}, },
header: { header: {
flexDirection: "row", flexDirection: "row",
@@ -19,14 +21,14 @@ const styles = StyleSheet.create({
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 30, paddingTop: 30,
paddingBottom: 16, paddingBottom: 16,
backgroundColor: "#fff", backgroundColor: colors.surface,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: "#eee", borderBottomColor: colors.separator,
}, },
title: { title: {
fontSize: 22, fontSize: 22,
fontWeight: "700", fontWeight: "700",
color: "#000", color: colors.text,
flex: 1, flex: 1,
}, },
headerButtons: { headerButtons: {
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
padding: 4, padding: 4,
}, },
editIconButton: { editIconButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
borderRadius: 10, borderRadius: 10,
padding: 10, padding: 10,
justifyContent: "center", justifyContent: "center",
@@ -49,12 +51,12 @@ const styles = StyleSheet.create({
paddingVertical: 6, paddingVertical: 6,
}, },
cancelButtonText: { cancelButtonText: {
color: "#007AFF", color: colors.primary,
fontSize: 16, fontSize: 16,
fontWeight: "600", fontWeight: "600",
}, },
saveButton: { saveButton: {
backgroundColor: "#007AFF", backgroundColor: colors.primary,
paddingHorizontal: 16, paddingHorizontal: 16,
paddingVertical: 6, paddingVertical: 6,
borderRadius: 6, borderRadius: 6,
@@ -72,7 +74,7 @@ const styles = StyleSheet.create({
padding: 16, padding: 16,
}, },
itemCard: { itemCard: {
backgroundColor: "#fff", backgroundColor: colors.surfaceSecondary,
borderRadius: 12, borderRadius: 12,
padding: 16, padding: 16,
marginBottom: 12, marginBottom: 12,
@@ -92,39 +94,39 @@ const styles = StyleSheet.create({
label: { label: {
fontSize: 13, fontSize: 13,
fontWeight: "600", fontWeight: "600",
color: "#666", color: colors.textSecondary,
marginBottom: 6, marginBottom: 6,
}, },
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: "#007AFF", borderColor: colors.primary,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
fontSize: 15, fontSize: 15,
color: "#000", color: colors.text,
backgroundColor: "#fff", backgroundColor: colors.surface,
}, },
inputDisabled: { inputDisabled: {
borderColor: "#ddd", borderColor: colors.border,
backgroundColor: "#f9f9f9", backgroundColor: colors.backgroundSecondary,
color: "#666", color: colors.textSecondary,
}, },
totalContainer: { totalContainer: {
backgroundColor: "#fff5e6", backgroundColor: colors.backgroundSecondary,
borderRadius: 8, borderRadius: 8,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,
borderWidth: 1, borderWidth: 1,
borderColor: "#ffd699", borderColor: colors.border,
}, },
totalText: { totalText: {
fontSize: 16, fontSize: 16,
fontWeight: "700", fontWeight: "700",
color: "#ff6600", color: colors.warning,
}, },
footerTotal: { footerTotal: {
backgroundColor: "#fff", backgroundColor: colors.card,
borderRadius: 12, borderRadius: 12,
padding: 20, padding: 20,
marginTop: 8, marginTop: 8,
@@ -141,13 +143,11 @@ const styles = StyleSheet.create({
footerLabel: { footerLabel: {
fontSize: 18, fontSize: 18,
fontWeight: "700", fontWeight: "700",
color: "#007bff", color: colors.primary,
}, },
footerAmount: { footerAmount: {
fontSize: 20, fontSize: 20,
fontWeight: "700", fontWeight: "700",
color: "#ff6600", color: colors.warning,
}, },
}); });
export default styles;