Fix bottom bar badge text padding (#10162)

This commit is contained in:
Samuel Newman
2026-04-02 11:51:54 -07:00
committed by GitHub
parent b9f3d04d65
commit 9fe808f8a8
3 changed files with 17 additions and 9 deletions
+8 -2
View File
@@ -400,10 +400,16 @@ function Btn({
a.rounded_full, a.rounded_full,
{backgroundColor: t.palette.primary_500}, {backgroundColor: t.palette.primary_500},
]}> ]}>
<Text style={styles.notificationCountLabel}>{notificationCount}</Text> <Text
style={styles.notificationCountLabel}
maxFontSizeMultiplier={1.5}>
{notificationCount}
</Text>
</View> </View>
) : hasNew ? ( ) : hasNew ? (
<View style={[styles.hasNewBadge, a.rounded_full]} /> <View
style={[styles.hasNewBadge, {backgroundColor: t.palette.primary_500}]}
/>
) : null} ) : null}
</PressableScale> </PressableScale>
) )
@@ -1,6 +1,5 @@
import {StyleSheet} from 'react-native' import {StyleSheet} from 'react-native'
import {colors} from '#/lib/styles'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
export const styles = StyleSheet.create({ export const styles = StyleSheet.create({
@@ -24,8 +23,9 @@ export const styles = StyleSheet.create({
position: 'absolute', position: 'absolute',
left: '52%', left: '52%',
top: 8, top: 8,
paddingHorizontal: 4, paddingHorizontal: 5,
paddingBottom: 1, paddingTop: 1,
paddingBottom: 2,
borderRadius: 6, borderRadius: 6,
zIndex: 1, zIndex: 1,
}, },
@@ -37,8 +37,9 @@ export const styles = StyleSheet.create({
notificationCountLabel: { notificationCountLabel: {
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
color: colors.white, color: 'white',
fontVariant: ['tabular-nums'], fontVariant: ['tabular-nums'],
includeFontPadding: false,
}, },
hasNewBadge: { hasNewBadge: {
position: 'absolute', position: 'absolute',
@@ -47,8 +48,7 @@ export const styles = StyleSheet.create({
top: 10, top: 10,
width: 8, width: 8,
height: 8, height: 8,
backgroundColor: colors.blue3, borderRadius: 4,
borderRadius: 6,
zIndex: 1, zIndex: 1,
}, },
ctrlIcon: { ctrlIcon: {
+3 -1
View File
@@ -313,7 +313,9 @@ const NavItem: React.FC<{
<Text style={styles.notificationCountLabel}>{notificationCount}</Text> <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
</View> </View>
) : hasNew ? ( ) : hasNew ? (
<View style={styles.hasNewBadge} /> <View
style={[styles.hasNewBadge, {backgroundColor: t.palette.primary_500}]}
/>
) : null} ) : null}
</Link> </Link>
) )