From 57fe76692a28459d8d33a0e25615a1a997163038 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 3 Mar 2025 23:02:31 +0000
Subject: [PATCH] ALF up bottom bar native

---
 src/view/shell/bottom-bar/BottomBar.tsx | 84 ++++++++++---------------
 1 file changed, 32 insertions(+), 52 deletions(-)

diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index b404a8f38d..327c3fbbd6 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -15,7 +15,6 @@ import {useDedupe} from '#/lib/hooks/useDedupe'
 import {useHideBottomBarBorder} from '#/lib/hooks/useHideBottomBarBorder'
 import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {clamp} from '#/lib/numbers'
 import {getTabState, TabState} from '#/lib/routes/helpers'
 import {useGate} from '#/lib/statsig/statsig'
@@ -57,7 +56,7 @@ type TabOptions = 'Home' | 'Search' | 'Messages' | 'Notifications' | 'MyProfile'
 
 export function BottomBar({navigation}: BottomTabBarProps) {
   const {hasSession, currentAccount} = useSession()
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const safeAreaInsets = useSafeAreaInsets()
   const {footerHeight} = useShellLayout()
@@ -147,8 +146,10 @@ export function BottomBar({navigation}: BottomTabBarProps) {
       <Animated.View
         style={[
           styles.bottomBar,
-          pal.view,
-          hideBorder ? {borderColor: pal.view.backgroundColor} : pal.border,
+          t.atoms.bg,
+          hideBorder
+            ? {borderColor: t.atoms.bg.backgroundColor}
+            : t.atoms.border_contrast_low,
           {paddingBottom: clamp(safeAreaInsets.bottom, 15, 60)},
           footerMinimalShellTransform,
         ]}
@@ -163,12 +164,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 isAtHome ? (
                   <HomeFilled
                     width={iconWidth + 1}
-                    style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
                   />
                 ) : (
                   <Home
                     width={iconWidth + 1}
-                    style={[styles.ctrlIcon, pal.text, styles.homeIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.homeIcon]}
                   />
                 )
               }
@@ -183,13 +184,13 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 isAtSearch ? (
                   <MagnifyingGlassFilled
                     width={iconWidth + 2}
-                    style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
                   />
                 ) : (
                   <MagnifyingGlass
                     testID="bottomBarSearchBtn"
                     width={iconWidth + 2}
-                    style={[styles.ctrlIcon, pal.text, styles.searchIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.searchIcon]}
                   />
                 )
               }
@@ -204,12 +205,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 isAtMessages ? (
                   <MessageFilled
                     width={iconWidth - 1}
-                    style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
                   />
                 ) : (
                   <Message
                     width={iconWidth - 1}
-                    style={[styles.ctrlIcon, pal.text, styles.feedsIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.feedsIcon]}
                   />
                 )
               }
@@ -236,12 +237,12 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 isAtNotifications ? (
                   <BellFilled
                     width={iconWidth}
-                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
                   />
                 ) : (
                   <Bell
                     width={iconWidth}
-                    style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                    style={[styles.ctrlIcon, t.atoms.text, styles.bellIcon]}
                   />
                 )
               }
@@ -265,49 +266,28 @@ export function BottomBar({navigation}: BottomTabBarProps) {
               testID="bottomBarProfileBtn"
               icon={
                 <View style={styles.ctrlIconSizingWrapper}>
-                  {isAtMyProfile ? (
-                    <View
-                      style={[
-                        styles.ctrlIcon,
-                        pal.text,
-                        styles.profileIcon,
+                  <View
+                    style={[
+                      styles.ctrlIcon,
+                      styles.profileIcon,
+                      isAtMyProfile && [
                         styles.onProfile,
                         {
-                          borderColor: pal.text.color,
+                          borderColor: t.atoms.text.color,
                           borderWidth: live ? 0 : 1,
                         },
-                      ]}>
-                      <UserAvatar
-                        avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
-                        size={iconWidth - 2}
-                        // See https://github.com/bluesky-social/social-app/pull/1801:
-                        usePlainRNImage={true}
-                        type={profile?.associated?.labeler ? 'labeler' : 'user'}
-                        live={live}
-                        hideLiveBadge
-                      />
-                    </View>
-                  ) : (
-                    <View
-                      style={[
-                        styles.ctrlIcon,
-                        pal.text,
-                        styles.profileIcon,
-                        {
-                          borderWidth: live ? 0 : 1,
-                        },
-                      ]}>
-                      <UserAvatar
-                        avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
-                        size={iconWidth - 2}
-                        // See https://github.com/bluesky-social/social-app/pull/1801:
-                        usePlainRNImage={true}
-                        type={profile?.associated?.labeler ? 'labeler' : 'user'}
-                        live={live}
-                        hideLiveBadge
-                      />
-                    </View>
-                  )}
+                      ],
+                    ]}>
+                    <UserAvatar
+                      avatar={demoMode ? BOTTOM_BAR_AVI : profile?.avatar}
+                      size={iconWidth - (isAtMyProfile ? 3 : 2)}
+                      // See https://github.com/bluesky-social/social-app/pull/1801:
+                      usePlainRNImage={true}
+                      type={profile?.associated?.labeler ? 'labeler' : 'user'}
+                      live={live}
+                      hideLiveBadge
+                    />
+                  </View>
                 </View>
               }
               onPress={onPressProfile}
@@ -335,7 +315,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                 style={{flexDirection: 'row', alignItems: 'center', gap: 8}}>
                 <Logo width={28} />
                 <View style={{paddingTop: 4}}>
-                  <Logotype width={80} fill={pal.text.color} />
+                  <Logotype width={80} fill={t.atoms.text.color} />
                 </View>
               </View>