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

110 lines
2.3 KiB
TypeScript

import { StyleSheet } from 'react-native';
import { ThemeColors } from '../../theme';
export const getStyles = (colors: ThemeColors) =>
StyleSheet.create({
headerCard: {
backgroundColor: colors.card,
borderRadius: 16,
padding: 20,
alignItems: 'center',
marginBottom: 16,
shadowColor: '#0F172A',
shadowOffset: { width: 0, height: 3 },
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 3,
},
avatarCircle: {
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: colors.icon,
justifyContent: 'center',
alignItems: 'center',
marginBottom: 12,
},
avatarInitial: {
color: '#FFFFFF',
fontSize: 26,
fontWeight: '700',
},
companyName: {
fontSize: 20,
fontWeight: '800',
color: colors.text,
textAlign: 'center',
},
fullName: {
fontSize: 14,
color: colors.textSecondary,
marginTop: 4,
textAlign: 'center',
},
badgeRow: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
gap: 8,
},
badge: {
paddingHorizontal: 10,
paddingVertical: 4,
borderRadius: 20,
},
activeBadge: {
backgroundColor: '#D1FAE5',
},
inactiveBadge: {
backgroundColor: '#FEE2E2',
},
badgeText: {
fontSize: 12,
fontWeight: '700',
},
activeBadgeText: {
color: '#059669',
},
inactiveBadgeText: {
color: '#DC2626',
},
dateText: {
fontSize: 12,
color: colors.textMuted,
},
actionRow: {
flexDirection: 'row',
gap: 10,
marginTop: 16,
width: '100%',
},
actionBtn: {
flex: 1,
flexDirection: 'row',
height: 40,
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
gap: 6,
borderWidth: 1,
},
primaryBtn: {
backgroundColor: colors.icon,
borderColor: colors.icon,
},
primaryBtnText: {
color: '#FFFFFF',
fontWeight: '600',
fontSize: 13,
},
secondaryBtn: {
backgroundColor: colors.card,
borderColor: colors.border,
},
secondaryBtnText: {
color: colors.text,
fontWeight: '600',
fontSize: 13,
},
});