frontend/components: adjust scale slider margins and colors for the compact version
Parents:
774754d1 file(s) changed
- frontend/components/ui/ScaleSlider.tsx +19 -6
frontend/components/ui/ScaleSlider.tsx
@@ -56,7 +56,7 @@ return (
56 56 <View style={[styles.container, style]}>
57 57
58 58 {/* Header row */}
59 - <View style={styles.header}>
59 + <View style={[styles.header, isRich ? styles.headerRich : styles.headerCompact ]}>
60 60 <View style={styles.labelRow}>
61 61 {isRich && icon && (
62 62 <View style={styles.iconWrapper}>{icon}</View>
@@ -77,8 +77,9 @@ {valueDisplay}
77 77 </Text>
78 78 </View>
79 79
80 - <View style={{ marginRight: -10, marginLeft: -10 }}>
81 - {/* Slider */}
80 + {/* XXX: Rich variant needs some extra margin to account for icons */}
81 + <View style={{ marginRight: isRich ? -10 : -15, marginLeft: isRich ? -10 : -15 }}>
82 + {/* Slider has a glitch with the full padding of it */}
82 83 <Slider
83 84 style={styles.slider}
84 85 minimumValue={min}
@@ -120,8 +121,17 @@ header: {
120 121 flexDirection: 'row',
121 122 justifyContent: 'space-between',
122 123 alignItems: 'center',
124 + },
125 +
126 + // Rich has bigger margin than compact
127 + headerRich: {
123 128 marginBottom: 4,
124 129 },
130 +
131 + headerCompact: {
132 + marginBottom: 1
133 + },
134 +
125 135 labelRow: {
126 136 flexDirection: 'row',
127 137 alignItems: 'center',
@@ -145,11 +155,14 @@ },
145 155
146 156 // Compact variant
147 157 labelCompact: {
148 - fontSize: Theme.typography.bodyLg.fontSize,
158 + fontSize: 12,
159 + fontWeight: 600,
160 + lineHeight: 16
149 161 },
150 162 valueCompact: {
151 - fontSize: Theme.typography.bodyMd.fontSize,
152 - fontWeight: Theme.typography.bodyMd.fontWeight,
163 + fontSize: 12,
164 + lineHeight: 16,
165 + fontWeight: 600,
153 166 color: Theme.colors.light.textSecondary,
154 167 },
155 168