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',

src/view/shell/Drawer.tsx

@@ -134,9 +134,6 @@ export const DrawerContent = observer(() => {
           <View
             style={[
               styles.menuItemCount,
-              theme.colorScheme === 'light'
-                ? styles.menuItemCountLight
-                : styles.menuItemCountDark,
               count > 99
                 ? styles.menuItemCountHundreds
                 : count > 9
@@ -358,25 +355,19 @@ const styles = StyleSheet.create({
   menuItemCount: {
     position: 'absolute',
     width: 'auto',
-    right: -8,
+    right: -6,
-    top: -8,
+    top: -4,
     backgroundColor: colors.blue3,
-    borderWidth: 2,
     paddingHorizontal: 4,
     paddingBottom: 1,
     borderRadius: 6,
   },
-  menuItemCountLight: {
-    borderColor: colors.white,
-  },
-  menuItemCountDark: {
-    borderColor: '#1B1919',
-  },
   menuItemCountTens: {
-    width: 29,
+    width: 25,
   },
   menuItemCountHundreds: {
-    width: 38,
+    right: -12,
+    width: 34,
   },
   menuItemCountLabel: {
     fontSize: 12,