Tune up notification badge rendering

src/view/shell/BottomBar.tsx

@@ -26,7 +26,6 @@ import {
 } from 'lib/icons'
 import {colors} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {getTabState, TabState} from 'lib/routes/helpers'
 
 export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
@@ -187,10 +186,6 @@ function Btn({
   onPress?: (event: GestureResponderEvent) => void
   onLongPress?: (event: GestureResponderEvent) => void
 }) {
-  const borderStyle = useColorSchemeStyle(
-    styles.notificationCountLight,
-    styles.notificationCountDark,
-  )
   return (
     <TouchableOpacity
       style={styles.ctrl}
@@ -198,7 +193,7 @@ function Btn({
       onPressIn={onLongPress ? undefined : onPress}
       onLongPress={onLongPress}>
       {notificationCount ? (
-        <View style={[styles.notificationCount, borderStyle]}>
+        <View style={[styles.notificationCount]}>
           <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
         </View>
       ) : undefined}
@@ -231,7 +226,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
     paddingBottom: 1,
     borderRadius: 6,
-    borderWidth: 2,
     zIndex: 1,
   },
   notificationCountLight: {
@@ -244,6 +238,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: 'bold',
     color: colors.white,
+    fontVariant: ['tabular-nums'],
   },
   ctrlIcon: {
     marginLeft: 'auto',