diff options
| -rw-r--r-- | src/view/shell/BottomBar.tsx | 18 | ||||
| -rw-r--r-- | src/view/shell/Drawer.tsx | 50 |
2 files changed, 53 insertions, 15 deletions
diff --git a/src/view/shell/BottomBar.tsx b/src/view/shell/BottomBar.tsx index 18b06968f..8db151c5a 100644 --- a/src/view/shell/BottomBar.tsx +++ b/src/view/shell/BottomBar.tsx @@ -26,6 +26,7 @@ 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) => { @@ -186,6 +187,10 @@ function Btn({ onPress?: (event: GestureResponderEvent) => void onLongPress?: (event: GestureResponderEvent) => void }) { + const borderStyle = useColorSchemeStyle( + styles.notificationCountLight, + styles.notificationCountDark, + ) return ( <TouchableOpacity style={styles.ctrl} @@ -193,7 +198,7 @@ function Btn({ onPressIn={onLongPress ? undefined : onPress} onLongPress={onLongPress}> {notificationCount ? ( - <View style={styles.notificationCount}> + <View style={[styles.notificationCount, borderStyle]}> <Text style={styles.notificationCountLabel}>{notificationCount}</Text> </View> ) : undefined} @@ -221,13 +226,20 @@ const styles = StyleSheet.create({ notificationCount: { position: 'absolute', left: '52%', - top: 10, + top: 8, backgroundColor: colors.blue3, paddingHorizontal: 4, paddingBottom: 1, - borderRadius: 8, + borderRadius: 6, + borderWidth: 2, zIndex: 1, }, + notificationCountLight: { + borderColor: colors.white, + }, + notificationCountDark: { + borderColor: colors.gray8, + }, notificationCountLabel: { fontSize: 12, fontWeight: 'bold', diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 80944e10a..a10fe4899 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -38,7 +38,7 @@ import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics' import {pluralize} from 'lib/strings/helpers' -import {getCurrentRoute, isTab, getTabState, TabState} from 'lib/routes/helpers' +import {getTabState, TabState} from 'lib/routes/helpers' import {NavigationProp} from 'lib/routes/types' export const DrawerContent = observer(() => { @@ -49,13 +49,11 @@ export const DrawerContent = observer(() => { const {track} = useAnalytics() const {isAtHome, isAtSearch, isAtNotifications} = useNavigationState( state => { - const currentRoute = state ? getCurrentRoute(state) : false return { - isAtHome: currentRoute ? isTab(currentRoute.name, 'Home') : true, - isAtSearch: currentRoute ? isTab(currentRoute.name, 'Search') : false, - isAtNotifications: currentRoute - ? isTab(currentRoute.name, 'Notifications') - : false, + isAtHome: getTabState(state, 'Home') !== TabState.Outside, + isAtSearch: getTabState(state, 'Search') !== TabState.Outside, + isAtNotifications: + getTabState(state, 'Notifications') !== TabState.Outside, } }, ) @@ -133,8 +131,21 @@ export const DrawerContent = observer(() => { <View style={[styles.menuItemIconWrapper]}> {icon} {count ? ( - <View style={styles.menuItemCount}> - <Text style={styles.menuItemCountLabel}>{count}</Text> + <View + style={[ + styles.menuItemCount, + theme.colorScheme === 'light' + ? styles.menuItemCountLight + : styles.menuItemCountDark, + count > 99 + ? styles.menuItemCountHundreds + : count > 9 + ? styles.menuItemCountTens + : undefined, + ]}> + <Text style={styles.menuItemCountLabel} numberOfLines={1}> + {count > 999 ? `${Math.round(count / 1000)}k` : count} + </Text> </View> ) : undefined} </View> @@ -346,16 +357,31 @@ const styles = StyleSheet.create({ }, menuItemCount: { position: 'absolute', - right: -6, - top: -2, - backgroundColor: colors.red3, + width: 'auto', + right: -8, + top: -8, + backgroundColor: colors.blue3, + borderWidth: 2, paddingHorizontal: 4, paddingBottom: 1, borderRadius: 6, }, + menuItemCountLight: { + borderColor: colors.white, + }, + menuItemCountDark: { + borderColor: '#1B1919', + }, + menuItemCountTens: { + width: 29, + }, + menuItemCountHundreds: { + width: 38, + }, menuItemCountLabel: { fontSize: 12, fontWeight: 'bold', + fontVariant: ['tabular-nums'], color: colors.white, }, |