diff options
Diffstat (limited to 'src/view/shell/desktop/LeftNav.tsx')
| -rw-r--r-- | src/view/shell/desktop/LeftNav.tsx | 161 |
1 files changed, 52 insertions, 109 deletions
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index 1d27a10a4..b1f58afed 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -23,21 +23,6 @@ import {useSession} from '#/state/session' import {useComposerControls} from '#/state/shell/composer' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import { - BellIcon, - BellIconSolid, - CogIcon, - CogIconSolid, - ComposeIcon2, - HashtagIcon, - HomeIcon, - HomeIconSolid, - ListIcon, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIcon, - UserIconSolid, -} from 'lib/icons' import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' @@ -48,8 +33,37 @@ import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {PressableWithHover} from 'view/com/util/PressableWithHover' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' -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 { + BulletList_Filled_Corner0_Rounded as ListFilled, + BulletList_Stroke2_Corner0_Rounded as List, +} from '#/components/icons/BulletList' +import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' +import { + Hashtag_Filled_Corner0_Rounded as HashtagFilled, + Hashtag_Stroke2_Corner0_Rounded as Hashtag, +} from '#/components/icons/Hashtag' +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 { + SettingsGear2_Filled_Corner0_Rounded as SettingsFilled, + SettingsGear2_Stroke2_Corner0_Rounded as Settings, +} from '#/components/icons/SettingsGear2' +import { + UserCircle_Filled_Corner0_Rounded as UserCircleFilled, + UserCircle_Stroke2_Corner0_Rounded as UserCircle, +} from '#/components/icons/UserCircle' import {router} from '../../../routes' function ProfileCard() { @@ -256,11 +270,7 @@ function ComposeBtn() { accessibilityLabel={_(msg`New post`)} accessibilityHint=""> <View style={styles.newPostBtnIconWrapper}> - <ComposeIcon2 - size={19} - strokeWidth={2} - style={styles.newPostBtnLabel} - /> + <EditBig width={19} style={styles.newPostBtnLabel} /> </View> <Text type="button" style={styles.newPostBtnLabel}> <Trans context="action">New Post</Trans> @@ -278,6 +288,7 @@ export function DesktopLeftNav() { const numUnreadNotifications = useUnreadNotifications() const numUnreadMessages = useUnreadMessageCount() const gate = useGate() + const iconWidth = 28 if (!hasSession && !isDesktop) { return null @@ -305,134 +316,66 @@ export function DesktopLeftNav() { <NavItem href="/" - icon={<HomeIcon size={isDesktop ? 24 : 28} style={pal.text} />} - iconFilled={ - <HomeIconSolid - strokeWidth={4} - size={isDesktop ? 24 : 28} - style={pal.text} - /> - } + icon={<Home width={iconWidth} style={pal.text} />} + iconFilled={<HomeFilled width={iconWidth} style={pal.text} />} label={_(msg`Home`)} /> <NavItem href="/search" - icon={ - <MagnifyingGlassIcon2 - strokeWidth={2} - size={isDesktop ? 24 : 26} - style={pal.text} - /> - } + icon={<MagnifyingGlass style={pal.text} width={iconWidth} />} iconFilled={ - <MagnifyingGlassIcon2Solid - strokeWidth={2} - size={isDesktop ? 24 : 26} - style={pal.text} - /> + <MagnifyingGlassFilled style={pal.text} width={iconWidth} /> } label={_(msg`Search`)} /> <NavItem href="/notifications" count={numUnreadNotifications} - icon={ - <BellIcon - strokeWidth={2} - size={isDesktop ? 24 : 26} - style={pal.text} - /> - } - iconFilled={ - <BellIconSolid - strokeWidth={1.5} - size={isDesktop ? 24 : 26} - style={pal.text} - /> - } + icon={<Bell width={iconWidth} style={pal.text} />} + iconFilled={<BellFilled width={iconWidth} style={pal.text} />} label={_(msg`Notifications`)} /> {gate('dms') && ( <NavItem href="/messages" count={numUnreadMessages.numUnread} - icon={<Envelope style={pal.text} width={isDesktop ? 26 : 30} />} - iconFilled={ - <EnvelopeFilled style={pal.text} width={isDesktop ? 26 : 30} /> - } + icon={<Message style={pal.text} width={iconWidth} />} + iconFilled={<MessageFilled style={pal.text} width={iconWidth} />} label={_(msg`Messages`)} /> )} <NavItem href="/feeds" icon={ - <HashtagIcon - strokeWidth={2.25} + <Hashtag style={pal.text as FontAwesomeIconStyle} - size={isDesktop ? 24 : 28} + width={iconWidth} /> } iconFilled={ - <HashtagIcon - strokeWidth={4} + <HashtagFilled style={pal.text as FontAwesomeIconStyle} - size={isDesktop ? 24 : 28} + width={iconWidth} /> } label={_(msg`Feeds`)} /> <NavItem href="/lists" - icon={ - <ListIcon - style={pal.text} - size={isDesktop ? 26 : 30} - strokeWidth={2} - /> - } - iconFilled={ - <ListIcon - style={pal.text} - size={isDesktop ? 26 : 30} - strokeWidth={3} - /> - } + icon={<List style={pal.text} width={iconWidth} />} + iconFilled={<ListFilled style={pal.text} width={iconWidth} />} label={_(msg`Lists`)} /> <NavItem href={currentAccount ? makeProfileLink(currentAccount) : '/'} - icon={ - <UserIcon - strokeWidth={1.75} - size={isDesktop ? 28 : 30} - style={pal.text} - /> - } - iconFilled={ - <UserIconSolid - strokeWidth={1.75} - size={isDesktop ? 28 : 30} - style={pal.text} - /> - } + icon={<UserCircle width={iconWidth} style={pal.text} />} + iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />} label={_(msg`Profile`)} /> <NavItem href="/settings" - icon={ - <CogIcon - strokeWidth={1.75} - size={isDesktop ? 28 : 32} - style={pal.text} - /> - } - iconFilled={ - <CogIconSolid - strokeWidth={1.5} - size={isDesktop ? 28 : 32} - style={pal.text} - /> - } + icon={<Settings width={iconWidth} style={pal.text} />} + iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />} label={_(msg`Settings`)} /> @@ -494,7 +437,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: 28, - height: 28, + height: 24, marginTop: 2, zIndex: 1, }, |