An ATproto social media client -- with an independent Appview.
Tune up notification badge rendering
+7
-21
+2
-7
src/view/shell/BottomBar.tsx
+2
-7
src/view/shell/BottomBar.tsx
···
26
26
} from 'lib/icons'
27
27
import {colors} from 'lib/styles'
28
28
import {usePalette} from 'lib/hooks/usePalette'
29
-
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
30
29
import {getTabState, TabState} from 'lib/routes/helpers'
31
30
32
31
export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
···
187
186
onPress?: (event: GestureResponderEvent) => void
188
187
onLongPress?: (event: GestureResponderEvent) => void
189
188
}) {
190
-
const borderStyle = useColorSchemeStyle(
191
-
styles.notificationCountLight,
192
-
styles.notificationCountDark,
193
-
)
194
189
return (
195
190
<TouchableOpacity
196
191
style={styles.ctrl}
···
198
193
onPressIn={onLongPress ? undefined : onPress}
199
194
onLongPress={onLongPress}>
200
195
{notificationCount ? (
201
-
<View style={[styles.notificationCount, borderStyle]}>
196
+
<View style={[styles.notificationCount]}>
202
197
<Text style={styles.notificationCountLabel}>{notificationCount}</Text>
203
198
</View>
204
199
) : undefined}
···
231
226
paddingHorizontal: 4,
232
227
paddingBottom: 1,
233
228
borderRadius: 6,
234
-
borderWidth: 2,
235
229
zIndex: 1,
236
230
},
237
231
notificationCountLight: {
···
244
238
fontSize: 12,
245
239
fontWeight: 'bold',
246
240
color: colors.white,
241
+
fontVariant: ['tabular-nums'],
247
242
},
248
243
ctrlIcon: {
249
244
marginLeft: 'auto',
+5
-14
src/view/shell/Drawer.tsx
+5
-14
src/view/shell/Drawer.tsx
···
134
134
<View
135
135
style={[
136
136
styles.menuItemCount,
137
-
theme.colorScheme === 'light'
138
-
? styles.menuItemCountLight
139
-
: styles.menuItemCountDark,
140
137
count > 99
141
138
? styles.menuItemCountHundreds
142
139
: count > 9
···
358
355
menuItemCount: {
359
356
position: 'absolute',
360
357
width: 'auto',
361
-
right: -8,
362
-
top: -8,
358
+
right: -6,
359
+
top: -4,
363
360
backgroundColor: colors.blue3,
364
-
borderWidth: 2,
365
361
paddingHorizontal: 4,
366
362
paddingBottom: 1,
367
363
borderRadius: 6,
368
364
},
369
-
menuItemCountLight: {
370
-
borderColor: colors.white,
371
-
},
372
-
menuItemCountDark: {
373
-
borderColor: '#1B1919',
374
-
},
375
365
menuItemCountTens: {
376
-
width: 29,
366
+
width: 25,
377
367
},
378
368
menuItemCountHundreds: {
379
-
width: 38,
369
+
right: -12,
370
+
width: 34,
380
371
},
381
372
menuItemCountLabel: {
382
373
fontSize: 12,