[C-1351] Finalize mobile-nav-bar-overhaul

packages/mobile/src/assets/animations/iconNotifications.json

@@ -0,0 +1 @@
+{"v":"5.9.6","fr":60,"ip":0,"op":25,"w":30,"h":30,"nm":"iconNotifications","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Bell","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.52],"y":[0.973]},"o":{"x":[0.48],"y":[0.027]},"t":0,"s":[0]},{"i":{"x":[0.52],"y":[0.972]},"o":{"x":[0.48],"y":[0.028]},"t":6,"s":[15]},{"i":{"x":[0.52],"y":[0.967]},"o":{"x":[0.48],"y":[0.033]},"t":12,"s":[-10]},{"i":{"x":[0.52],"y":[1.02]},"o":{"x":[0.48],"y":[0.06]},"t":18,"s":[5]},{"t":24,"s":[0]}],"ix":10},"p":{"a":0,"k":[15,4.5,0],"ix":2,"l":2},"a":{"a":0,"k":[14,3.5,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.919,-0.919],[0,0],[0,-0.787],[0.788,0],[0,0],[0,0.788],[-0.787,0],[0,0],[0,1.706],[0,0],[-3.675,0],[0,-3.675],[0,0]],"o":[[0,0],[0.788,0],[0,0.788],[0,0],[-0.787,0],[0,-0.787],[0,0],[0.918,-0.919],[0,0],[0,-3.675],[3.675,0],[0,0],[0,1.706]],"v":[[8.531,5.906],[9.187,5.906],[10.5,7.218],[9.187,8.531],[-9.188,8.531],[-10.5,7.218],[-9.188,5.906],[-8.531,5.906],[-6.563,1.969],[-6.563,-1.969],[0,-8.531],[6.562,-1.969],[6.562,1.969]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":1,"s":[0.521568627451,0.505882352941,0.6,1]},{"t":2,"s":[0.800000011921,0.058823529631,0.878431379795,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[14,12.031],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":25,"st":0,"ct":1,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Clapper","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.52,"y":0.961},"o":{"x":0.48,"y":0.039},"t":0,"s":[14,14,0],"to":[-0.667,0,0],"ti":[-0.667,0,0]},{"i":{"x":0.52,"y":0.96},"o":{"x":0.48,"y":0.04},"t":6,"s":[10,14,0],"to":[0.667,0,0],"ti":[0,0,0]},{"i":{"x":0.52,"y":0.96},"o":{"x":0.48,"y":0.04},"t":12,"s":[18,14,0],"to":[0,0,0],"ti":[0.667,0,0]},{"i":{"x":0.52,"y":0.961},"o":{"x":0.48,"y":0.039},"t":18,"s":[10,14,0],"to":[-0.667,0,0],"ti":[-0.667,0,0]},{"t":24,"s":[14,14,0]}],"ix":2,"l":2},"a":{"a":0,"k":[14,14,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.444,0],[0,1.444],[0,0]],"o":[[-1.444,0],[0,0],[0,1.444]],"v":[[0,1.312],[-2.625,-1.312],[2.625,-1.312]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.643]},"o":{"x":[0.167],"y":[0.178]},"t":1,"s":[0.521568627451,0.505882352941,0.6,1]},{"t":2,"s":[0.800000011921,0.058823529631,0.878431379795,1]}],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[14,23.188],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":25,"st":0,"ct":1,"bm":0}],"markers":[]}

packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/BottomTabBarButton.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import { useCallback } from 'react'
 
 import LinearGradient from 'react-native-linear-gradient'
@@ -19,6 +20,7 @@ export type BaseBottomTabBarButtonProps = {
 export type BottomTabBarButtonProps = BaseBottomTabBarButtonProps & {
   name: string
   iconJSON: IconJSON
+  children?: ReactNode
 }
 
 const hitSlop = { top: 0, right: 0, bottom: 0, left: 0 }
@@ -40,7 +42,8 @@ const useStyles = makeStyles(() => ({
 }))
 
 export const BottomTabBarButton = (props: BottomTabBarButtonProps) => {
-  const { name, routeKey, isActive, iconJSON, onPress, onLongPress } = props
+  const { name, routeKey, isActive, iconJSON, onPress, onLongPress, children } =
+    props
   const styles = useStyles()
   const { neutralLight8, neutralLight10 } = useThemeColors()
 
@@ -67,6 +70,8 @@ export const BottomTabBarButton = (props: BottomTabBarButtonProps) => {
           />
         ) : null
       }
-    />
+    >
+      {children}
+    </AnimatedButton>
   )
 }

packages/mobile/src/components/bottom-tab-bar/bottom-tab-bar-buttons/NotificationsButton.tsx

@@ -1,47 +1,26 @@
-import { useCallback } from 'react'
+import { useMemo } from 'react'
 
 import { notificationsSelectors } from '@audius/common'
-import { Pressable, View, Text } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import { View, Text } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import IconNotification from 'app/assets/images/iconNotification.svg'
+import IconNotificationBase from 'app/assets/animations/iconNotifications.json'
 import { makeStyles } from 'app/styles'
+import { colorize } from 'app/utils/colorizeLottie'
 import { useThemeColors } from 'app/utils/theme'
 
-import { BOTTOM_BAR_BUTTON_HEIGHT } from '../constants'
+import type { BaseBottomTabBarButtonProps } from './BottomTabBarButton'
+import { BottomTabBarButton } from './BottomTabBarButton'
 
 const { getNotificationUnviewedCount } = notificationsSelectors
 
-export type BaseBottomTabBarButtonProps = {
-  isActive: boolean
-  onPress: (isActive: boolean, routeName: string, routeKey: string) => void
-  onLongPress: () => void
-  routeKey: string
-}
-
-export type NotificationsButtonProps = BaseBottomTabBarButtonProps & {
-  name: string
-}
+export type NotificationsButtonProps = BaseBottomTabBarButtonProps
 
 const useStyles = makeStyles(({ palette, typography }) => ({
-  animatedButton: {
-    width: '20%',
-    alignItems: 'center'
-  },
-  iconWrapper: {
-    height: BOTTOM_BAR_BUTTON_HEIGHT,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  underlay: {
-    width: '100%',
-    height: BOTTOM_BAR_BUTTON_HEIGHT,
-    position: 'absolute'
-  },
-  notificationCount: {
+  notifBubble: {
     position: 'absolute',
-    right: -6,
+    flex: 1,
+    right: 20,
     top: 4,
     borderRadius: 99,
     minHeight: 20,
@@ -51,7 +30,7 @@ const useStyles = makeStyles(({ palette, typography }) => ({
     borderWidth: 2,
     borderColor: palette.white
   },
-  notificationCountText: {
+  notifBubbleText: {
     fontFamily: typography.fontByWeight.bold,
     fontSize: typography.fontSize.xs,
     textAlign: 'center',
@@ -61,46 +40,38 @@ const useStyles = makeStyles(({ palette, typography }) => ({
 
 // Temporary component for notification bottom-button until we get a lottie animation
 export const NotificationsButton = (props: NotificationsButtonProps) => {
-  const { routeKey, isActive, onPress, onLongPress } = props
-  const name = 'notifications'
   const styles = useStyles()
-  const { primary, neutral, neutralLight8, neutralLight10 } = useThemeColors()
+  const { primary, neutral } = useThemeColors()
   const notificationCount = useSelector(getNotificationUnviewedCount)
 
-  const handlePress = useCallback(() => {
-    onPress(isActive, name, routeKey)
-  }, [onPress, routeKey, isActive, name])
+  const IconNotificationn = useMemo(
+    () =>
+      colorize(IconNotificationBase, {
+        // Bell.Group 1.Fill 1
+        'layers.0.shapes.0.it.1.c.k.0.s': neutral,
+        // Bell.Group 1.Fill 1
+        'layers.0.shapes.0.it.1.c.k.1.s': primary,
+        // Clapper.Group 1.Fill 1
+        'layers.1.shapes.0.it.1.c.k.0.s': neutral,
+        // Clapper.Group 1.Fill 1
+        'layers.1.shapes.0.it.1.c.k.1.s': primary
+      }),
+    [neutral, primary]
+  )
 
   return (
-    <Pressable
-      style={styles.animatedButton}
-      onPress={handlePress}
-      onLongPress={onLongPress}
+    <BottomTabBarButton
+      name='notifications'
+      iconJSON={IconNotificationn}
+      {...props}
     >
-      {({ pressed }) => (
-        <>
-          {pressed ? (
-            <LinearGradient
-              style={styles.underlay}
-              colors={[neutralLight8, neutralLight10]}
-            />
-          ) : null}
-          <View style={styles.iconWrapper}>
-            <IconNotification
-              height={32}
-              width={32}
-              fill={pressed || isActive ? primary : neutral}
-            />
-            {notificationCount > 0 ? (
-              <View style={styles.notificationCount}>
-                <Text style={styles.notificationCountText}>
-                  {notificationCount >= 100 ? '99+' : notificationCount}
-                </Text>
-              </View>
-            ) : null}
-          </View>
-        </>
-      )}
-    </Pressable>
+      {notificationCount > 0 ? (
+        <View style={styles.notifBubble}>
+          <Text style={styles.notifBubbleText}>
+            {notificationCount >= 100 ? '99+' : notificationCount}
+          </Text>
+        </View>
+      ) : null}
+    </BottomTabBarButton>
   )
 }

packages/mobile/src/components/core/AnimatedButton.tsx

@@ -33,6 +33,7 @@ export type AnimatedButtonProps = {
   haptics?: Haptics
   hapticsConfig?: Haptics[]
   waitForAnimationFinish?: boolean
+  children?: ReactNode
 } & PressableProps
 
 export const AnimatedButton = ({
@@ -49,6 +50,7 @@ export const AnimatedButton = ({
   haptics,
   hapticsConfig,
   waitForAnimationFinish,
+  children,
   ...pressableProps
 }: AnimatedButtonProps) => {
   const [iconIndex, setIconIndex] = useState<number>(externalIconIndex ?? 0)
@@ -198,6 +200,7 @@ export const AnimatedButton = ({
               resizeMode={resizeMode}
             />
           </View>
+          {children}
         </>
       )}
     </Pressable>

packages/mobile/src/components/core/Screen/ScreenHeader.tsx

@@ -88,7 +88,7 @@ export const ScreenHeader = (props: ScreenHeaderProps) => {
           <GradientIcon
             icon={icon}
             height={20}
-            style={[styles.headerIcon, stylesProp?.header]}
+            style={[styles.headerIcon, stylesProp?.icon]}
             {...iconProps}
           />
         ) : null}

packages/mobile/src/screens/account-screen/AccountDrawer.tsx

@@ -25,6 +25,7 @@ import IconUserList from 'app/assets/images/iconUserList.svg'
 import { IconAudioBadge } from 'app/components/audio-rewards'
 import { Divider, Text } from 'app/components/core'
 import { ProfilePicture } from 'app/components/user'
+import UserBadges from 'app/components/user-badges'
 import { useRemoteVar } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
@@ -54,14 +55,16 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     justifyContent: 'space-between'
   },
   accountImage: {
-    height: spacing(12),
-    width: spacing(12),
-    marginBottom: spacing(3)
+    height: spacing(12.5),
+    width: spacing(12.5),
+    marginBottom: spacing(3),
+    borderWidth: 1
   },
   divider: {
     marginVertical: spacing(4)
   },
   accountInfo: {},
+  accountBadges: { alignSelf: 'center' },
   tokens: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -73,6 +76,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginRight: spacing(1)
   },
   accountStats: { flexDirection: 'row', paddingLeft: spacing(4) },
+  accountName: { flexDirection: 'row' },
   accountStat: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -141,9 +145,16 @@ export const AccountDrawer = (props: AccountDrawerProps) => {
       <View style={styles.header}>
         <Pressable style={styles.accountInfo} onPress={handlePressAccount}>
           <ProfilePicture profile={accountUser} style={styles.accountImage} />
-          <Text variant='h1' noGutter>
-            {name}
-          </Text>
+          <View style={styles.accountName}>
+            <Text variant='h1' noGutter>
+              {name}
+            </Text>
+            <UserBadges
+              user={accountUser}
+              hideName
+              style={styles.accountBadges}
+            />
+          </View>
           <Text weight='medium' fontSize='medium'>
             @{handle}
           </Text>

packages/mobile/src/screens/app-screen/AccountPictureHeader.tsx

@@ -14,19 +14,20 @@ const { getAccountUser } = accountSelectors
 
 const useStyles = makeStyles(({ spacing, palette }) => ({
   root: {
-    height: spacing(8),
-    width: spacing(8)
+    height: spacing(8) + 2,
+    width: spacing(8) + 2,
+    borderWidth: 1
   },
   notificationBubble: {
-    height: spacing(3) + 2,
-    width: spacing(3) + 2,
+    height: spacing(4),
+    width: spacing(4),
     borderColor: palette.white,
     borderWidth: 2,
     borderRadius: spacing(2),
     backgroundColor: palette.secondary,
     position: 'absolute',
     top: 0,
-    right: 2
+    right: 0
   }
 }))
 

packages/mobile/src/screens/app-screen/useAppScreenOptions.tsx

@@ -23,6 +23,7 @@ import type { ContextualParams } from 'app/hooks/useNavigation'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { makeStyles } from 'app/styles'
+import { spacing } from 'app/styles/spacing'
 import { formatCount } from 'app/utils/format'
 import { useThemeColors } from 'app/utils/theme'
 
@@ -173,7 +174,7 @@ export const useAppScreenOptions = (
             }
             if (isNavOverhaulEnabled) {
               return (
-                <View style={styles.headerLeft}>
+                <View style={[styles.headerLeft, { marginLeft: spacing(-2) }]}>
                   <AccountPictureHeader onPress={handlePressNotification} />
                 </View>
               )

packages/mobile/src/screens/explore-screen/ExploreScreen.tsx

@@ -61,6 +61,7 @@ const ExploreScreen = () => {
         text={messages.header}
         icon={IconExplore}
         iconProps={{ height: 30 }}
+        styles={{ icon: { marginLeft: 1 } }}
       />
       <ScreenContent>
         <TopTabNavigator screens={exploreScreens} />

packages/mobile/src/screens/favorites-screen/FavoritesScreen.tsx

@@ -43,7 +43,11 @@ export const FavoritesScreen = () => {
 
   return (
     <Screen>
-      <ScreenHeader text={messages.header} icon={IconFavorite} />
+      <ScreenHeader
+        text={messages.header}
+        icon={IconFavorite}
+        styles={{ icon: { marginLeft: 3 } }}
+      />
       {
         // ScreenContent handles the offline indicator.
         // Show favorites screen anyway when offline so users can see their downloads

packages/mobile/src/screens/feed-screen/FeedScreen.tsx

@@ -39,7 +39,11 @@ export const FeedScreen = () => {
 
   return (
     <Screen>
-      <ScreenHeader text={messages.header} icon={IconFeed}>
+      <ScreenHeader
+        text={messages.header}
+        icon={IconFeed}
+        styles={{ icon: { marginLeft: 2 } }}
+      >
         <FeedFilterButton />
       </ScreenHeader>
       <ScreenContent>

packages/mobile/src/screens/notifications-screen/NotificationsScreen.tsx

@@ -31,6 +31,7 @@ export const NotificationsScreen = () => {
         text={messages.header}
         icon={IconNotification}
         iconProps={{ height: 28, width: 28 }}
+        styles={{ icon: { marginLeft: -1 } }}
       />
       <ScreenContent>
         <NotificationList />