From c339c40341ee9b8b957771fc8164aef818a4bca1 Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Mon, 16 Sep 2024 12:28:09 -0400
Subject: [PATCH 1/3] Harmonize web challenge UI

---
 .../ChallengeRewardsDrawerContent.tsx         |  13 --
 .../ChallengeRewardsTile.tsx                  |  14 +-
 .../audio-rewards-page/RewardsTile.module.css |   4 -
 .../AudioMatchingRewardsModalContent.tsx      |  48 ++++--
 .../ChallengeRewardsModal.tsx                 | 153 +++++++++++-------
 .../ProgressDescription.tsx                   |  30 ++--
 .../ChallengeRewardsModal/ProgressReward.tsx  |  20 ++-
 .../ChallengeRewardsModal/styles.module.css   | 111 -------------
 8 files changed, 163 insertions(+), 230 deletions(-)

diff --git a/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerContent.tsx b/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerContent.tsx
index 057cd686ef1..a33691b4b59 100644
--- a/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerContent.tsx
+++ b/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsDrawerContent.tsx
@@ -130,10 +130,6 @@ export const ChallengeRewardsDrawerContent = ({
       )
     : messages.incomplete
 
-  const claimableAmountText = `${formatNumberCommas(claimableAmount)} ${
-    messages.claimableLabel
-  }`
-
   const renderCooldownSummaryTable = () => {
     if (isCooldownChallenge && !isCooldownChallengesEmpty) {
       return (
@@ -216,15 +212,6 @@ export const ChallengeRewardsDrawerContent = ({
               renderCooldownSummaryTable()
             ) : (
               <>
-                <Text
-                  key='claimableAmount'
-                  style={styles.claimableAmount}
-                  variant='label'
-                  strength='strong'
-                  textTransform='uppercase'
-                >
-                  {claimableAmountText}
-                </Text>
                 <Button
                   style={styles.claimButton}
                   variant={claimInProgress ? 'secondary' : 'primary'}
diff --git a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
index 0f9334108ed..73faa6054eb 100644
--- a/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
+++ b/packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx
@@ -3,8 +3,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import {
   formatCooldownChallenges,
   useChallengeCooldownSchedule,
-  useFormattedProgressLabel,
-  useFeatureFlag
+  useFormattedProgressLabel
 } from '@audius/common/hooks'
 import {
   Name,
@@ -12,7 +11,7 @@ import {
   ChallengeRewardID,
   OptimisticUserChallenge
 } from '@audius/common/models'
-import { FeatureFlags, StringKeys } from '@audius/common/services'
+import { StringKeys } from '@audius/common/services'
 import {
   challengesSelectors,
   audioRewardsPageSelectors,
@@ -408,9 +407,6 @@ const RewardsTile = ({ className }: RewardsTileProps) => {
   const userChallenges = useSelector(getUserChallenges)
   const optimisticUserChallenges = useSelector(getOptimisticUserChallenges)
   const [haveChallengesLoaded, setHaveChallengesLoaded] = useState(false)
-  const { isEnabled: isRewardsCooldownEnabled } = useFeatureFlag(
-    FeatureFlags.REWARDS_COOLDOWN
-  )
 
   // The referred challenge only needs a tile if the user was referred
   const hideReferredTile = !userChallenges.referred?.is_complete
@@ -461,13 +457,15 @@ const RewardsTile = ({ className }: RewardsTileProps) => {
     <Tile className={wm(styles.rewardsTile, className)}>
       <span className={wm(styles.title)}>{messages.title}</span>
       <div className={wm(styles.subtitle)}>
-        <span>{messages.description1}</span>
+        <Text variant='body' strength='strong'>
+          {messages.description1}
+        </Text>
       </div>
       {userChallengesLoading && !haveChallengesLoaded ? (
         <LoadingSpinner className={wm(styles.loadingRewardsTile)} />
       ) : (
         <>
-          {isRewardsCooldownEnabled && !shouldHideCumulativeRewards ? (
+          {!shouldHideCumulativeRewards ? (
             <>
               <ClaimAllPanel />
               <Divider className={wm(styles.divider)} />
diff --git a/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css b/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css
index 9234a9019e6..cf50d53a854 100644
--- a/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css
+++ b/packages/web/src/pages/audio-rewards-page/RewardsTile.module.css
@@ -21,11 +21,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--harmony-neutral);
-  font-weight: var(--harmony-font-bold);
-  line-height: 32px;
   margin-bottom: 40px;
-  font-size: var(--harmony-font-xl);
 }
 
 .subtitle.mobile {
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
index d4f2e87b2ee..5e7d2e3520d 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
@@ -14,11 +14,11 @@ import {
 import {
   Button,
   ButtonProps,
+  Flex,
   IconArrowRight,
   IconCloudUpload,
   Text
 } from '@audius/harmony'
-import cn from 'classnames'
 import { useSelector } from 'react-redux'
 
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
@@ -94,7 +94,6 @@ export const AudioMatchingRewardsModalContent = ({
   onNavigateAway,
   errorContent
 }: AudioMatchingRewardsModalContentProps) => {
-  const wm = useWithMobileStyle(styles.mobile)
   const isMobile = useIsMobile()
   const navigateToPage = useNavigateToPage()
   const { fullDescription } = challengeRewardsConfig[challengeName]
@@ -109,12 +108,12 @@ export const AudioMatchingRewardsModalContent = ({
   const progressDescription = (
     <ProgressDescription
       description={
-        <div className={styles.audioMatchingDescription}>
+        <Flex column gap='m'>
           <Text variant='body'>{fullDescription?.(challenge)}</Text>
           <Text variant='body' color='subdued'>
             {messages.descriptionSubtext[challengeName]}
           </Text>
-        </div>
+        </Flex>
       }
     />
   )
@@ -127,13 +126,20 @@ export const AudioMatchingRewardsModalContent = ({
 
   const progressStatusLabel =
     userChallenge && userChallenge?.disbursed_amount > 0 ? (
-      <div className={styles.audioMatchingTotalContainer}>
+      <Flex
+        alignItems='center'
+        justifyContent='center'
+        ph='xl'
+        pv='l'
+        borderTop='strong'
+        backgroundColor='surface2'
+      >
         <Text variant='label' size='l' strength='strong'>
           {messages.totalClaimed(
             formatNumberCommas(userChallenge.disbursed_amount.toString())
           )}
         </Text>
-      </div>
+      </Flex>
     ) : null
 
   const handleClickCTA = useCallback(() => {
@@ -176,25 +182,37 @@ export const AudioMatchingRewardsModalContent = ({
   }
 
   return (
-    <div className={wm(cn(styles.container, styles.audioMatchingContainer))}>
+    <Flex column gap='2xl'>
       {isMobile ? (
         <>
           {progressDescription}
-          <div className={wm(styles.progressCard)}>
-            <div className={wm(styles.progressInfo)}>{progressReward}</div>
+          <Flex
+            column
+            border='strong'
+            borderRadius='m'
+            w='100%'
+            css={{ overflow: 'hidden' }}
+          >
+            <Flex justifyContent='center'>{progressReward}</Flex>
             {progressStatusLabel}
-          </div>
+          </Flex>
           {renderCooldownSummaryTable()}
         </>
       ) : (
         <>
-          <div className={styles.progressCard}>
-            <div className={styles.progressInfo}>
+          <Flex
+            column
+            border='strong'
+            borderRadius='m'
+            w='100%'
+            css={{ overflow: 'hidden' }}
+          >
+            <Flex justifyContent='center'>
               {progressDescription}
               {progressReward}
-            </div>
+            </Flex>
             {progressStatusLabel}
-          </div>
+          </Flex>
           {renderCooldownSummaryTable()}
         </>
       )}
@@ -216,6 +234,6 @@ export const AudioMatchingRewardsModalContent = ({
         />
       )}
       {errorContent}
-    </div>
+    </Flex>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
index 792f1f37208..3a192a437ce 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -2,10 +2,8 @@ import { useCallback, useEffect, useContext, useMemo } from 'react'
 
 import {
   formatCooldownChallenges,
-  useChallengeCooldownSchedule,
-  useFeatureFlag
+  useChallengeCooldownSchedule
 } from '@audius/common/hooks'
-import { FeatureFlags } from '@audius/common/services'
 import {
   accountSelectors,
   challengesSelectors,
@@ -126,7 +124,11 @@ const messages = {
   profileCheckProfileDescription: 'Profile Description',
   profileCheckFavorite: 'Favorite Track/Playlist',
   profileCheckRepost: 'Repost Track/Playlist',
-  profileCheckFollow: 'Follow Five People'
+  profileCheckFollow: 'Follow Five People',
+  progress: 'Progress',
+  taskDetails: 'Task Details',
+  complete: 'Complete',
+  incomplete: 'Incomplete'
 }
 
 type InviteLinkProps = {
@@ -206,7 +208,17 @@ const ProfileChecks = () => {
   }
 
   return (
-    <div className={wm(styles.profileTaskContainer)}>
+    <Flex
+      column
+      gap='m'
+      wrap='wrap'
+      ph='xl'
+      pv='m'
+      justifyContent='center'
+      css={{
+        maxHeight: '150px'
+      }}
+    >
       {Object.keys(config).map((key) => (
         <div className={wm(styles.profileTask)} key={key}>
           {config[key] ? (
@@ -217,7 +229,7 @@ const ProfileChecks = () => {
           <p className={cn({ [styles.completeText]: config[key] })}>{key}</p>
         </div>
       ))}
-    </div>
+    </Flex>
   )
 }
 
@@ -238,9 +250,6 @@ type BodyProps = {
 }
 
 const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
-  const { isEnabled: isRewardsCooldownEnabled } = useFeatureFlag(
-    FeatureFlags.REWARDS_COOLDOWN
-  )
   const { toast } = useContext(ToastContext)
   const claimStatus = useSelector(getClaimStatus)
   const aaoErrorCode = useSelector(getAAOErrorCode)
@@ -305,49 +314,52 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
       {messages.verifiedChallenge}
     </div>
   ) : (
-    'Task'
+    <Text variant='label' size='l' strength='strong'>
+      {messages.taskDetails}
+    </Text>
   )
-  const progressDescription = isRewardsCooldownEnabled ? (
-    <div className={styles.audioMatchingDescription}>
+  const progressDescription = (
+    <Flex column gap='m'>
       <Text variant='body'>{fullDescription?.(challenge)}</Text>
       {isCooldownChallenge ? (
         <Text variant='body' color='subdued'>
           {messages.cooldownDescription}
         </Text>
       ) : null}
-    </div>
-  ) : (
-    fullDescription?.(challenge)
+    </Flex>
   )
 
   const renderProgressStatusLabel = () => (
-    <div
-      className={cn(styles.progressStatus, {
-        [styles.incomplete]: challenge?.state === 'incomplete',
-        [styles.inProgress]: challenge?.state === 'in_progress',
-        [styles.complete]:
-          challenge?.state === 'completed' || challenge?.state === 'disbursed'
-      })}
-    >
+    <Flex alignItems='center'>
       {challenge?.state === 'incomplete' ? (
-        <h3 className={styles.incomplete}>Incomplete</h3>
+        <Text variant='label' size='l' strength='strong' color='subdued'>
+          {messages.incomplete}
+        </Text>
       ) : null}
       {challenge?.state === 'completed' || challenge?.state === 'disbursed' ? (
         <Flex gap='s' justifyContent='center' alignItems='center'>
           <IconCheck width={16} height={16} color='subdued' />
-          <h3 className={styles.complete}>Complete</h3>
+          <Text variant='label' size='l' strength='strong' color='subdued'>
+            {messages.complete}
+          </Text>
         </Flex>
       ) : null}
       {challenge?.state === 'in_progress' && progressLabel ? (
-        <h3 className={styles.inProgress}>
+        <Text
+          variant='label'
+          size='l'
+          strength='strong'
+          color='subdued'
+          css={{ whiteSpace: 'nowrap' }}
+        >
           {fillString(
             progressLabel,
             formatNumberCommas(currentStepCount.toString()),
             formatNumberCommas(challenge?.max_steps?.toString() ?? '')
           )}
-        </h3>
+        </Text>
       ) : null}
-    </div>
+    </Flex>
   )
 
   const inviteLink = useMemo(
@@ -416,11 +428,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
   }, [])
 
   const renderCooldownSummaryTable = () => {
-    if (
-      isRewardsCooldownEnabled &&
-      isCooldownChallenge &&
-      !isCooldownChallengesEmpty
-    ) {
+    if (isCooldownChallenge && !isCooldownChallengesEmpty) {
       return (
         <SummaryTable
           title={messages.upcomingRewards}
@@ -438,18 +446,27 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
   const renderProgressBar = () => {
     if (showProgressBar && challenge.max_steps) {
       return (
-        <div className={wm(styles.progressBarSection)}>
+        <Flex
+          ph={isMobile ? 'l' : undefined}
+          pv={isMobile ? 'xl' : undefined}
+          borderLeft={isMobile ? 'strong' : undefined}
+          css={{
+            flex: isMobile ? '1 1 0%' : undefined
+          }}
+          column={isMobile}
+          gap={isMobile ? 's' : undefined}
+        >
           {isMobile ? (
-            <h3>Progress</h3>
-          ) : modalType === 'profile-completion' ? (
-            <ProfileChecks />
+            <Text variant='label' size='l' strength='strong' color='subdued'>
+              {messages.progress}
+            </Text>
           ) : null}
           <ProgressBar
             className={wm(styles.progressBar)}
             value={currentStepCount}
             max={challenge?.max_steps}
           />
-        </div>
+        </Flex>
       )
     }
     return null
@@ -491,6 +508,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
           isLoading={claimInProgress}
           iconRight={IconCheck}
           onClick={onClaimRewardClicked}
+          fullWidth
         >
           {messages.claimableAmountLabel(audioToClaim)}
         </Button>
@@ -523,30 +541,45 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
     )
   } else {
     return (
-      <div className={wm(styles.container)}>
+      <Flex column alignItems='center' gap='2xl'>
         {isMobile ? (
           <>
             <ProgressDescription
               label={progressDescriptionLabel}
               description={progressDescription}
             />
-            <div className={wm(styles.progressCard)}>
-              <div className={wm(styles.progressInfo)}>
+            <Flex
+              column
+              border='strong'
+              borderRadius='m'
+              w='100%'
+              justifyContent='center'
+              backgroundColor='surface1'
+            >
+              <Flex justifyContent='center' borderBottom='strong'>
                 <ProgressReward
                   amount={formatNumberCommas(challenge?.totalAmount ?? '')}
                   subtext={messages.audio}
                 />
                 {renderProgressBar()}
-              </div>
-              {renderProgressStatusLabel()}
-            </div>
+              </Flex>
+              <Flex justifyContent='center' ph='xl' pv='l'>
+                {renderProgressStatusLabel()}
+              </Flex>
+            </Flex>
             {modalType === 'profile-completion' ? <ProfileChecks /> : null}
             {renderCooldownSummaryTable()}
           </>
         ) : (
           <>
-            <div className={styles.progressCard}>
-              <div className={styles.progressInfo}>
+            <Flex
+              column
+              border='strong'
+              borderRadius='m'
+              w='100%'
+              backgroundColor='surface1'
+            >
+              <Flex justifyContent='center'>
                 <ProgressDescription
                   label={progressDescriptionLabel}
                   description={progressDescription}
@@ -555,10 +588,21 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
                   amount={formatNumberCommas(challenge?.totalAmount ?? '')}
                   subtext={messages.audio}
                 />
-              </div>
-              {renderProgressBar()}
-              {renderProgressStatusLabel()}
-            </div>
+              </Flex>
+              <Flex
+                pv='l'
+                ph='xl'
+                borderTop='strong'
+                gap='l'
+                borderBottomLeftRadius='m'
+                borderBottomRightRadius='m'
+                justifyContent='center'
+              >
+                {renderProgressStatusLabel()}
+                {renderProgressBar()}
+              </Flex>
+              {modalType === 'profile-completion' ? <ProfileChecks /> : null}
+            </Flex>
             {renderCooldownSummaryTable()}
           </>
         )}
@@ -567,7 +611,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
         {buttonLink && !audioToClaim ? (
           <Button
             variant='primary'
-            fullWidth={isMobile}
+            fullWidth
             onClick={goToRoute}
             iconLeft={buttonInfo?.leftIcon}
             iconRight={buttonInfo?.rightIcon}
@@ -578,17 +622,12 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
         {audioToClaim > 0 ||
         (audioClaimedSoFar > 0 && challenge?.state !== 'disbursed') ? (
           <div className={wm(styles.claimRewardWrapper)}>
-            {!isRewardsCooldownEnabled ? (
-              <div className={styles.claimRewardAmountLabel}>
-                {`${audioToClaim} ${messages.claimAmountLabel}`}
-              </div>
-            ) : null}
             {renderClaimButton()}
             {renderClaimedSoFarContent()}
           </div>
         ) : null}
         {errorContent}
-      </div>
+      </Flex>
     )
   }
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
index 8d9e750f8fb..a09905a77ee 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
@@ -1,8 +1,6 @@
 import { ReactNode } from 'react'
 
-import { Text } from '@audius/harmony'
-
-import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
+import { Flex, Text } from '@audius/harmony'
 
 import styles from './styles.module.css'
 
@@ -20,18 +18,20 @@ export const ProgressDescription = ({
   label?: ReactNode
   description: ReactNode
 }) => {
-  const wm = useWithMobileStyle(styles.mobile)
   return (
-    <div className={wm(styles.progressDescription)}>
-      <Text
-        variant='label'
-        size='l'
-        strength='strong'
-        className={styles.verifiedChallenge}
-      >
-        {label}
-      </Text>
-      <Text variant='body'>{description}</Text>
-    </div>
+    <Flex>
+      <Flex column gap='m' p='xl'>
+        <Text
+          variant='label'
+          size='l'
+          strength='strong'
+          color='subdued'
+          className={styles.verifiedChallenge}
+        >
+          {label}
+        </Text>
+        <Text variant='body'>{description}</Text>
+      </Flex>
+    </Flex>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
index 5252e0e2d41..812af4a8319 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
@@ -1,6 +1,4 @@
-import { Text } from '@audius/harmony'
-
-import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
+import { Flex, Text } from '@audius/harmony'
 
 import styles from './styles.module.css'
 
@@ -16,16 +14,24 @@ export const ProgressReward = ({
   amount: string
   subtext: string
 }) => {
-  const wm = useWithMobileStyle(styles.mobile)
   return (
-    <div className={wm(styles.progressReward)}>
-      <Text variant='heading'>{messages.reward}</Text>
+    <Flex
+      m='xl'
+      column
+      css={{
+        textAlign: 'center',
+        maxWidth: '200px'
+      }}
+    >
+      <Text variant='label' size='l' strength='strong' color='subdued'>
+        {messages.reward}
+      </Text>
       <Text variant='display' className={styles.rewardAmount}>
         {amount}
       </Text>
       <Text variant='label' size='s' strength='strong' color='subdued'>
         {subtext}
       </Text>
-    </div>
+    </Flex>
   )
 }
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
index f07f7f48f0d..1091250828d 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
@@ -62,90 +62,10 @@
   font-size: var(--harmony-font-l);
 }
 
-.progressCard {
-  width: 100%;
-  display: flex;
-  flex: 1 1 0%;
-  flex-direction: column;
-  border: 1px solid var(--harmony-border-strong);
-  border-radius: 8px;
-  overflow: hidden;
-}
-.progressCard.mobile {
-  border-radius: 16px;
-}
-
-.progressInfo {
-  display: flex;
-  justify-content: center;
-}
-.progressInfo.mobile {
-  padding: 16px 0px;
-}
-
-.progressDescription {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-  gap: var(--harmony-unit-3);
-  padding: var(--harmony-unit-4) var(--harmony-unit-6);
-}
-
-.progressDescription.mobile {
-  width: 100%;
-  padding: 0px 20px;
-  margin-bottom: 20px;
-}
-
-.progressReward {
-  padding: var(--harmony-unit-4);
-  text-align: center;
-  border-left: 1px solid var(--harmony-border-strong);
-  max-width: 200px;
-}
-.progressReward.mobile {
-  padding: 0 16px;
-  border: none;
-}
-
-.progressBarSection {
-  border-top: 1px solid var(--harmony-border-strong);
-  padding: 24px 72px;
-}
-.progressBarSection.mobile {
-  flex: 1 1 0%;
-  border-top: none;
-  border-left: 1px solid var(--harmony-border-strong);
-  padding: 0 16px;
-}
 .progressBar.mobile {
   padding: 14px 0;
 }
 
-.progressStatus {
-  padding: 12px 32px;
-  text-align: center;
-  border-top: 1px solid var(--harmony-border-strong);
-}
-.progressStatus h3 {
-  margin-bottom: 0px;
-}
-.progressStatus.incomplete {
-  background-color: var(--harmony-n-50);
-}
-.progressStatus.incomplete h3 {
-  color: var(--harmony-n-400);
-}
-.progressStatus.inProgress {
-  background-color: var(--harmony-n-50);
-}
-.progressStatus.inProgress h3 {
-  color: var(--harmony-s-200);
-}
-.progressStatus.complete {
-  background-color: var(--harmony-bg-surface-1);
-}
-
 .buttonLink {
   margin-top: 32px;
 }
@@ -198,16 +118,6 @@
 }
 
 /* Profile Tasks Styles */
-.profileTaskContainer {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: 12px;
-  justify-content: center;
-  max-height: 100px;
-  margin-bottom: 32px;
-  padding: 0 64px;
-}
 .profileTaskContainer.mobile {
   width: 100%;
   padding: 0 12px;
@@ -322,24 +232,3 @@
 .buttonSpacer {
   width: 10px;
 }
-
-/* Audio matching styles */
-.audioMatchingContainer {
-  gap: var(--harmony-unit-8);
-}
-.audioMatchingContainer.mobile {
-  gap: var(--harmony-unit-6);
-}
-.audioMatchingDescription {
-  display: flex;
-  flex-direction: column;
-  gap: var(--harmony-unit-3);
-}
-.audioMatchingTotalContainer {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid var(--harmony-border-strong);
-  padding: var(--harmony-unit-4) var(--harmony-unit-6);
-  background-color: var(--harmony-bg-surface-2);
-}

From 01b1a932068a913f3aa8c6db9e3980a8d538ca13 Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Mon, 16 Sep 2024 13:30:57 -0400
Subject: [PATCH 2/3] more fixes

---
 .../ChallengeRewardsModal.tsx                 | 35 +++++++++++--------
 .../ChallengeRewardsModal/ProgressReward.tsx  |  6 +++-
 .../ChallengeRewardsModal/styles.module.css   |  1 +
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
index 3a192a437ce..369ae229f1f 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -195,6 +195,7 @@ const TwitterShareButton = ({
 const ProfileChecks = () => {
   const completionStages = useSelector(getCompletionStages)
   const wm = useWithMobileStyle(styles.mobile)
+  const isMobile = useIsMobile()
 
   const config: Record<string, boolean> = {
     [messages.profileCheckNameAndHandle]: completionStages.hasNameAndHandle,
@@ -212,8 +213,8 @@ const ProfileChecks = () => {
       column
       gap='m'
       wrap='wrap'
-      ph='xl'
-      pv='m'
+      ph={isMobile ? undefined : 'xl'}
+      pv={isMobile ? undefined : 'm'}
       justifyContent='center'
       css={{
         maxHeight: '150px'
@@ -445,28 +446,32 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
 
   const renderProgressBar = () => {
     if (showProgressBar && challenge.max_steps) {
-      return (
+      return isMobile ? (
         <Flex
-          ph={isMobile ? 'l' : undefined}
-          pv={isMobile ? 'xl' : undefined}
-          borderLeft={isMobile ? 'strong' : undefined}
+          column
+          gap='s'
+          ph='l'
+          pv='xl'
+          borderLeft='strong'
           css={{
-            flex: isMobile ? '1 1 0%' : undefined
+            flex: '1 1 0%'
           }}
-          column={isMobile}
-          gap={isMobile ? 's' : undefined}
         >
-          {isMobile ? (
-            <Text variant='label' size='l' strength='strong' color='subdued'>
-              {messages.progress}
-            </Text>
-          ) : null}
+          <Text variant='label' size='l' strength='strong' color='subdued'>
+            {messages.progress}
+          </Text>
           <ProgressBar
             className={wm(styles.progressBar)}
             value={currentStepCount}
             max={challenge?.max_steps}
           />
         </Flex>
+      ) : (
+        <ProgressBar
+          className={wm(styles.progressBar)}
+          value={currentStepCount}
+          max={challenge?.max_steps}
+        />
       )
     }
     return null
@@ -579,7 +584,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
               w='100%'
               backgroundColor='surface1'
             >
-              <Flex justifyContent='center'>
+              <Flex justifyContent='space-between'>
                 <ProgressDescription
                   label={progressDescriptionLabel}
                   description={progressDescription}
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
index 812af4a8319..25d9cbf79db 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
@@ -1,5 +1,7 @@
 import { Flex, Text } from '@audius/harmony'
 
+import { useIsMobile } from 'hooks/useIsMobile'
+
 import styles from './styles.module.css'
 
 const messages = {
@@ -14,10 +16,12 @@ export const ProgressReward = ({
   amount: string
   subtext: string
 }) => {
+  const isMobile = useIsMobile()
   return (
     <Flex
-      m='xl'
+      p='xl'
       column
+      borderLeft={isMobile ? undefined : 'strong'}
       css={{
         textAlign: 'center',
         maxWidth: '200px'
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
index 1091250828d..495c088d118 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/styles.module.css
@@ -152,6 +152,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
 
 .claimRewardWrapper.mobile {

From 2d49070d6aa5707a58a10b8265441975cdf6d16c Mon Sep 17 00:00:00 2001
From: Dharit Tantiviramanond <dharit.tan@gmail.com>
Date: Mon, 16 Sep 2024 14:59:32 -0400
Subject: [PATCH 3/3] dylan PR comments

---
 .../AudioMatchingRewardsModalContent.tsx       | 13 +++++++------
 .../ChallengeRewardsModal.tsx                  | 18 ++++++++++--------
 .../ProgressDescription.tsx                    | 10 +---------
 .../ChallengeRewardsModal/ProgressReward.tsx   |  2 +-
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
index 5e7d2e3520d..da1cfd96acb 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/AudioMatchingRewardsModalContent.tsx
@@ -17,6 +17,7 @@ import {
   Flex,
   IconArrowRight,
   IconCloudUpload,
+  Paper,
   Text
 } from '@audius/harmony'
 import { useSelector } from 'react-redux'
@@ -25,7 +26,6 @@ import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { SummaryTable } from 'components/summary-table'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
-import { useWithMobileStyle } from 'hooks/useWithMobileStyle'
 
 import { ProgressDescription } from './ProgressDescription'
 import { ProgressReward } from './ProgressReward'
@@ -186,8 +186,9 @@ export const AudioMatchingRewardsModalContent = ({
       {isMobile ? (
         <>
           {progressDescription}
-          <Flex
+          <Paper
             column
+            shadow='flat'
             border='strong'
             borderRadius='m'
             w='100%'
@@ -195,13 +196,13 @@ export const AudioMatchingRewardsModalContent = ({
           >
             <Flex justifyContent='center'>{progressReward}</Flex>
             {progressStatusLabel}
-          </Flex>
+          </Paper>
           {renderCooldownSummaryTable()}
         </>
       ) : (
         <>
-          <Flex
-            column
+          <Paper
+            shadow='flat'
             border='strong'
             borderRadius='m'
             w='100%'
@@ -212,7 +213,7 @@ export const AudioMatchingRewardsModalContent = ({
               {progressReward}
             </Flex>
             {progressStatusLabel}
-          </Flex>
+          </Paper>
           {renderCooldownSummaryTable()}
         </>
       )}
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
index 369ae229f1f..a97a9a042c3 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -32,7 +32,8 @@ import {
   Button,
   Text,
   ProgressBar,
-  Flex
+  Flex,
+  Paper
 } from '@audius/harmony'
 import cn from 'classnames'
 import { push as pushRoute } from 'connected-react-router'
@@ -217,7 +218,7 @@ const ProfileChecks = () => {
       pv={isMobile ? undefined : 'm'}
       justifyContent='center'
       css={{
-        maxHeight: '150px'
+        maxHeight: 150
       }}
     >
       {Object.keys(config).map((key) => (
@@ -351,7 +352,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
           size='l'
           strength='strong'
           color='subdued'
-          css={{ whiteSpace: 'nowrap' }}
+          ellipses
         >
           {fillString(
             progressLabel,
@@ -553,12 +554,12 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
               label={progressDescriptionLabel}
               description={progressDescription}
             />
-            <Flex
+            <Paper
               column
+              shadow='flat'
               border='strong'
               borderRadius='m'
               w='100%'
-              justifyContent='center'
               backgroundColor='surface1'
             >
               <Flex justifyContent='center' borderBottom='strong'>
@@ -571,14 +572,15 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
               <Flex justifyContent='center' ph='xl' pv='l'>
                 {renderProgressStatusLabel()}
               </Flex>
-            </Flex>
+            </Paper>
             {modalType === 'profile-completion' ? <ProfileChecks /> : null}
             {renderCooldownSummaryTable()}
           </>
         ) : (
           <>
-            <Flex
+            <Paper
               column
+              shadow='flat'
               border='strong'
               borderRadius='m'
               w='100%'
@@ -607,7 +609,7 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
                 {renderProgressBar()}
               </Flex>
               {modalType === 'profile-completion' ? <ProfileChecks /> : null}
-            </Flex>
+            </Paper>
             {renderCooldownSummaryTable()}
           </>
         )}
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
index a09905a77ee..06026196edb 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressDescription.tsx
@@ -2,8 +2,6 @@ import { ReactNode } from 'react'
 
 import { Flex, Text } from '@audius/harmony'
 
-import styles from './styles.module.css'
-
 const messages = {
   task: 'Task'
 }
@@ -21,13 +19,7 @@ export const ProgressDescription = ({
   return (
     <Flex>
       <Flex column gap='m' p='xl'>
-        <Text
-          variant='label'
-          size='l'
-          strength='strong'
-          color='subdued'
-          className={styles.verifiedChallenge}
-        >
+        <Text variant='label' size='l' strength='strong' color='subdued'>
           {label}
         </Text>
         <Text variant='body'>{description}</Text>
diff --git a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
index 25d9cbf79db..fbfd190d1fe 100644
--- a/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
+++ b/packages/web/src/pages/audio-rewards-page/components/modals/ChallengeRewardsModal/ProgressReward.tsx
@@ -24,7 +24,7 @@ export const ProgressReward = ({
       borderLeft={isMobile ? undefined : 'strong'}
       css={{
         textAlign: 'center',
-        maxWidth: '200px'
+        maxWidth: 200
       }}
     >
       <Text variant='label' size='l' strength='strong' color='subdued'>