frontend: add subtle section header
Parents:
7d2b76a1 file(s) changed
- frontend/components/ui/Sections.tsx +32 -4
frontend/components/ui/Sections.tsx
@@ -31,6 +31,7 @@ subtitle?: string;
31 31 actionLabel?: string;
32 32 onActionPress?: () => void;
33 33 style?: ViewStyle;
34 + variant?: 'default' | 'subtle';
34 35 }
35 36
36 37 // XXX: A Section must either have a label as a pill/informative thing
@@ -41,20 +42,47 @@ subtitle,
41 42 info,
42 43 actionLabel,
43 44 onActionPress,
45 + variant,
44 46 style,
45 47 }) => {
46 48 const textColor = useThemeColor({}, 'text');
47 49 const tintColor = useThemeColor({}, 'tint');
48 50 const textSecondaryColor = useThemeColor({}, 'textSecondary')
49 51
52 + const getTextColor = () => {
53 + switch (variant) {
54 + case 'subtle':
55 + return textSecondaryColor;
56 + default:
57 + return textColor;
58 + }
59 + };
60 +
61 + const getFont = () => {
62 + switch (variant) {
63 + case 'subtle':
64 + return {
65 + fontSize: 11,
66 + fontWeight: '600',
67 + letterSpacing: 0.8,
68 + color: Colors.light.textSecondary,
69 + textTransform: 'uppercase',
70 + };
71 + default:
72 + return {
73 + fontSize: Typography.headlineMd.fontSize,
74 + fontWeight: Typography.headlineMd.fontWeight,
75 + };
76 + }
77 + }
78 +
50 79 const styles = StyleSheet.create({
51 80 headerContainer: {
52 - marginBottom: (Spacing.cardGap * 2),
81 + marginBottom: variant == 'subtle' ? 10 : (Spacing.cardGap * 2),
53 82 },
54 83 title: {
55 - fontSize: Typography.headlineMd.fontSize,
56 - fontWeight: Typography.headlineMd.fontWeight,
57 - color: textColor,
84 + color: getTextColor(),
85 + ...getFont(),
58 86 },
59 87 subtitle: {
60 88 fontSize: 14,