Fine tune

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

@@ -147,12 +147,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               icon={
                 isAtHome ? (
                   <HomeFilled
-                    width={iconWidth}
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 ) : (
                   <Home
-                    width={iconWidth}
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                   />
                 )
@@ -167,12 +167,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               icon={
                 isAtSearch ? (
                   <MagnifyingGlassFilled
-                    width={iconWidth}
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
                   />
                 ) : (
                   <MagnifyingGlass
-                    width={iconWidth}
+                    width={iconWidth + 2}
                     style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
                   />
                 )
@@ -182,32 +182,6 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               accessibilityLabel={_(msg`Search`)}
               accessibilityHint=""
             />
-            <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`
-              }
-            />
             {gate('dms') && (
               <Btn
                 testID="bottomBarMessagesBtn"
@@ -236,6 +210,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={

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

@@ -9,6 +9,7 @@ export const styles = StyleSheet.create({
     left: 0,
     right: 0,
     flexDirection: 'row',
+    alignItems: 'center',
     borderTopWidth: 1,
     paddingLeft: 5,
     paddingRight: 10,
@@ -49,29 +50,18 @@ export const styles = StyleSheet.create({
     marginRight: 'auto',
   },
   ctrlIconSizingWrapper: {
-    height: 27,
+    height: 28,
-  },
-  homeIcon: {
-    top: 0,
-  },
-  feedsIcon: {
-    top: -2,
-  },
-  searchIcon: {
-    top: -2,
-  },
-  bellIcon: {
-    top: -2.5,
   },
+  homeIcon: {},
+  feedsIcon: {},
+  searchIcon: {},
+  bellIcon: {},
   profileIcon: {
     borderRadius: 100,
     borderWidth: 1,
     borderColor: 'transparent',
-    top: -4,
-  },
-  messagesIcon: {
-    top: 2,
   },
+  messagesIcon: {},
   onProfile: {
     borderWidth: 1,
     borderRadius: 100,

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

@@ -81,7 +81,7 @@ export function BottomBarWeb() {
               const Icon = isActive ? HomeFilled : Home
               return (
                 <Icon
-                  width={iconWidth}
+                  width={iconWidth + 2}
                   style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
                 />
               )
@@ -92,7 +92,7 @@ export function BottomBarWeb() {
               const Icon = isActive ? MagnifyingGlassFilled : MagnifyingGlass
               return (
                 <Icon
-                  width={iconWidth}
+                  width={iconWidth + 2}
                   style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
                 />
               )
@@ -101,17 +101,6 @@ export function BottomBarWeb() {
 
           {hasSession && (
             <>
-              <NavItem routeName="Notifications" href="/notifications">
-                {({isActive}) => {
-                  const Icon = isActive ? BellFilled : Bell
-                  return (
-                    <Icon
-                      width={iconWidth}
-                      style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
-                    />
-                  )
-                }}
-              </NavItem>
               {gate('dms') && (
                 <NavItem routeName="Messages" href="/messages">
                   {({isActive}) => {
@@ -125,6 +114,17 @@ export function BottomBarWeb() {
                   }}
                 </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={
@@ -139,7 +139,7 @@ export function BottomBarWeb() {
                   const Icon = isActive ? UserCircleFilled : UserCircle
                   return (
                     <Icon
-                      width={iconWidth}
+                      width={iconWidth + 2}
                       style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
                     />
                   )