[C-5779] Update mobile profile layout (#11421)

AudiusProject · Feb 20, 2025 · 17eef87 · 17eef87
1 parent fe50ca1
commit 17eef87
Show file tree

Hide file tree

Showing 12 changed files with 296 additions and 322 deletions.
diff --git a/packages/mobile/src/harmony-native/components/Text/Text.tsx b/packages/mobile/src/harmony-native/components/Text/Text.tsx
@@ -73,8 +73,6 @@ export const Text = forwardRef<TextBase, TextProps>((props, ref) => {
     ...(fontWeight === 'demiBold' && Platform.OS === 'ios'
       ? { marginTop: 2 }
       : {}),
-    // Fixes bold text misalignment on iOS
-    ...(fontWeight === 'bold' && Platform.OS === 'ios' ? { marginTop: 1 } : {}),
     flexShrink
   })
 

diff --git a/...s/mobile/src/screens/notifications-screen/Notification/NotificationProfilePictureList.tsx b/...s/mobile/src/screens/notifications-screen/Notification/NotificationProfilePictureList.tsx
@@ -6,7 +6,11 @@ import { View, Text } from 'react-native'
 import { makeStyles } from 'app/styles'
 
 import { NotificationProfilePicture } from './NotificationProfilePicture'
-import { PROFILE_PICTURE_BORDER_WIDTH } from './constants'
+import {
+  DEFAULT_IMAGE_WIDTH,
+  DEFAULT_IMAGE_HEIGHT,
+  PROFILE_PICTURE_BORDER_WIDTH
+} from './constants'
 
 const USER_LENGTH_LIMIT = 9
 const BASE_ZINDEX = 1
@@ -16,15 +20,6 @@ const messages = {
     `${remainingUsersCount < 100 ? '+' : ''}${formatCount(remainingUsersCount)}`
 }
 
-/**
- * Not all profile picture lists have the same profile picture size.
- * Some components pass in the dimensions (width and height) while others
- * use the default of spacing(10) - 2 (which is equal to 38).
- * We use the dimensions to determine how to position the
- * extra profile picture +N text.
- */
-const defaultImageDimensions = { width: 38, height: 38 }
-
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   root: {
     flexDirection: 'row'
@@ -87,10 +82,17 @@ export const ProfilePictureList = (props: ProfilePictureListProps) => {
     interactive,
     imageStyles
   } = props
-  const imageWidth = imageStyles?.width ?? defaultImageDimensions.width
-  const imageHeight = imageStyles?.height ?? defaultImageDimensions.height
+  /**
+   * Not all profile picture lists have the same profile picture size.
+   * Some components pass in the dimensions (width and height) while others
+   * use the default of spacing(10) - 2 (which is equal to 38).
+   * We use the dimensions to determine how to position the
+   * extra profile picture +N text.
+   */
+  const imageWidth = imageStyles?.width ?? DEFAULT_IMAGE_WIDTH
+  const imageHeight = imageStyles?.height ?? DEFAULT_IMAGE_HEIGHT
 
-  const useSmallText = imageWidth < defaultImageDimensions.width
+  const useSmallText = imageWidth < DEFAULT_IMAGE_WIDTH
 
   // We want the View containing the "+" count to be the size of the
   // inside content of the NotificationProfilePicture it is sitting above.

diff --git a/.../src/screens/notifications-screen/Notification/NotificationProfilePictureListSkeleton.tsx b/.../src/screens/notifications-screen/Notification/NotificationProfilePictureListSkeleton.tsx
@@ -3,39 +3,51 @@ import { View } from 'react-native'
 
 import { makeStyles } from 'app/styles'
 
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants'
+
 const useStyles = makeStyles(({ spacing, palette }) => ({
   root: {
-    flexDirection: 'row',
-    marginRight: spacing(6)
+    flexDirection: 'row'
   },
   image: {
     marginRight: spacing(-2),
-    width: 28,
-    height: 28,
-    borderRadius: 14,
     backgroundColor: palette.skeleton
-  },
-  extra: {
-    width: spacing(2)
   }
 }))
 
 type ProfilePictureListSkeletonProps = {
   count: number
   limit: number
+  imageStyles?: {
+    width?: number
+    height?: number
+  }
 }
 
-export const ProfilePictureListSkeleton = (
-  props: ProfilePictureListSkeletonProps
-) => {
-  const { count, limit } = props
+export const ProfilePictureListSkeleton = ({
+  count,
+  limit,
+  imageStyles
+}: ProfilePictureListSkeletonProps) => {
   const styles = useStyles()
+  const imageWidth = imageStyles?.width ?? DEFAULT_IMAGE_WIDTH
+  const imageHeight = imageStyles?.height ?? DEFAULT_IMAGE_HEIGHT
+
   return (
     <View style={styles.root}>
       {times(Math.min(count, limit)).map((index) => (
-        <View key={index} style={styles.image} />
+        <View
+          key={index}
+          style={[
+            styles.image,
+            {
+              width: imageWidth,
+              height: imageHeight,
+              borderRadius: Math.ceil(imageWidth / 2)
+            }
+          ]}
+        />
       ))}
-      {count >= limit ? <View style={styles.extra} /> : null}
     </View>
   )
 }
diff --git a/packages/mobile/src/screens/notifications-screen/Notification/constants.ts b/packages/mobile/src/screens/notifications-screen/Notification/constants.ts
@@ -1,2 +1,4 @@
 export const USER_LENGTH_LIMIT = 8
 export const PROFILE_PICTURE_BORDER_WIDTH = 2
+export const DEFAULT_IMAGE_WIDTH = 38
+export const DEFAULT_IMAGE_HEIGHT = 38
diff --git a/packages/mobile/src/screens/notifications-screen/Notification/index.ts b/packages/mobile/src/screens/notifications-screen/Notification/index.ts
@@ -4,6 +4,7 @@ export * from './NotificationBody'
 export * from './NotificationTitle'
 export * from './NotificationText'
 export * from './NotificationProfilePictureList'
+export * from './NotificationProfilePictureListSkeleton'
 export * from './NotificationProfilePicture'
 export * from './UserNameLink'
 export * from './EntityLink'

diff --git a/packages/mobile/src/screens/profile-screen/ProfileHeader/ExpandedSection.tsx b/packages/mobile/src/screens/profile-screen/ProfileHeader/ExpandedSection.tsx
diff --git a/packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileHeader.tsx b/packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileHeader.tsx
@@ -21,10 +21,11 @@ import { TipAudioButton } from '../TipAudioButton'
 import { UploadTrackButton } from '../UploadTrackButton'
 import { useSelectProfile } from '../selectors'
 
+import { Bio } from './Bio'
 import { CollapsedSection } from './CollapsedSection'
 import { ExpandHeaderToggleButton } from './ExpandHeaderToggleButton'
-import { ExpandedSection } from './ExpandedSection'
-import { TopSupporters } from './TopSupporters'
+import { ProfileInfoTiles } from './ProfileInfoTiles'
+import { SocialsAndSites } from './SocialsAndSites'
 
 const getUserId = accountSelectors.getUserId
 
@@ -133,7 +134,11 @@ export const ProfileHeader = memo((props: ProfileHeaderProps) => {
         <OnlineOnly>
           <ProfileMetrics />
           {isExpanded ? (
-            <ExpandedSection />
+            <>
+              <Bio />
+              <SocialsAndSites />
+              <ProfileInfoTiles />
+            </>
           ) : (
             <CollapsedSection
               isExpandable={isExpandable}
@@ -150,8 +155,9 @@ export const ProfileHeader = memo((props: ProfileHeaderProps) => {
           {!hasUserFollowed ? null : (
             <ArtistRecommendations onClose={handleCloseArtistRecs} />
           )}
-          {isOwner ? <UploadTrackButton /> : <TipAudioButton />}
-          <TopSupporters />
+          <Flex pointerEvents='box-none' mt='xs'>
+            {isOwner ? <UploadTrackButton /> : <TipAudioButton />}
+          </Flex>
         </OnlineOnly>
       </Flex>
     </>