Fix bottom bar badge text padding (#10162)
This commit is contained in:
@@ -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: {
|
||||||
|
|||||||
@@ -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>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user