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

View File

@ -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,
top: -8,
right: -6,
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,