diff options
Diffstat (limited to 'src/view/shell/bottom-bar/BottomBarWeb.tsx')
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 106 |
1 files changed, 61 insertions, 45 deletions
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index 35d385593..9b34159d7 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -1,18 +1,14 @@ import React from 'react' import {View} from 'react-native' import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigationState} from '@react-navigation/native' import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform' -import {usePalette} from '#/lib/hooks/usePalette' -import {clamp} from '#/lib/numbers' import {getCurrentRoute, isTab} from '#/lib/routes/helpers' import {makeProfileLink} from '#/lib/routes/links' import {CommonNavigatorParams} from '#/lib/routes/types' -import {s} from '#/lib/styles' import {useUnreadMessageCount} from '#/state/queries/messages/list-converations' import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useSession} from '#/state/session' @@ -23,6 +19,7 @@ import {Link} from '#/view/com/util/Link' import {Text} from '#/view/com/util/text/Text' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import {atoms as a, useTheme} from '#/alf' import { Bell_Filled_Corner0_Rounded as BellFilled, Bell_Stroke2_Corner0_Rounded as Bell, @@ -46,8 +43,7 @@ import {styles} from './BottomBarStyles' export function BottomBarWeb() { const {_} = useLingui() const {hasSession, currentAccount} = useSession() - const pal = usePalette('default') - const safeAreaInsets = useSafeAreaInsets() + const t = useTheme() const footerMinimalShellTransform = useMinimalShellFooterTransform() const {requestSwitchToAccount} = useLoggedOutViewControls() const closeAllActiveElements = useCloseAllActiveElements() @@ -69,12 +65,12 @@ export function BottomBarWeb() { return ( <Animated.View + role="navigation" style={[ styles.bottomBar, styles.bottomBarWeb, - pal.view, - pal.border, - {paddingBottom: clamp(safeAreaInsets.bottom, 15, 30)}, + t.atoms.bg, + t.atoms.border_contrast_low, footerMinimalShellTransform, ]}> {hasSession ? ( @@ -84,8 +80,9 @@ export function BottomBarWeb() { const Icon = isActive ? HomeFilled : Home return ( <Icon + aria-hidden={true} width={iconWidth + 1} - style={[styles.ctrlIcon, pal.text, styles.homeIcon]} + style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]} /> ) }} @@ -95,8 +92,9 @@ export function BottomBarWeb() { const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass return ( <Icon + aria-hidden={true} width={iconWidth + 2} - style={[styles.ctrlIcon, pal.text, styles.searchIcon]} + style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]} /> ) }} @@ -104,43 +102,41 @@ export function BottomBarWeb() { {hasSession && ( <> - <NavItem routeName="Messages" href="/messages"> + <NavItem + routeName="Messages" + href="/messages" + badge={ + unreadMessageCount.count > 0 + ? unreadMessageCount.numUnread + : undefined + }> {({isActive}) => { const Icon = isActive ? MessageFilled : Message return ( - <> - <Icon - width={iconWidth - 1} - style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} - /> - {unreadMessageCount.count > 0 && ( - <View style={styles.notificationCount}> - <Text style={styles.notificationCountLabel}> - {unreadMessageCount.numUnread} - </Text> - </View> - )} - </> + <Icon + aria-hidden={true} + width={iconWidth - 1} + style={[ + styles.ctrlIcon, + t.atoms.text, + styles.messagesIcon, + ]} + /> ) }} </NavItem> - <NavItem routeName="Notifications" href="/notifications"> + <NavItem + routeName="Notifications" + href="/notifications" + badge={notificationCountStr}> {({isActive}) => { const Icon = isActive ? BellFilled : Bell return ( - <> - <Icon - width={iconWidth} - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} - /> - {notificationCountStr !== '' && ( - <View style={styles.notificationCount}> - <Text style={styles.notificationCountLabel}> - {notificationCountStr} - </Text> - </View> - )} - </> + <Icon + aria-hidden={true} + width={iconWidth} + style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]} + /> ) }} </NavItem> @@ -158,8 +154,13 @@ export function BottomBarWeb() { const Icon = isActive ? UserCircleFilled : UserCircle return ( <Icon + aria-hidden={true} width={iconWidth} - style={[styles.ctrlIcon, pal.text, styles.profileIcon]} + style={[ + styles.ctrlIcon, + t.atoms.text, + styles.profileIcon, + ]} /> ) }} @@ -184,7 +185,7 @@ export function BottomBarWeb() { <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}> <Logo width={32} /> <View style={{paddingTop: 4}}> - <Logotype width={80} fill={pal.text.color} /> + <Logotype width={80} fill={t.atoms.text.color} /> </View> </View> @@ -193,7 +194,7 @@ export function BottomBarWeb() { onPress={showCreateAccount} accessibilityHint={_(msg`Sign up`)} accessibilityLabel={_(msg`Sign up`)}> - <Text type="md" style={[{color: 'white'}, s.bold]}> + <Text type="md" style={[{color: 'white'}, a.font_bold]}> <Trans>Sign up</Trans> </Text> </Button> @@ -203,7 +204,7 @@ export function BottomBarWeb() { onPress={showSignIn} accessibilityHint={_(msg`Sign in`)} accessibilityLabel={_(msg`Sign in`)}> - <Text type="md" style={[pal.text, s.bold]}> + <Text type="md" style={[t.atoms.text, a.font_bold]}> <Trans>Sign in</Trans> </Text> </Button> @@ -219,7 +220,9 @@ const NavItem: React.FC<{ children: (props: {isActive: boolean}) => React.ReactChild href: string routeName: string -}> = ({children, href, routeName}) => { + badge?: string +}> = ({children, href, routeName, badge}) => { + const {_} = useLingui() const {currentAccount} = useSession() const currentRoute = useNavigationState(state => { if (!state) { @@ -235,8 +238,21 @@ const NavItem: React.FC<{ : isTab(currentRoute.name, routeName) return ( - <Link href={href} style={styles.ctrl} navigationAction="navigate"> + <Link + href={href} + style={[styles.ctrl, a.pb_lg]} + navigationAction="navigate" + aria-role="link" + aria-label={routeName} + accessible={true}> {children({isActive})} + {!!badge && ( + <View + style={styles.notificationCount} + aria-label={_(msg`${badge} unread items`)}> + <Text style={styles.notificationCountLabel}>{badge}</Text> + </View> + )} </Link> ) } |