Tune up notification badge rendering

zio/stable
Paul Frazee 2023-03-15 16:39:45 -05:00
parent 474b4b7840
commit 4f20a17b6e
2 changed files with 7 additions and 21 deletions

View File

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

View File

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