Files
sgw-owner-app/components/tripInfo/modal/style/NetDetailModal.styles.ts
2025-11-28 16:59:57 +07:00

294 lines
6.5 KiB
TypeScript

import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native";
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,
},
closeButton: {
padding: 4,
},
closeIconButton: {
backgroundColor: colors.error,
borderRadius: 10,
padding: 10,
justifyContent: "center",
alignItems: "center",
},
content: {
flex: 1,
padding: 16,
marginBottom: 15,
},
infoCard: {
backgroundColor: colors.card,
borderRadius: 12,
padding: 16,
marginBottom: 35,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
},
infoRow: {
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: colors.separator,
},
infoLabel: {
fontSize: 13,
fontWeight: "600",
color: colors.textSecondary,
marginBottom: 6,
},
infoValue: {
fontSize: 16,
color: colors.text,
fontWeight: "500",
},
statusBadge: {
paddingHorizontal: 12,
paddingVertical: 6,
borderRadius: 8,
alignSelf: "flex-start",
},
statusBadgeCompleted: {
backgroundColor: colors.success,
},
statusBadgeInProgress: {
backgroundColor: colors.warning,
},
statusBadgeText: {
fontSize: 14,
fontWeight: "600",
color: "#fff",
},
statusBadgeTextCompleted: {
color: "#fff",
},
statusBadgeTextInProgress: {
color: "#fff",
},
headerButtons: {
flexDirection: "row",
alignItems: "center",
gap: 12,
},
editButton: {
padding: 4,
},
editIconButton: {
backgroundColor: colors.primary,
borderRadius: 10,
padding: 10,
justifyContent: "center",
alignItems: "center",
},
cancelButton: {
paddingHorizontal: 12,
paddingVertical: 6,
},
cancelButtonText: {
color: colors.primary,
fontSize: 16,
fontWeight: "600",
},
saveButton: {
backgroundColor: colors.primary,
paddingHorizontal: 16,
paddingVertical: 6,
borderRadius: 6,
},
saveButtonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600",
},
sectionHeader: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginTop: 16,
marginBottom: 12,
paddingHorizontal: 4,
},
sectionTitle: {
fontSize: 18,
fontWeight: "700",
color: colors.text,
},
totalCatchText: {
fontSize: 16,
fontWeight: "600",
color: colors.primary,
},
fishCard: {
position: "relative",
backgroundColor: colors.card,
borderRadius: 12,
padding: 16,
marginBottom: 12,
shadowColor: "#000",
shadowOpacity: 0.05,
shadowRadius: 4,
shadowOffset: { width: 0, height: 2 },
elevation: 2,
},
fieldGroup: {
marginBottom: 12,
marginTop: 0,
},
rowGroup: {
flexDirection: "row",
marginBottom: 12,
},
label: {
fontSize: 13,
fontWeight: "600",
color: colors.textSecondary,
marginBottom: 6,
},
input: {
borderWidth: 1,
borderColor: colors.primary,
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 10,
fontSize: 15,
color: colors.text,
backgroundColor: colors.surface,
},
selectButton: {
borderWidth: 1,
borderColor: colors.primary,
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 10,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: colors.surface,
},
selectButtonText: {
fontSize: 15,
color: colors.text,
},
optionsList: {
position: "absolute",
top: 46,
left: 0,
right: 0,
borderWidth: 1,
borderColor: colors.primary,
borderRadius: 8,
marginTop: 4,
backgroundColor: colors.surface,
maxHeight: 100,
zIndex: 1000,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
optionItem: {
paddingHorizontal: 12,
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: colors.separator,
},
optionText: {
fontSize: 15,
color: colors.text,
},
optionsStatusFishList: {
borderWidth: 1,
borderColor: colors.primary,
borderRadius: 8,
marginTop: 4,
backgroundColor: colors.surface,
maxHeight: 120,
zIndex: 1000,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
fishNameDropdown: {
position: "absolute",
top: 46,
left: 0,
right: 0,
borderWidth: 1,
borderColor: colors.primary,
borderRadius: 8,
marginTop: 4,
backgroundColor: colors.surface,
maxHeight: 180,
zIndex: 1000,
elevation: 5,
shadowColor: "#000",
shadowOpacity: 0.15,
shadowRadius: 8,
shadowOffset: { width: 0, height: 4 },
},
fishCardHeaderContent: {
flexDirection: "row",
gap: 5,
},
fishCardTitle: {
fontSize: 16,
fontWeight: "600",
color: colors.text,
},
fishCardSubtitle: {
fontSize: 15,
color: colors.warning,
marginTop: 0,
},
addFishButton: {
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,
},
addFishButtonContent: {
flexDirection: "row",
alignItems: "center",
gap: 8,
},
addFishButtonText: {
fontSize: 16,
fontWeight: "600",
color: "#fff",
},
});