put user avatar on bottom bar and replace with hamburger menu on top

3 files changed, 20 insertions, 14 deletions

diff --git a/src/view/com/pager/FeedsTabBarMobile.tsx b/src/view/com/pager/FeedsTabBarMobile.tsx
index ff922d446..b99efcfed 100644
--- a/src/view/com/pager/FeedsTabBarMobile.tsx
+++ b/src/view/com/pager/FeedsTabBarMobile.tsx
@@ -3,12 +3,12 @@ import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {TabBar} from 'view/com/pager/TabBar'
 import {RenderTabBarFnProps} from 'view/com/pager/Pager'
-import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {Link} from '../util/Link'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from 'lib/styles'
 
 export const FeedsTabBar = observer(
   (
@@ -50,7 +50,7 @@ export const FeedsTabBar = observer(
               accessibilityRole="button"
               accessibilityLabel="Open navigation"
               accessibilityHint="Access profile and other navigation links">
-              <UserAvatar avatar={store.me.avatar} size={30} />
+              <FontAwesomeIcon icon="bars" size={24} color={colors.blue3} />
             </TouchableOpacity>
           </View>
           <View style={[pal.view]}>
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index ef9499f9f..394aef7af 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -20,14 +20,13 @@ import {
   MagnifyingGlassIcon2Solid,
   BellIcon,
   BellIconSolid,
-  UserIcon,
-  UserIconSolid,
 } from 'lib/icons'
 import {usePalette} from 'lib/hooks/usePalette'
 import {getTabState, TabState} from 'lib/routes/helpers'
 import {styles} from './BottomBarStyles'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useNavigationTabState} from 'lib/hooks/useNavigationTabState'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 
 export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
   const store = useStores()
@@ -154,17 +153,19 @@ export const BottomBar = observer(({navigation}: BottomTabBarProps) => {
         icon={
           <View style={styles.ctrlIconSizingWrapper}>
             {isAtMyProfile ? (
-              <UserIconSolid
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View
+                style={[
+                  styles.ctrlIcon,
+                  pal.text,
+                  styles.profileIcon,
+                  styles.onProfile,
+                ]}>
+                <UserAvatar avatar={store.me.avatar} size={27} />
+              </View>
             ) : (
-              <UserIcon
-                size={28}
-                strokeWidth={1.5}
-                style={[styles.ctrlIcon, pal.text, styles.profileIcon]}
-              />
+              <View style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
+                <UserAvatar avatar={store.me.avatar} size={28} />
+              </View>
             )}
           </View>
         }
diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx
index 3d5adbc9e..2414b9911 100644
--- a/src/view/shell/bottom-bar/BottomBarStyles.tsx
+++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx
@@ -58,4 +58,9 @@ export const styles = StyleSheet.create({
   profileIcon: {
     top: -4,
   },
+  onProfile: {
+    borderColor: colors.black,
+    borderWidth: 1,
+    borderRadius: 100,
+  },
 })