Fix missing collection mobile artwork (#11935)

Author: Isaac Solo

packages/mobile/src/components/lineup-tile/LineupTile.tsx

@@ -101,7 +101,6 @@ export const LineupTile = ({
           isCollection={isCollection}
         />
         <LineupTileMetadata
-          coSign={coSign}
           renderImage={renderImage}
           onPressTitle={onPressTitle}
           title={title}

packages/mobile/src/components/lineup-tile/LineupTileArt.tsx

@@ -34,11 +34,13 @@ export const LineupTileArt = (props: LineupTileArtProps) => {
   const styles = useStyles()
 
   const imageElement = (
-    <View style={styles.imageRoot}>
-      <View style={[trackTileStyles.image, styles.backdrop]} />
-      <FadeInView style={styles.image} startOpacity={0} duration={500}>
-        {renderImage({ style: trackTileStyles.image })}
-      </FadeInView>
+    <View style={[style, trackTileStyles.image]}>
+      <View style={styles.imageRoot}>
+        <View style={[trackTileStyles.image, styles.backdrop]} />
+        <FadeInView style={styles.image} startOpacity={0} duration={500}>
+          {renderImage({ style: trackTileStyles.image })}
+        </FadeInView>
+      </View>
     </View>
   )
 

packages/mobile/src/components/lineup-tile/LineupTileMetadata.tsx

@@ -1,4 +1,4 @@
-import type { ID, Remix, User } from '@audius/common/models'
+import type { ID, User } from '@audius/common/models'
 import { playerSelectors } from '@audius/common/store'
 import { TouchableOpacity, View } from 'react-native'
 import { useSelector } from 'react-redux'
@@ -11,7 +11,7 @@ import type { GestureResponderHandler } from 'app/types/gesture'
 import { useThemeColors } from 'app/utils/theme'
 
 import { LineupTileArt } from './LineupTileArt'
-import { useStyles as useTrackTileStyles } from './styles'
+import { useStyles as useTileStyles } from './styles'
 import type { LineupTileProps } from './types'
 
 const { getPlaying } = playerSelectors
@@ -36,7 +36,6 @@ const useStyles = makeStyles(({ palette }) => ({
 }))
 
 type Props = {
-  coSign?: Remix | null
   onPressTitle?: GestureResponderHandler
   renderImage: LineupTileProps['renderImage']
   title: string
@@ -47,7 +46,6 @@ type Props = {
 }
 
 export const LineupTileMetadata = ({
-  coSign,
   onPressTitle,
   renderImage,
   title,
@@ -57,7 +55,7 @@ export const LineupTileMetadata = ({
   trackId
 }: Props) => {
   const styles = useStyles()
-  const trackTileStyles = useTrackTileStyles()
+  const tileStyles = useTileStyles()
   const { primary } = useThemeColors()
 
   const isActive = isPlayingUid
@@ -70,11 +68,13 @@ export const LineupTileMetadata = ({
     <View style={styles.metadata}>
       <LineupTileArt
         renderImage={renderImage}
-        style={trackTileStyles.imageContainer}
+        style={tileStyles.imageContainer}
         trackId={trackId}
       />
       <FadeInView
-        style={trackTileStyles.titles}
+        style={
+          type === 'track' ? tileStyles.titles : tileStyles.collectionTitles
+        }
         startOpacity={0}
         duration={500}
       >
@@ -91,8 +91,8 @@ export const LineupTileMetadata = ({
 
         <TouchableOpacity
           style={{
-            ...trackTileStyles.title,
-            ...(isPlaying ? trackTileStyles.titlePlaying : {})
+            ...tileStyles.title,
+            ...(isPlaying ? tileStyles.titlePlaying : {})
           }}
           onPress={onPressTitle}
         >

packages/mobile/src/components/lineup-tile/styles.ts

@@ -36,12 +36,19 @@ export const useStyles = makeStyles(({ palette }) => ({
     marginLeft: spacing(2)
   },
   titles: {
-    justifyContent: 'center',
+    paddingVertical: spacing(1),
     alignItems: 'flex-start',
     flexBasis: '65%',
     marginRight: spacing(3),
     marginTop: spacing(2),
-    gap: 2
+    gap: spacing(1)
+  },
+  collectionTitles: {
+    alignItems: 'flex-start',
+    flexBasis: '65%',
+    marginRight: spacing(3),
+    marginTop: spacing(2),
+    gap: spacing(1)
   },
   title: {
     ...flexRowCentered(),

packages/mobile/src/components/track-flair/TrackFlair.tsx

@@ -85,7 +85,7 @@ export const TrackFlair = ({ size, children, style, trackId }: CoSignProps) => {
 
   const { size: iconSize, position } = layoutBySize[size]
 
-  if (!track) return null
+  if (!track) return <>{children}</>
 
   const remixTrack = track.remix_of?.tracks[0]
   const hasRemixAuthorReposted = remixTrack?.has_remix_author_reposted ?? false
@@ -100,9 +100,9 @@ export const TrackFlair = ({ size, children, style, trackId }: CoSignProps) => {
   ) : null
 
   return (
-    <View style={style}>
+    <>
       <View>{children}</View>
       <View style={[styles.check, position]}>{flair}</View>
-    </View>
+    </>
   )
 }