Swap bell icon, improve alignment and size

assets/icons/bell_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z" clip-rule="evenodd"/></svg>

assets/icons/bell_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z" clip-rule="evenodd"/></svg>

src/components/icons/Bell.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Bell_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z',
+})
+
+export const Bell_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z',
+})

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

@@ -33,9 +33,9 @@ import {Logotype} from '#/view/icons/Logotype'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
 import {
-  Bell2_Filled_Corner0_Rounded as BellFilled,
+  Bell_Filled_Corner0_Rounded as BellFilled,
-  Bell2_Stroke2_Corner0_Rounded as Bell,
+  Bell_Stroke2_Corner0_Rounded as Bell,
-} from '#/components/icons/Bell2'
+} from '#/components/icons/Bell'
 import {
   HomeOpen_Filled_Corner0_Rounded as HomeFilled,
   HomeOpen_Stoke2_Corner0_Rounded as Home,
@@ -147,12 +147,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               icon={
                 isAtHome ? (
                   <HomeFilled
-                    width={iconWidth + 2}
+                    width={iconWidth + 1}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 ) : (
                   <Home
-                    width={iconWidth + 2}
+                    width={iconWidth + 1}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 )
@@ -188,12 +188,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 icon={
                   isAtMessages ? (
                     <MessageFilled
-                      width={iconWidth}
+                      width={iconWidth - 1}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   ) : (
                     <Message
-                      width={iconWidth}
+                      width={iconWidth - 1}
                       style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
                     />
                   )
@@ -251,7 +251,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       ]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={iconWidth}
+                        size={iconWidth - 3}
                         // See https://github.com/bluesky-social/social-app/pull/1801:
                         usePlainRNImage={true}
                         type={profile?.associated?.labeler ? 'labeler' : 'user'}
@@ -262,7 +262,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
                       <UserAvatar
                         avatar={profile?.avatar}
-                        size={iconWidth}
+                        size={iconWidth - 3}
                         // 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

@@ -9,7 +9,6 @@ export const styles = StyleSheet.create({
     left: 0,
     right: 0,
     flexDirection: 'row',
-    alignItems: 'center',
     borderTopWidth: 1,
     paddingLeft: 5,
     paddingRight: 10,
@@ -49,12 +48,12 @@ export const styles = StyleSheet.create({
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-  ctrlIconSizingWrapper: {
+  ctrlIconSizingWrapper: {},
-    height: 28,
-  },
   homeIcon: {},
   feedsIcon: {},
-  searchIcon: {},
+  searchIcon: {
+    top: -1,
+  },
   bellIcon: {},
   profileIcon: {
     borderRadius: 100,

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

@@ -23,9 +23,9 @@ 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,
+  Bell_Filled_Corner0_Rounded as BellFilled,
-  Bell2_Stroke2_Corner0_Rounded as Bell,
+  Bell_Stroke2_Corner0_Rounded as Bell,
-} from '#/components/icons/Bell2'
+} from '#/components/icons/Bell'
 import {
   HomeOpen_Filled_Corner0_Rounded as HomeFilled,
   HomeOpen_Stoke2_Corner0_Rounded as Home,
@@ -81,7 +81,7 @@ export function BottomBarWeb() {
               const Icon = isActive ? HomeFilled : Home
               return (
                 <Icon
-                  width={iconWidth + 2}
+                  width={iconWidth + 1}
                   style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                 />
               )
@@ -107,7 +107,7 @@ export function BottomBarWeb() {
                     const Icon = isActive ? MessageFilled : Message
                     return (
                       <Icon
-                        width={iconWidth}
+                        width={iconWidth - 1}
                         style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
                       />
                     )
@@ -139,7 +139,7 @@ export function BottomBarWeb() {
                   const Icon = isActive ? UserCircleFilled : UserCircle
                   return (
                     <Icon
-                      width={iconWidth + 2}
+                      width={iconWidth}
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
                     />
                   )

src/view/shell/desktop/LeftNav.tsx

@@ -34,9 +34,9 @@ import {PressableWithHover} from 'view/com/util/PressableWithHover'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {
-  Bell2_Filled_Corner0_Rounded as BellFilled,
+  Bell_Filled_Corner0_Rounded as BellFilled,
-  Bell2_Stroke2_Corner0_Rounded as Bell,
+  Bell_Stroke2_Corner0_Rounded as Bell,
-} from '#/components/icons/Bell2'
+} from '#/components/icons/Bell'
 import {
   BulletList_Filled_Corner0_Rounded as ListFilled,
   BulletList_Stroke2_Corner0_Rounded as List,