diff options
Diffstat (limited to 'src/view/shell/bottom-bar/BottomBarWeb.tsx')
| -rw-r--r-- | src/view/shell/bottom-bar/BottomBarWeb.tsx | 87 |
1 files changed, 38 insertions, 49 deletions
diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index 8b316faa5..3a0b92336 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -8,17 +8,6 @@ import {useNavigationState} from '@react-navigation/native' import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode' import {usePalette} from '#/lib/hooks/usePalette' -import { - BellIcon, - BellIconSolid, - HashtagIcon, - HomeIcon, - HomeIconSolid, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIcon, - UserIconSolid, -} from '#/lib/icons' import {clamp} from '#/lib/numbers' import {getCurrentRoute, isTab} from '#/lib/routes/helpers' import {makeProfileLink} from '#/lib/routes/links' @@ -33,8 +22,24 @@ import {Text} from '#/view/com/util/text/Text' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' import {Link} from 'view/com/util/Link' -import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' -import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeFilled} from '#/components/icons/Envelope' +import { + Bell_Filled_Corner0_Rounded as BellFilled, + Bell_Stroke2_Corner0_Rounded as Bell, +} from '#/components/icons/Bell' +import { + HomeOpen_Filled_Corner0_Rounded as HomeFilled, + HomeOpen_Stoke2_Corner0_Rounded as Home, +} from '#/components/icons/HomeOpen' +import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' +import { + Message_Stroke2_Corner0_Rounded as Message, + Message_Stroke2_Corner0_Rounded_Filled as MessageFilled, +} from '#/components/icons/Message' +import { + UserCircle_Filled_Corner0_Rounded as UserCircleFilled, + UserCircle_Stroke2_Corner0_Rounded as UserCircle, +} from '#/components/icons/UserCircle' import {styles} from './BottomBarStyles' export function BottomBarWeb() { @@ -46,6 +51,7 @@ export function BottomBarWeb() { const {requestSwitchToAccount} = useLoggedOutViewControls() const closeAllActiveElements = useCloseAllActiveElements() const gate = useGate() + const iconWidth = 26 const showSignIn = React.useCallback(() => { closeAllActiveElements() @@ -72,11 +78,10 @@ export function BottomBarWeb() { <> <NavItem routeName="Home" href="/"> {({isActive}) => { - const Icon = isActive ? HomeIconSolid : HomeIcon + const Icon = isActive ? HomeFilled : Home return ( <Icon - strokeWidth={4} - size={24} + width={iconWidth + 1} style={[styles.ctrlIcon, pal.text, styles.homeIcon]} /> ) @@ -84,14 +89,11 @@ export function BottomBarWeb() { </NavItem> <NavItem routeName="Search" href="/search"> {({isActive}) => { - const Icon = isActive - ? MagnifyingGlassIcon2Solid - : MagnifyingGlassIcon2 + const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass return ( <Icon - size={25} + width={iconWidth + 2} style={[styles.ctrlIcon, pal.text, styles.searchIcon]} - strokeWidth={1.8} /> ) }} @@ -99,42 +101,30 @@ export function BottomBarWeb() { {hasSession && ( <> - <NavItem routeName="Feeds" href="/feeds"> - {({isActive}) => { - return ( - <HashtagIcon - size={22} - style={[styles.ctrlIcon, pal.text, styles.feedsIcon]} - strokeWidth={isActive ? 4 : 2.5} - /> - ) - }} - </NavItem> - <NavItem routeName="Notifications" href="/notifications"> - {({isActive}) => { - const Icon = isActive ? BellIconSolid : BellIcon - return ( - <Icon - size={24} - strokeWidth={1.9} - style={[styles.ctrlIcon, pal.text, styles.bellIcon]} - /> - ) - }} - </NavItem> {gate('dms') && ( <NavItem routeName="Messages" href="/messages"> {({isActive}) => { - const Icon = isActive ? EnvelopeFilled : Envelope + const Icon = isActive ? MessageFilled : Message return ( <Icon - size="lg" + width={iconWidth - 1} style={[styles.ctrlIcon, pal.text, styles.messagesIcon]} /> ) }} </NavItem> )} + <NavItem routeName="Notifications" href="/notifications"> + {({isActive}) => { + const Icon = isActive ? BellFilled : Bell + return ( + <Icon + width={iconWidth} + style={[styles.ctrlIcon, pal.text, styles.bellIcon]} + /> + ) + }} + </NavItem> <NavItem routeName="Profile" href={ @@ -146,11 +136,10 @@ export function BottomBarWeb() { : '/' }> {({isActive}) => { - const Icon = isActive ? UserIconSolid : UserIcon + const Icon = isActive ? UserCircleFilled : UserCircle return ( <Icon - size={28} - strokeWidth={1.5} + width={iconWidth} style={[styles.ctrlIcon, pal.text, styles.profileIcon]} /> ) |