[C-1371] Address navbar qa #2

AudiusProject · Oct 25, 2022 · c510dfc · c510dfc
1 parent be0a1d2
commit c510dfc
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 48 deletions.
diff --git a/packages/mobile/src/screens/account-screen/AccountDrawer.tsx b/packages/mobile/src/screens/account-screen/AccountDrawer.tsx
@@ -14,12 +14,13 @@ import {
 } from '@audius/common'
 import type { DrawerContentComponentProps } from '@react-navigation/drawer'
 import { DrawerContentScrollView } from '@react-navigation/drawer'
-import { Pressable, TouchableOpacity, View } from 'react-native'
+import { TouchableOpacity, View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
 import IconCrown from 'app/assets/images/iconCrown.svg'
 import IconNote from 'app/assets/images/iconNote.svg'
 import IconSettings from 'app/assets/images/iconSettings.svg'
+import IconUser from 'app/assets/images/iconUser.svg'
 import IconUserFollowers from 'app/assets/images/iconUserFollowers.svg'
 import IconUserList from 'app/assets/images/iconUserList.svg'
 import { IconAudioBadge } from 'app/components/audio-rewards'
@@ -38,10 +39,18 @@ const { setFollowers } = followersUserListActions
 const { setFollowing } = followingUserListActions
 
 const messages = {
+  profile: 'Profile',
   audio: '$AUDIO & Rewards',
   settings: 'Settings'
 }
 
+const accountStatHitSlop = {
+  top: spacing(2),
+  right: spacing(2),
+  bottom: spacing(2),
+  left: spacing(2)
+}
+
 type AccountDrawerProps = DrawerContentComponentProps & {
   disableGestures: boolean
   setDisableGestures: (disabled: boolean) => void
@@ -71,8 +80,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     paddingRight: spacing(4)
   },
   tokenBadge: {
-    height: spacing(7),
-    width: spacing(7),
     marginRight: spacing(1)
   },
   accountStats: { flexDirection: 'row', paddingLeft: spacing(4) },
@@ -105,6 +112,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 }))
 
 export const AccountDrawer = (props: AccountDrawerProps) => {
+  const { navigation: drawerHelpers } = props
   const styles = useStyles()
   const accountUser = useSelector(getAccountUser) as User
   const { user_id, name, handle, track_count, followee_count, follower_count } =
@@ -119,31 +127,39 @@ export const AccountDrawer = (props: AccountDrawerProps) => {
   const navigation = useAppDrawerNavigation()
 
   const handlePressAccount = useCallback(() => {
-    navigation.navigate('Profile', { handle: 'accountUser' })
-  }, [navigation])
+    navigation.push('Profile', { handle: 'accountUser' })
+    drawerHelpers.closeDrawer()
+  }, [navigation, drawerHelpers])
 
   const handlePressRewards = useCallback(() => {
-    navigation.navigate('AudioScreen')
-  }, [navigation])
+    navigation.push('AudioScreen')
+    drawerHelpers.closeDrawer()
+  }, [navigation, drawerHelpers])
 
   const handlePressFollowing = useCallback(() => {
     dispatch(setFollowing(user_id))
-    navigation.navigate('Following', { userId: user_id })
-  }, [dispatch, user_id, navigation])
+    navigation.push('Following', { userId: user_id })
+    drawerHelpers.closeDrawer()
+  }, [dispatch, user_id, navigation, drawerHelpers])
 
   const handlePressFollowers = useCallback(() => {
     dispatch(setFollowers(user_id))
-    navigation.navigate('Followers', { userId: user_id })
-  }, [dispatch, user_id, navigation])
+    navigation.push('Followers', { userId: user_id })
+    drawerHelpers.closeDrawer()
+  }, [dispatch, user_id, navigation, drawerHelpers])
 
   const handlePressSettings = useCallback(() => {
-    navigation.navigate('SettingsScreen')
-  }, [navigation])
+    navigation.push('SettingsScreen')
+    drawerHelpers.closeDrawer()
+  }, [navigation, drawerHelpers])
 
   return (
     <DrawerContentScrollView {...props}>
       <View style={styles.header}>
-        <Pressable style={styles.accountInfo} onPress={handlePressAccount}>
+        <TouchableOpacity
+          style={styles.accountInfo}
+          onPress={handlePressAccount}
+        >
           <ProfilePicture profile={accountUser} style={styles.accountImage} />
           <View style={styles.accountName}>
             <Text variant='h1' noGutter>
@@ -158,41 +174,82 @@ export const AccountDrawer = (props: AccountDrawerProps) => {
           <Text weight='medium' fontSize='medium'>
             @{handle}
           </Text>
-        </Pressable>
-        <Pressable style={styles.tokens} onPress={handlePressRewards}>
-          <IconAudioBadge tier={tier} showNoTier style={styles.tokenBadge} />
+        </TouchableOpacity>
+        <TouchableOpacity style={styles.tokens} onPress={handlePressRewards}>
+          <IconAudioBadge
+            tier={tier}
+            showNoTier
+            style={styles.tokenBadge}
+            height={spacing(7)}
+            width={spacing(7)}
+          />
           <Text fontSize='large' weight='heavy'>
             {totalBalance ? formatWei(totalBalance) : 0}
           </Text>
-        </Pressable>
+        </TouchableOpacity>
       </View>
       <Divider style={styles.divider} />
       <View style={styles.accountStats}>
-        <Pressable style={styles.accountStat} onPress={handlePressAccount}>
-          <IconNote fill={neutralLight4} style={styles.accountStatIcon} />
+        <TouchableOpacity
+          style={styles.accountStat}
+          onPress={handlePressAccount}
+          hitSlop={accountStatHitSlop}
+        >
+          <IconNote
+            fill={neutralLight4}
+            style={[styles.accountStatIcon, { marginRight: 2 }]}
+            height={30}
+            width={30}
+          />
           <View>
             <Text fontSize='large' weight='heavy'>
               {formatCount(track_count)}
             </Text>
           </View>
-        </Pressable>
-        <Pressable style={styles.accountStat} onPress={handlePressFollowing}>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.accountStat}
+          onPress={handlePressFollowing}
+          hitSlop={accountStatHitSlop}
+        >
           <IconUserList fill={neutralLight4} style={styles.accountStatIcon} />
           <Text fontSize='large' weight='heavy'>
             {formatCount(followee_count)}
           </Text>
-        </Pressable>
-        <Pressable style={styles.accountStat} onPress={handlePressFollowers}>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={styles.accountStat}
+          onPress={handlePressFollowers}
+          hitSlop={accountStatHitSlop}
+        >
           <IconUserFollowers
             fill={neutralLight4}
             style={styles.accountStatIcon}
           />
           <Text fontSize='large' weight='heavy'>
             {formatCount(follower_count)}
           </Text>
-        </Pressable>
+        </TouchableOpacity>
       </View>
       <Divider style={styles.divider} />
+      <TouchableOpacity
+        style={styles.accountListItem}
+        onPress={handlePressAccount}
+      >
+        <IconUser
+          fill={neutral}
+          height={spacing(7)}
+          width={spacing(7)}
+          style={styles.accountListItemIcon}
+        />
+        <Text
+          fontSize='large'
+          weight='demiBold'
+          style={{ marginTop: spacing(1) }}
+        >
+          {messages.profile}
+        </Text>
+      </TouchableOpacity>
       <TouchableOpacity
         style={styles.accountListItem}
         onPress={handlePressRewards}

diff --git a/packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts b/packages/mobile/src/screens/app-drawer-screen/useAppDrawerNavigation.ts
@@ -5,6 +5,8 @@ import { FeatureFlags } from '@audius/common'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 
+import { AppTabNavigationContext } from '../app-screen'
+
 import { AppDrawerContext } from '.'
 
 /** Temporary navigation hook for notification components.
@@ -35,17 +37,6 @@ export const useNotificationNavigation = () => {
 }
 
 export const useAppDrawerNavigation = () => {
-  const { drawerHelpers } = useContext(AppDrawerContext)
-
-  const navigation = useNavigation()
-
-  const drawerNavigation = useMemo(
-    () => ({
-      ...navigation,
-      ...drawerHelpers
-    }),
-    [drawerHelpers, navigation]
-  )
-
-  return drawerNavigation
+  const { navigation: contextNavigation } = useContext(AppTabNavigationContext)
+  return useNavigation({ customNavigation: contextNavigation })
 }
diff --git a/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx b/packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx
@@ -18,16 +18,21 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     width: spacing(8) + 2,
     borderWidth: 1
   },
-  notificationBubble: {
+  notificationBubbleRoot: {
     height: spacing(4),
     width: spacing(4),
     borderColor: palette.white,
     borderWidth: 2,
-    borderRadius: spacing(2),
-    backgroundColor: palette.secondary,
+    borderRadius: 10,
     position: 'absolute',
     top: 0,
     right: 0
+  },
+  notificationBubble: {
+    flex: 1,
+    backgroundColor: palette.secondary,
+    overflow: 'hidden',
+    borderRadius: 10
   }
 }))
 
@@ -49,7 +54,11 @@ export const AccountPictureHeader = (props: AccountPictureHeaderProps) => {
         style={styles.root}
         firstOpacity={0}
       />
-      {hasClaimableRewards ? <View style={styles.notificationBubble} /> : null}
+      {hasClaimableRewards ? (
+        <View style={styles.notificationBubbleRoot}>
+          <View style={styles.notificationBubble} />
+        </View>
+      ) : null}
     </TouchableOpacity>
   )
 }
diff --git a/packages/mobile/src/screens/app-screen/AppTabScreen.tsx b/packages/mobile/src/screens/app-screen/AppTabScreen.tsx
@@ -89,7 +89,7 @@ export type AppTabScreenParamList = {
   AccountVerificationScreen: undefined
   ChangePasswordScreen: undefined
   NotificationSettingsScreen: undefined
-  AudioScreen: Record<string, unknown>
+  AudioScreen: undefined
 }
 
 const forFade = ({ current }) => ({

diff --git a/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx b/packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx
@@ -35,7 +35,7 @@ const { markAllAsViewed } = notificationsActions
 const { getNotificationUnviewedCount } = notificationsSelectors
 
 const useStyles = makeStyles(({ palette, spacing, typography }) => ({
-  headerLeft: { marginLeft: spacing(-2), width: 40 },
+  headerLeft: { marginLeft: spacing(-2) + 1, width: 40 },
   headerRight: {},
   title: {
     fontSize: 18,

diff --git a/packages/mobile/src/screens/user-list-screen/FollowersScreen.tsx b/packages/mobile/src/screens/user-list-screen/FollowersScreen.tsx
@@ -6,7 +6,7 @@ import {
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
-import IconUser from 'app/assets/images/iconUser.svg'
+import IconUserFollowers from 'app/assets/images/iconUserFollowers.svg'
 import { useProfileRoute } from 'app/hooks/useRoute'
 
 import { UserList } from './UserList'
@@ -28,7 +28,7 @@ export const FollowersScreen = () => {
   }, [dispatch, userId])
 
   return (
-    <UserListScreen title={messages.title} titleIcon={IconUser}>
+    <UserListScreen title={messages.title} titleIcon={IconUserFollowers}>
       <UserList
         userSelector={getUserList}
         tag='FOLLOWERS'

diff --git a/packages/mobile/src/screens/user-list-screen/FollowingScreen.tsx b/packages/mobile/src/screens/user-list-screen/FollowingScreen.tsx
@@ -6,7 +6,7 @@ import {
 } from '@audius/common'
 import { useDispatch } from 'react-redux'
 
-import IconUser from 'app/assets/images/iconUser.svg'
+import IconUserList from 'app/assets/images/iconUserList.svg'
 import { useProfileRoute } from 'app/hooks/useRoute'
 
 import { UserList } from './UserList'
@@ -28,7 +28,7 @@ export const FollowingScreen = () => {
   }, [dispatch, userId])
 
   return (
-    <UserListScreen title={messages.title} titleIcon={IconUser}>
+    <UserListScreen title={messages.title} titleIcon={IconUserList}>
       <UserList
         userSelector={getUserList}
         tag='FOLLOWING'