[PE-6067] Update submission artwork to go to track page (#11956)

Author: Kyle-Shanks

packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { LineupData, useUser, useTrack } from '@audius/common/api'
 import { ID, SquareSizes } from '@audius/common/models'
 import {
@@ -8,7 +10,7 @@ import {
   Skeleton,
   Text
 } from '@audius/harmony'
-import { Link } from 'react-router-dom-v5-compat'
+import { Link, useNavigate } from 'react-router-dom-v5-compat'
 
 import { Avatar } from 'components/avatar'
 import { TrackLink, UserLink } from 'components/link'
@@ -46,11 +48,17 @@ export const RemixContestSubmissionsTab = ({
 }
 
 const SubmissionCard = ({ submission }: { submission: LineupData }) => {
+  const navigate = useNavigate()
   const { data: track, isLoading: trackLoading } = useTrack(submission.id)
   const { data: user, isLoading: userLoading } = useUser(track?.owner_id)
   const isLoading = trackLoading || userLoading
   const displaySkeleton = isLoading || !track || !user
 
+  const goToTrack = useCallback(() => {
+    if (!track?.permalink) return
+    navigate(track.permalink)
+  }, [navigate, track?.permalink])
+
   return (
     <Flex column gap='s'>
       <Flex h={artworkSize} w={artworkSize} borderRadius='s'>
@@ -66,19 +74,21 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
               hideToolTip
             >
               <TrackArtwork
-                style={{
+                css={{
                   width: '100%',
-                  height: '100%'
+                  height: '100%',
+                  cursor: 'pointer'
                 }}
                 trackId={track.track_id}
+                onClick={goToTrack}
                 size={SquareSizes.SIZE_480_BY_480}
               />
             </TrackFlair>
             {/* User Avatar */}
             <Box
               h={userAvatarSize}
               w={userAvatarSize}
-              css={{ position: 'absolute', top: -8, right: -8 }}
+              css={{ position: 'absolute', top: -8, right: -8, zIndex: 10 }}
               borderRadius='circle'
             >
               <Avatar

packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react'
+
 import { LineupData, useTrack, useUser } from '@audius/common/api'
 import { ID, SquareSizes } from '@audius/common/models'
 import {
@@ -9,6 +11,7 @@ import {
   Text
 } from '@audius/harmony'
 import { Link } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom-v5-compat'
 
 import { Avatar } from 'components/avatar'
 import { TrackLink, UserLink } from 'components/link'
@@ -18,7 +21,7 @@ import { Size } from 'components/track-flair/types'
 import { trackRemixesPage } from 'utils/route'
 
 const artworkSize = 140
-const userAvatarSize = 40
+const userAvatarSize = 50
 
 const messages = {
   noSubmissions: 'No submissions yet',
@@ -47,11 +50,17 @@ export const RemixContestSubmissionsTab = ({
 }
 
 const SubmissionCard = ({ submission }: { submission: LineupData }) => {
+  const navigate = useNavigate()
   const { data: track, isLoading: trackLoading } = useTrack(submission.id)
   const { data: user, isLoading: userLoading } = useUser(track?.owner_id)
   const isLoading = trackLoading || userLoading
   const displaySkeleton = isLoading || !track || !user
 
+  const goToTrack = useCallback(() => {
+    if (!track?.permalink) return
+    navigate(track.permalink)
+  }, [navigate, track?.permalink])
+
   return (
     <Flex column gap='s'>
       <Flex h={artworkSize} w={artworkSize} borderRadius='s'>
@@ -67,12 +76,13 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
               hideToolTip
             >
               <TrackArtwork
-                style={{
+                css={{
                   width: '100%',
                   height: '100%'
                 }}
                 trackId={track.track_id}
                 size={SquareSizes.SIZE_480_BY_480}
+                onClick={goToTrack}
               />
             </TrackFlair>
             {/* User Avatar */}