[🐴] Change up icons (#3938)

* Swap for chat icon

* Replace icons in left nav

* Replace icons in bottom bars

* Ditch feeds, drop size

* Fine tune

* Swap bell icon, improve alignment and size

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]}
                     />
                   )