[PAY-1658] Artist pick, hidden track tile tags moved to mid-left

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

@@ -107,11 +107,7 @@ export const LineupTile = ({
         <LineupTileTopRight
           duration={duration}
           trackId={id}
-          isUnlisted={isUnlisted}
-          premiumConditions={premiumConditions}
-          isArtistPick={isArtistPick}
           isLongFormContent={isLongFormContent}
-          showArtistPick={showArtistPick}
         />
         <LineupTileMetadata
           artistName={name}
@@ -140,6 +136,8 @@ export const LineupTile = ({
           doesUserHaveAccess={doesUserHaveAccess}
           premiumConditions={premiumConditions}
           isOwner={isOwner}
+          isArtistPick={isArtistPick}
+          showArtistPick={showArtistPick}
         />
       </View>
       {children}

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

@@ -11,7 +11,7 @@ import { View } from 'react-native'
 import IconCart from 'app/assets/images/iconCart.svg'
 import IconCollectible from 'app/assets/images/iconCollectible.svg'
 import IconSpecialAccess from 'app/assets/images/iconSpecialAccess.svg'
-import Text from 'app/components/text'
+import { Text } from 'app/components/core'
 import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { makeStyles, flexRowCentered } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
@@ -27,10 +27,6 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
   root: {
     ...flexRowCentered(),
     gap: spacing(1)
-  },
-  text: {
-    fontSize: typography.fontSize.xs,
-    fontFamily: typography.fontByWeight.medium
   }
 }))
 
@@ -94,7 +90,9 @@ export const LineupTilePremiumContentTypeTag = ({
   return (
     <View style={styles.root}>
       <Icon fill={color} height={spacing(4)} width={spacing(4)} />
-      <Text style={[styles.text, { color }]}>{text}</Text>
+      <Text fontSize='xs' colorValue={color}>
+        {text}
+      </Text>
     </View>
   )
 }

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

@@ -17,11 +17,12 @@ import { View, TouchableOpacity } from 'react-native'
 import { useDispatch } from 'react-redux'
 
 import IconHeart from 'app/assets/images/iconHeart.svg'
+import IconHidden from 'app/assets/images/iconHidden.svg'
 import IconRepost from 'app/assets/images/iconRepost.svg'
-import { LockedStatusBadge } from 'app/components/core'
+import IconStar from 'app/assets/images/iconStar.svg'
+import { LockedStatusBadge, Text } from 'app/components/core'
 import { CollectionDownloadStatusIndicator } from 'app/components/offline-downloads/CollectionDownloadStatusIndicator'
 import { TrackDownloadStatusIndicator } from 'app/components/offline-downloads/TrackDownloadStatusIndicator'
-import Text from 'app/components/text'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { makeStyles, flexRowCentered } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
@@ -42,6 +43,11 @@ const formatPlayCount = (playCount?: number) => {
   return `${formatCount(playCount)} ${suffix}`
 }
 
+const messages = {
+  artistPick: "Artist's Pick",
+  hiddenTrack: 'Hidden Track'
+}
+
 const useStyles = makeStyles(({ spacing, palette }) => ({
   root: {
     flexDirection: 'row',
@@ -76,6 +82,10 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
   repostStat: {
     height: spacing(4),
     width: spacing(4)
+  },
+  tagContainer: {
+    ...flexRowCentered(),
+    gap: spacing(1)
   }
 }))
 
@@ -96,6 +106,8 @@ type Props = {
   doesUserHaveAccess?: boolean
   premiumConditions: Nullable<PremiumConditions>
   isOwner: boolean
+  isArtistPick?: boolean
+  showArtistPick?: boolean
 }
 
 export const LineupTileStats = ({
@@ -114,7 +126,9 @@ export const LineupTileStats = ({
   showRankIcon,
   doesUserHaveAccess,
   premiumConditions,
-  isOwner
+  isOwner,
+  isArtistPick,
+  showArtistPick
 }: Props) => {
   const styles = useStyles()
   const trackTileStyles = useTrackTileStyles()
@@ -155,6 +169,30 @@ export const LineupTileStats = ({
             isOwner={isOwner}
           />
         ) : null}
+        {!premiumConditions && showArtistPick && isArtistPick ? (
+          <View style={styles.tagContainer}>
+            <IconStar
+              fill={neutralLight4}
+              height={spacing(4)}
+              width={spacing(4)}
+            />
+            <Text fontSize='xs' colorValue={neutralLight4}>
+              {messages.artistPick}
+            </Text>
+          </View>
+        ) : null}
+        {isUnlisted ? (
+          <View style={styles.tagContainer}>
+            <IconHidden
+              fill={neutralLight4}
+              height={spacing(4)}
+              width={spacing(4)}
+            />
+            <Text fontSize='xs' colorValue={neutralLight4}>
+              {messages.hiddenTrack}
+            </Text>
+          </View>
+        ) : null}
         <View style={styles.leftStats}>
           {hasEngagement && !isUnlisted ? (
             <>

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

@@ -1,4 +1,3 @@
-import type { PremiumConditions, Nullable } from '@audius/common'
 import {
   FeatureFlags,
   accountSelectors,
@@ -7,12 +6,9 @@ import {
 } from '@audius/common'
 import type { ViewStyle } from 'react-native'
 import { StyleSheet, View } from 'react-native'
-import type { SvgProps } from 'react-native-svg'
 import { useSelector } from 'react-redux'
 
 import IconCheck from 'app/assets/images/iconCheck.svg'
-import IconHidden from 'app/assets/images/iconHidden.svg'
-import IconStar from 'app/assets/images/iconStar.svg'
 import Text from 'app/components/text'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { flexRowCentered } from 'app/styles'
@@ -26,8 +22,6 @@ const { getUserId } = accountSelectors
 const { getTrackPosition } = playbackPositionSelectors
 
 const messages = {
-  artistPick: "Artist's Pick",
-  hiddenTrack: 'Hidden Track',
   timeLeft: 'left',
   played: 'Played'
 }
@@ -44,41 +38,9 @@ const styles = StyleSheet.create({
     top: 10,
     right: 10,
     left: 0
-  },
-  item: {
-    ...flexRowEnd(),
-    marginRight: 8
-  },
-  icon: {
-    marginRight: 4
   }
 })
 
-type ItemProps = {
-  /**
-   * Icon shown on the left hand side of the item
-   */
-  icon: React.FC<SvgProps>
-  /**
-   * Label shown on the right hand side of the item
-   */
-  label: string
-  /**
-   * Color of icon and label
-   */
-  color: string
-}
-
-const LineupTileTopRightItem = ({ icon: Icon, label, color }: ItemProps) => {
-  const trackTileStyles = useTrackTileStyles()
-  return (
-    <View style={styles.item}>
-      <Icon height={16} width={16} fill={color} style={styles.icon} />
-      <Text style={{ ...trackTileStyles.statText, color }}>{label}</Text>
-    </View>
-  )
-}
-
 type Props = {
   /**
    * The duration of the track or tracks
@@ -88,42 +50,22 @@ type Props = {
    * The id of the track
    */
   trackId?: number
-  /**
-   * Whether or not the track is the artist pick
-   */
-  isArtistPick?: boolean
   /**
    * Whether or not the track is long-form content (podcast/audiobook/etc)
    */
   isLongFormContent?: boolean
-  /**
-   * Whether or not the track is unlisted (hidden)
-   */
-  isUnlisted?: boolean
-  /**
-   * Whether or not to show the artist pick icon
-   */
-  showArtistPick?: boolean
-  /**
-   * Premium conditions to determine what icon and label to show
-   */
-  premiumConditions?: Nullable<PremiumConditions>
 }
 
 export const LineupTileTopRight = ({
   duration,
   trackId,
-  isArtistPick,
-  isLongFormContent,
-  isUnlisted,
-  showArtistPick,
-  premiumConditions
+  isLongFormContent
 }: Props) => {
   const { isEnabled: isNewPodcastControlsEnabled } = useFeatureFlag(
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED,
     FeatureFlags.PODCAST_CONTROL_UPDATES_ENABLED_FALLBACK
   )
-  const { neutralLight4, secondary } = useThemeColors()
+  const { secondary } = useThemeColors()
   const trackTileStyles = useTrackTileStyles()
   const currentUserId = useSelector(getUserId)
   const playbackPositionInfo = useSelector((state) =>
@@ -147,20 +89,6 @@ export const LineupTileTopRight = ({
 
   return (
     <View style={styles.topRight}>
-      {!premiumConditions && showArtistPick && isArtistPick ? (
-        <LineupTileTopRightItem
-          icon={IconStar}
-          label={messages.artistPick}
-          color={neutralLight4}
-        />
-      ) : null}
-      {isUnlisted && (
-        <LineupTileTopRightItem
-          icon={IconHidden}
-          label={messages.hiddenTrack}
-          color={neutralLight4}
-        />
-      )}
       <View style={trackTileStyles.statTextContainer}>
         <Text
           style={[