318 lines
7.3 KiB
TypeScript
318 lines
7.3 KiB
TypeScript
import { StyleSheet } from 'react-native';
|
|
import { typography } from '@theme';
|
|
|
|
export const getStyles = (colors: any) =>
|
|
StyleSheet.create({
|
|
// Status Card / Container
|
|
cardContainer: {
|
|
backgroundColor: colors.cardBg,
|
|
borderRadius: 16,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
overflow: 'hidden',
|
|
},
|
|
headerSection: {
|
|
padding: 16,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
headerIconContainer: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: '#E8F5E9',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 16,
|
|
},
|
|
headerIconText: {
|
|
fontSize: 24,
|
|
},
|
|
headerTextContainer: {
|
|
flex: 1,
|
|
},
|
|
statusHeaderTitle: {
|
|
fontSize: typography.fontSize.lg,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
marginBottom: 4,
|
|
},
|
|
statusHeaderDesc: {
|
|
fontSize: typography.fontSize.sm,
|
|
color: colors.textSecondary,
|
|
lineHeight: 18,
|
|
},
|
|
|
|
// Horizontal Stepper
|
|
stepperWrapper: {
|
|
paddingVertical: 20,
|
|
paddingHorizontal: 12,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
},
|
|
stepperRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
position: 'relative',
|
|
},
|
|
stepLineBackground: {
|
|
position: 'absolute',
|
|
top: 14,
|
|
left: '12%',
|
|
right: '12%',
|
|
height: 3,
|
|
backgroundColor: colors.border,
|
|
zIndex: 1,
|
|
},
|
|
stepLineActive: {
|
|
position: 'absolute',
|
|
top: 14,
|
|
left: '12%',
|
|
height: 3,
|
|
backgroundColor: colors.primary,
|
|
zIndex: 2,
|
|
},
|
|
stepItem: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
zIndex: 3,
|
|
},
|
|
stepDot: {
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 14,
|
|
backgroundColor: colors.cardBg,
|
|
borderWidth: 2,
|
|
borderColor: colors.border,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginBottom: 6,
|
|
},
|
|
stepDotCompleted: {
|
|
borderColor: colors.primary,
|
|
backgroundColor: colors.primary,
|
|
},
|
|
stepDotActive: {
|
|
borderColor: colors.primary,
|
|
backgroundColor: colors.cardBg,
|
|
borderWidth: 3,
|
|
},
|
|
stepCheckmark: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
},
|
|
stepInnerDotActive: {
|
|
width: 10,
|
|
height: 10,
|
|
borderRadius: 5,
|
|
backgroundColor: colors.primary,
|
|
},
|
|
stepLabel: {
|
|
fontSize: 11,
|
|
fontWeight: typography.fontWeight.medium,
|
|
color: colors.textSecondary,
|
|
textAlign: 'center',
|
|
},
|
|
stepLabelActive: {
|
|
color: colors.primary,
|
|
fontWeight: typography.fontWeight.bold,
|
|
},
|
|
|
|
// Driver Section
|
|
driverSection: {
|
|
padding: 16,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.border,
|
|
backgroundColor: colors.inputBg,
|
|
},
|
|
driverInfoRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
driverAvatarContainer: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: 22,
|
|
backgroundColor: colors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: 12,
|
|
},
|
|
driverAvatarText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 16,
|
|
fontWeight: typography.fontWeight.bold,
|
|
},
|
|
driverMeta: {
|
|
flex: 1,
|
|
},
|
|
driverRoleText: {
|
|
fontSize: 10,
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
color: colors.textSecondary,
|
|
fontWeight: typography.fontWeight.semibold,
|
|
marginBottom: 2,
|
|
},
|
|
driverNameText: {
|
|
fontSize: typography.fontSize.md,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.text,
|
|
},
|
|
driverVehicleText: {
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
marginTop: 2,
|
|
},
|
|
ratingBadge: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: '#FFF9C4',
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
},
|
|
ratingText: {
|
|
fontSize: 12,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: '#F57F17',
|
|
},
|
|
driverActionsRow: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
actionButton: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: 40,
|
|
borderRadius: 8,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
},
|
|
callButton: {
|
|
backgroundColor: colors.primary,
|
|
borderColor: colors.primary,
|
|
marginRight: 6,
|
|
},
|
|
messageButton: {
|
|
backgroundColor: colors.cardBg,
|
|
borderColor: colors.border,
|
|
marginLeft: 6,
|
|
},
|
|
actionIcon: {
|
|
marginRight: 6,
|
|
fontSize: 16,
|
|
},
|
|
callButtonText: {
|
|
color: '#FFFFFF',
|
|
fontWeight: typography.fontWeight.bold,
|
|
fontSize: typography.fontSize.sm,
|
|
},
|
|
messageButtonText: {
|
|
color: colors.text,
|
|
fontWeight: typography.fontWeight.semibold,
|
|
fontSize: typography.fontSize.sm,
|
|
},
|
|
|
|
// Collapsible Trigger / Detailed Logs
|
|
toggleSection: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
paddingVertical: 12,
|
|
},
|
|
toggleButton: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 4,
|
|
},
|
|
toggleButtonText: {
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.primary,
|
|
marginRight: 4,
|
|
},
|
|
toggleChevron: {
|
|
fontSize: 12,
|
|
color: colors.primary,
|
|
},
|
|
detailedTimelineWrapper: {
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 16,
|
|
},
|
|
|
|
// Legacy vertical timeline classes (re-styled for premium feel)
|
|
timelineRow: {
|
|
flexDirection: 'row',
|
|
},
|
|
timelineDotColumn: {
|
|
alignItems: 'center',
|
|
width: 24,
|
|
},
|
|
timelineDot: {
|
|
width: 14,
|
|
height: 14,
|
|
borderRadius: 7,
|
|
borderWidth: 2,
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.cardBg,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginTop: 4,
|
|
},
|
|
timelineDotCompleted: {
|
|
borderColor: colors.primary,
|
|
backgroundColor: colors.primary,
|
|
},
|
|
timelineDotCancelled: {
|
|
borderColor: colors.error,
|
|
backgroundColor: colors.error,
|
|
},
|
|
timelineCheck: {
|
|
color: '#FFFFFF',
|
|
fontSize: 8,
|
|
fontWeight: 'bold',
|
|
},
|
|
timelineLine: {
|
|
width: 2,
|
|
flex: 1,
|
|
minHeight: 36,
|
|
backgroundColor: colors.border,
|
|
marginVertical: 4,
|
|
},
|
|
timelineLineCompleted: {
|
|
backgroundColor: colors.primary,
|
|
},
|
|
timelineContent: {
|
|
flex: 1,
|
|
paddingBottom: 18,
|
|
paddingLeft: 16,
|
|
},
|
|
timelineLabelCompleted: {
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.semibold,
|
|
color: colors.text,
|
|
},
|
|
timelineLabelPending: {
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.regular,
|
|
color: colors.textSecondary,
|
|
},
|
|
timelineLabelCancelled: {
|
|
fontSize: typography.fontSize.sm,
|
|
fontWeight: typography.fontWeight.bold,
|
|
color: colors.error,
|
|
},
|
|
timelineTime: {
|
|
fontSize: typography.fontSize.xs,
|
|
color: colors.textSecondary,
|
|
marginTop: 4,
|
|
},
|
|
});
|