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

zio/stable
Ansh Nanda 2023-05-25 00:17:57 -07:00
parent 007c523010
commit 0bdb0ac006
3 changed files with 20 additions and 14 deletions

View File

@ -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]}>

View File

@ -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>
}

View File

@ -58,4 +58,9 @@ export const styles = StyleSheet.create({
profileIcon: {
top: -4,
},
onProfile: {
borderColor: colors.black,
borderWidth: 1,
borderRadius: 100,
},
})