From fd84425bc603821611085fa3fa9a601ce07276e1 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Mon, 28 Apr 2025 11:51:39 -0400
Subject: [PATCH 1/3] Update submission artwork to go to track page

---
 .../desktop/RemixContestSubmissionsTab.tsx        | 15 ++++++++++++---
 .../remix-contests/RemixContestSubmissionsTab.tsx | 11 ++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
index dc688e3e509..d20b20ea23a 100644
--- a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
+++ b/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,16 @@ 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(() => {
+    navigate(track?.permalink ?? '')
+  }, [navigate, track?.permalink])
+
   return (
     <Flex column gap='s'>
       <Flex h={artworkSize} w={artworkSize} borderRadius='s'>
@@ -68,9 +75,11 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
               <TrackArtwork
                 style={{
                   width: '100%',
-                  height: '100%'
+                  height: '100%',
+                  cursor: 'pointer'
                 }}
                 trackId={track.track_id}
+                onClick={goToTrack}
                 size={SquareSizes.SIZE_480_BY_480}
               />
             </TrackFlair>
@@ -78,7 +87,7 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
             <Box
               h={userAvatarSize}
               w={userAvatarSize}
-              css={{ position: 'absolute', top: -8, right: -8 }}
+              css={{ position: 'absolute', top: -8, right: -8, zIndex: 10 }}
               borderRadius='circle'
             >
               <Avatar
diff --git a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
index c5855493a32..ff7d07ec88f 100644
--- a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
+++ b/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,16 @@ 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(() => {
+    navigate(track?.permalink ?? '')
+  }, [navigate, track?.permalink])
+
   return (
     <Flex column gap='s'>
       <Flex h={artworkSize} w={artworkSize} borderRadius='s'>
@@ -73,6 +81,7 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
                 }}
                 trackId={track.track_id}
                 size={SquareSizes.SIZE_480_BY_480}
+                onClick={goToTrack}
               />
             </TrackFlair>
             {/* User Avatar */}

From f3a9b67942ff4614b1f775c08dce46430ad71e3a Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Mon, 28 Apr 2025 12:38:23 -0400
Subject: [PATCH 2/3] small update

---
 .../components/desktop/RemixContestSubmissionsTab.tsx          | 3 ++-
 .../mobile/remix-contests/RemixContestSubmissionsTab.tsx       | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
index d20b20ea23a..7f0a65d15a6 100644
--- a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
+++ b/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
@@ -55,7 +55,8 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
   const displaySkeleton = isLoading || !track || !user
 
   const goToTrack = useCallback(() => {
-    navigate(track?.permalink ?? '')
+    if (!track?.permalink) return
+    navigate(track.permalink)
   }, [navigate, track?.permalink])
 
   return (
diff --git a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
index ff7d07ec88f..2c7a5b986ad 100644
--- a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
@@ -57,7 +57,8 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
   const displaySkeleton = isLoading || !track || !user
 
   const goToTrack = useCallback(() => {
-    navigate(track?.permalink ?? '')
+    if (!track?.permalink) return
+    navigate(track.permalink)
   }, [navigate, track?.permalink])
 
   return (

From 3a1e6955df203d0464d4a5e0e4f9b596c7203c03 Mon Sep 17 00:00:00 2001
From: KJ Shanks <kyle.j.shanks@gmail.com>
Date: Mon, 28 Apr 2025 13:02:32 -0400
Subject: [PATCH 3/3] another small update

---
 .../components/desktop/RemixContestSubmissionsTab.tsx           | 2 +-
 .../mobile/remix-contests/RemixContestSubmissionsTab.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
index 7f0a65d15a6..9fe147eedd2 100644
--- a/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
+++ b/packages/web/src/pages/track-page/components/desktop/RemixContestSubmissionsTab.tsx
@@ -74,7 +74,7 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
               hideToolTip
             >
               <TrackArtwork
-                style={{
+                css={{
                   width: '100%',
                   height: '100%',
                   cursor: 'pointer'
diff --git a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx b/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
index 2c7a5b986ad..5972143f950 100644
--- a/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/remix-contests/RemixContestSubmissionsTab.tsx
@@ -76,7 +76,7 @@ const SubmissionCard = ({ submission }: { submission: LineupData }) => {
               hideToolTip
             >
               <TrackArtwork
-                style={{
+                css={{
                   width: '100%',
                   height: '100%'
                 }}