native_convex_CRM/app/components/customerDetailHeader/customerDetailHeader.styles.ts

82 lines
1.7 KiB
TypeScript

import { StyleSheet } from 'react-native';
import { ThemeColors } from '../../theme';
export const getStyles = (colors: ThemeColors) =>
StyleSheet.create({
card: {
backgroundColor: colors.card,
borderRadius: 14,
padding: 14,
marginBottom: 16,
borderWidth: 1,
borderColor: colors.border,
shadowColor: '#0F172A',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.05,
shadowRadius: 4,
elevation: 2,
},
topRow: {
flexDirection: 'row',
alignItems: 'center',
},
avatarCircle: {
width: 50,
height: 50,
borderRadius: 25,
backgroundColor: colors.icon,
justifyContent: 'center',
alignItems: 'center',
marginRight: 12,
flexShrink: 0,
},
avatarInitial: {
color: '#FFFFFF',
fontSize: 18,
fontWeight: '700',
},
info: {
flex: 1,
marginRight: 8,
},
name: {
fontSize: 15,
fontWeight: '700',
color: colors.text,
marginBottom: 1,
},
company: {
fontSize: 12,
color: colors.textSecondary,
marginBottom: 2,
},
dateText: {
fontSize: 11,
color: colors.textMuted,
marginTop: 2,
},
statusBadge: {
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 20,
flexShrink: 0,
alignSelf: 'flex-start',
},
activeBadge: {
backgroundColor: '#D1FAE5',
},
inactiveBadge: {
backgroundColor: '#FEE2E2',
},
statusText: {
fontSize: 10,
fontWeight: '700',
},
activeText: {
color: '#059669',
},
inactiveText: {
color: '#DC2626',
},
});