Replace icons in bottom bars

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,6 +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 {
+  Bell2_Filled_Corner0_Rounded as BellFilled,
+  Bell2_Stroke2_Corner0_Rounded as Bell,
+} from '#/components/icons/Bell2'
+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,
@@ -80,6 +85,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
   const accountSwitchControl = useDialogControl()
   const playHaptic = useHaptics()
   const gate = useGate()
+  const iconWidth = 30
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -154,15 +160,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarHomeBtn"
               icon={
                 isAtHome ? (
-                  <HomeIconSolid
+                  <HomeFilled
-                    strokeWidth={4}
+                    width={iconWidth}
-                    size={24}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 ) : (
-                  <HomeIcon
+                  <Home
-                    strokeWidth={4}
+                    width={iconWidth}
-                    size={24}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 )
@@ -176,16 +180,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarSearchBtn"
               icon={
                 isAtSearch ? (
-                  <MagnifyingGlassIcon2Solid
+                  <MagnifyingGlassFilled
-                    size={25}
+                    width={iconWidth}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                    strokeWidth={1.8}
                   />
                 ) : (
-                  <MagnifyingGlassIcon2
+                  <MagnifyingGlass
-                    size={25}
+                    width={iconWidth}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                    strokeWidth={1.8}
                   />
                 )
               }
@@ -198,16 +200,14 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarFeedsBtn"
               icon={
                 isAtFeeds ? (
-                  <HashtagIcon
+                  <HashtagFilled
-                    size={24}
+                    width={iconWidth}
                     style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                    strokeWidth={4}
                   />
                 ) : (
-                  <HashtagIcon
+                  <Hashtag
-                    size={24}
+                    width={iconWidth}
                     style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                    strokeWidth={2.25}
                   />
                 )
               }
@@ -220,15 +220,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarNotificationsBtn"
               icon={
                 isAtNotifications ? (
-                  <BellIconSolid
+                  <BellFilled
-                    size={24}
+                    width={iconWidth}
-                    strokeWidth={1.9}
                     style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
                   />
                 ) : (
-                  <BellIcon
+                  <Bell
-                    size={24}
+                    width={iconWidth}
-                    strokeWidth={1.9}
                     style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
                   />
                 )
@@ -250,12 +248,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 icon={
                   isAtMessages ? (
                     <MessageFilled
-                      size="lg"
+                      width={iconWidth}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   ) : (
                     <Message
-                      size="lg"
+                      width={iconWidth}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   )
@@ -287,7 +285,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       ]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={27}
+                        size={iconWidth}
                         // See https://github.com/bluesky-social/social-app/pull/1801:
                         usePlainRNImage={true}
                         type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -298,7 +296,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={28}
+                        size={iconWidth}
                         // See https://github.com/bluesky-social/social-app/pull/1801:
                         usePlainRNImage={true}
                         type={profile?.associated?.labeler ? 'labeler' : 'user'}

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -64,6 +64,9 @@ export const styles = StyleSheet.create({
     top: -2.5,
   },
   profileIcon: {
+    borderRadius: 100,
+    borderWidth: 1,
+    borderColor: 'transparent',
     top: -4,
   },
   messagesIcon: {

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,10 +22,28 @@ 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 {
+  Bell2_Filled_Corner0_Rounded as BellFilled,
+  Bell2_Stroke2_Corner0_Rounded as Bell,
+} from '#/components/icons/Bell2'
+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 {
+  UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
+  UserCircle_Stroke2_Corner0_Rounded as UserCircle,
+} from '#/components/icons/UserCircle'
 import {styles} from './BottomBarStyles'
 
 export function BottomBarWeb() {
@@ -48,6 +55,7 @@ export function BottomBarWeb() {
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const gate = useGate()
+  const iconWidth = 28
 
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
@@ -74,11 +82,10 @@ export function BottomBarWeb() {
         <>
           <NavItem routeName="Home" href="/">
             {({isActive}) => {
-              const Icon = isActive ? HomeIconSolid : HomeIcon
+              const Icon = isActive ? HomeFilled : Home
               return (
                 <Icon
-                  strokeWidth={4}
+                  width={iconWidth}
-                  size={24}
                   style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                 />
               )
@@ -86,14 +93,11 @@ export function BottomBarWeb() {
           </NavItem>
           <NavItem routeName="Search" href="/search">
             {({isActive}) => {
-              const Icon = isActive
+              const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
-                ? MagnifyingGlassIcon2Solid
-                : MagnifyingGlassIcon2
               return (
                 <Icon
-                  size={25}
+                  width={iconWidth}
                   style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
-                  strokeWidth={1.8}
                 />
               )
             }}
@@ -103,22 +107,21 @@ export function BottomBarWeb() {
             <>
               <NavItem routeName="Feeds" href="/feeds">
                 {({isActive}) => {
+                  const Icon = isActive ? HashtagFilled : Hashtag
                   return (
-                    <HashtagIcon
+                    <Icon
-                      size={22}
+                      width={iconWidth}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
-                      strokeWidth={isActive ? 4 : 2.5}
                     />
                   )
                 }}
               </NavItem>
               <NavItem routeName="Notifications" href="/notifications">
                 {({isActive}) => {
-                  const Icon = isActive ? BellIconSolid : BellIcon
+                  const Icon = isActive ? BellFilled : Bell
                   return (
                     <Icon
-                      size={24}
+                      width={iconWidth}
-                      strokeWidth={1.9}
                       style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
                     />
                   )
@@ -130,7 +133,7 @@ export function BottomBarWeb() {
                     const Icon = isActive ? MessageFilled : Message
                     return (
                       <Icon
-                        size="lg"
+                        width={iconWidth}
                         style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
                       />
                     )
@@ -148,11 +151,10 @@ export function BottomBarWeb() {
                     : '/'
                 }>
                 {({isActive}) => {
-                  const Icon = isActive ? UserIconSolid : UserIcon
+                  const Icon = isActive ? UserCircleFilled : UserCircle
                   return (
                     <Icon
-                      size={28}
+                      width={iconWidth}
-                      strokeWidth={1.5}
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
                     />
                   )