Tune up notification badge rendering
parent
474b4b7840
commit
4f20a17b6e
|
@ -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',
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue