about summary refs log tree commit diff
path: root/src/view
diff options
context:
space:
mode:
Diffstat (limited to 'src/view')
-rw-r--r--src/view/shell/bottom-bar/BottomBar.tsx148
-rw-r--r--src/view/shell/bottom-bar/BottomBarStyles.tsx26
-rw-r--r--src/view/shell/bottom-bar/BottomBarWeb.tsx87
-rw-r--r--src/view/shell/desktop/LeftNav.tsx161
4 files changed, 156 insertions, 266 deletions
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index 0db8b242a..bcaaf3417 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -13,15 +13,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {
-  BellIcon,
-  BellIconSolid,
-  HashtagIcon,
-  HomeIcon,
-  HomeIconSolid,
-  MagnifyingGlassIcon2,
-  MagnifyingGlassIcon2Solid,
-} from '#/lib/icons'
 import {clamp} from '#/lib/numbers'
 import {getTabState, TabState} from '#/lib/routes/helpers'
 import {useGate} from '#/lib/statsig/statsig'
@@ -41,8 +32,20 @@ import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
-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 {styles} from './BottomBarStyles'
 
 type TabOptions =
@@ -60,14 +63,8 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const safeAreaInsets = useSafeAreaInsets()
   const {track} = useAnalytics()
   const {footerHeight} = useShellLayout()
-  const {
-    isAtHome,
-    isAtSearch,
-    isAtFeeds,
-    isAtNotifications,
-    isAtMyProfile,
-    isAtMessages,
-  } = useNavigationTabState()
+  const {isAtHome, isAtSearch, isAtNotifications, isAtMyProfile, isAtMessages} =
+    useNavigationTabState()
   const numUnreadNotifications = useUnreadNotifications()
   const numUnreadMessages = useUnreadMessageCount()
   const {footerMinimalShellTransform} = useMinimalShellMode()
@@ -78,6 +75,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const accountSwitchControl = useDialogControl()
   const playHaptic = useHaptics()
   const gate = useGate()
+  const iconWidth = 28
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -110,10 +108,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     () => onPressTab('Search'),
     [onPressTab],
   )
-  const onPressFeeds = React.useCallback(
-    () => onPressTab('Feeds'),
-    [onPressTab],
-  )
   const onPressNotifications = React.useCallback(
     () => onPressTab('Notifications'),
     [onPressTab],
@@ -152,15 +146,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarHomeBtn"
               icon={
                 isAtHome ? (
-                  <HomeIconSolid
-                    strokeWidth={4}
-                    size={24}
+                  <HomeFilled
+                    width={iconWidth + 1}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 ) : (
-                  <HomeIcon
-                    strokeWidth={4}
-                    size={24}
+                  <Home
+                    width={iconWidth + 1}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 )
@@ -174,16 +166,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarSearchBtn"
               icon={
                 isAtSearch ? (
-                  <MagnifyingGlassIcon2Solid
-                    size={25}
+                  <MagnifyingGlassFilled
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                    strokeWidth={1.8}
                   />
                 ) : (
-                  <MagnifyingGlassIcon2
-                    size={25}
+                  <MagnifyingGlass
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                    strokeWidth={1.8}
                   />
                 )
               }
@@ -192,68 +182,18 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               accessibilityLabel={_(msg`Search`)}
               accessibilityHint=""
             />
-            <Btn
-              testID="bottomBarFeedsBtn"
-              icon={
-                isAtFeeds ? (
-                  <HashtagIcon
-                    size={24}
-                    style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                    strokeWidth={4}
-                  />
-                ) : (
-                  <HashtagIcon
-                    size={24}
-                    style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                    strokeWidth={2.25}
-                  />
-                )
-              }
-              onPress={onPressFeeds}
-              accessibilityRole="tab"
-              accessibilityLabel={_(msg`Feeds`)}
-              accessibilityHint=""
-            />
-            <Btn
-              testID="bottomBarNotificationsBtn"
-              icon={
-                isAtNotifications ? (
-                  <BellIconSolid
-                    size={24}
-                    strokeWidth={1.9}
-                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
-                  />
-                ) : (
-                  <BellIcon
-                    size={24}
-                    strokeWidth={1.9}
-                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
-                  />
-                )
-              }
-              onPress={onPressNotifications}
-              notificationCount={numUnreadNotifications}
-              accessible={true}
-              accessibilityRole="tab"
-              accessibilityLabel={_(msg`Notifications`)}
-              accessibilityHint={
-                numUnreadNotifications === ''
-                  ? ''
-                  : `${numUnreadNotifications} unread`
-              }
-            />
             {gate('dms') && (
               <Btn
                 testID="bottomBarMessagesBtn"
                 icon={
                   isAtMessages ? (
-                    <EnvelopeFilled
-                      size="lg"
+                    <MessageFilled
+                      width={iconWidth - 1}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   ) : (
-                    <Envelope
-                      size="lg"
+                    <Message
+                      width={iconWidth - 1}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   )
@@ -271,6 +211,32 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               />
             )}
             <Btn
+              testID="bottomBarNotificationsBtn"
+              icon={
+                isAtNotifications ? (
+                  <BellFilled
+                    width={iconWidth}
+                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                  />
+                ) : (
+                  <Bell
+                    width={iconWidth}
+                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                  />
+                )
+              }
+              onPress={onPressNotifications}
+              notificationCount={numUnreadNotifications}
+              accessible={true}
+              accessibilityRole="tab"
+              accessibilityLabel={_(msg`Notifications`)}
+              accessibilityHint={
+                numUnreadNotifications === ''
+                  ? ''
+                  : `${numUnreadNotifications} unread`
+              }
+            />
+            <Btn
               testID="bottomBarProfileBtn"
               icon={
                 <View style={styles.ctrlIconSizingWrapper}>
@@ -285,7 +251,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       ]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={27}
+                        size={iconWidth - 3}
                         // See https://github.com/bluesky-social/social-app/pull/1801:
                         usePlainRNImage={true}
                         type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -296,7 +262,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={28}
+                        size={iconWidth - 3}
                         // See https://github.com/bluesky-social/social-app/pull/1801:
                         usePlainRNImage={true}
                         type={profile?.associated?.labeler ? 'labeler' : 'user'}
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index f76df5bd8..367c204e8 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -48,27 +48,19 @@ export const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  ctrlIconSizingWrapper: {
-    height: 27,
-  },
-  homeIcon: {
-    top: 0,
-  },
-  feedsIcon: {
-    top: -2,
-  },
+  ctrlIconSizingWrapper: {},
+  homeIcon: {},
+  feedsIcon: {},
   searchIcon: {
-    top: -2,
-  },
-  bellIcon: {
-    top: -2.5,
+    top: -1,
   },
+  bellIcon: {},
   profileIcon: {
-    top: -4,
-  },
-  messagesIcon: {
-    top: 2,
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: 'transparent',
   },
+  messagesIcon: {},
   onProfile: {
     borderWidth: 1,
     borderRadius: 100,
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]}
                     />
                   )
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,
   },
generated by cgit-pink 1.4.1 (git 2.36.1) at 2025-10-11 18:55:14 +0000