[PAY-862] Rewards UI Improvements Followups

packages/common/src/utils/challenges.ts

@@ -56,7 +56,7 @@ export const challengeRewardsConfig: Record<
     id: 'connect-verified',
     title: 'Link Verified Accounts',
     description: (challenge) =>
-      `Link your verified social media accounts to earn ${challenge?.amount} $AUDIO`,
+      `Link your verified social media accounts to earn ${challenge?.amount} $AUDIO.`,
     fullDescription: () =>
       'Get verified on Audius by linking your verified Twitter or Instagram account!',
     progressLabel: 'Not Linked',
@@ -66,7 +66,7 @@ export const challengeRewardsConfig: Record<
     id: 'listen-streak',
     title: 'Listening Streak: 7 Days',
     description: (challenge) =>
-      `Listen to one track a day for seven days to earn ${challenge?.amount} $AUDIO`,
+      `Listen to one track a day for seven days to earn ${challenge?.amount} $AUDIO.`,
     fullDescription: () =>
       'Sign in and listen to at least one track every day for 7 days',
     progressLabel: '%0/%1 Days',
@@ -75,7 +75,7 @@ export const challengeRewardsConfig: Record<
   'mobile-install': {
     id: 'mobile-install',
     title: 'Get the Audius Mobile App',
-    description: (challenge) => `Earn ${challenge?.amount} $AUDIO`,
+    description: (challenge) => `Earn ${challenge?.amount} $AUDIO.`,
     fullDescription: () =>
       'Install the Audius app for iPhone and Android and Sign in to your account!',
     progressLabel: 'Not Installed',
@@ -85,7 +85,7 @@ export const challengeRewardsConfig: Record<
     id: 'profile-completion',
     title: 'Complete Your Profile',
     description: (challenge) =>
-      `Complete your Audius profile to earn ${challenge?.amount} $AUDIO`,
+      `Complete your Audius profile to earn ${challenge?.amount} $AUDIO.`,
     fullDescription: () =>
       'Fill out the missing details on your Audius profile and start interacting with tracks and artists!',
     progressLabel: '%0/%1 Complete',
@@ -94,7 +94,7 @@ export const challengeRewardsConfig: Record<
   'track-upload': {
     id: 'track-upload',
     title: 'Upload 3 Tracks',
-    description: (challenge) => `Earn ${challenge?.amount} $AUDIO`,
+    description: (challenge) => `Earn ${challenge?.amount} $AUDIO.`,
     fullDescription: () => 'Upload 3 tracks to your profile',
     progressLabel: '%0/%1 Uploaded',
     panelButtonText: 'Upload Tracks'
@@ -103,17 +103,17 @@ export const challengeRewardsConfig: Record<
     id: 'send-first-tip',
     title: 'Send Your First Tip',
     description: (_) =>
-      'Show some love to your favorite artist and send them a tip',
+      'Show some love to your favorite artist and send them a tip.',
     fullDescription: () =>
-      'Show some love to your favorite artist and send them a tip',
+      'Show some love to your favorite artist and send them a tip.',
     progressLabel: 'Not Earned',
     panelButtonText: 'Find Someone To Tip'
   },
   'first-playlist': {
     id: 'first-playlist',
     title: 'Create a Playlist',
-    description: (_) => 'Create a playlist and add a track to it',
-    fullDescription: () => 'Create a playlist and add a track to it',
+    description: (_) => 'Create a playlist and add a track to it.',
+    fullDescription: () => 'Create a playlist and add a track to it.',
     progressLabel: 'Not Earned',
     panelButtonText: 'Discover Some Tracks'
   },
@@ -131,14 +131,14 @@ export const challengeRewardsConfig: Record<
   },
   'top-api': {
     title: 'Top 10 API Apps',
-    description: () => 'The top 10 Audius API apps each month win',
+    description: () => 'The top 10 Audius API apps each month win.',
     panelButtonText: 'More Info',
     id: 'top-api'
   },
   'verified-upload': {
     title: 'First Upload With Your Verified Account',
     description: () =>
-      'Verified on Twitter/Instagram? Upload your first track, post it on social media, & tag us',
+      'Verified on Twitter/Instagram? Upload your first track, post it on social media, & tag us.',
     panelButtonText: 'More Info',
     id: 'verified-upload'
   },

packages/mobile/src/screens/audio-screen/AudioScreen.tsx

@@ -59,10 +59,8 @@ const messages = {
   send: 'Send $AUDIO',
   receive: 'Receive $AUDIO',
   connect: 'Connect Wallets',
-  rewards: '$AUDIO Rewards',
+  rewards: 'Earn Rewards',
   rewardsBody1: 'Complete tasks to earn $AUDIO tokens!',
-  rewardsBody2:
-    'Opportunities to earn $AUDIO will change, so check back often for more chances to earn!',
   trending: 'Trending Competitions',
   trendingBody1: 'Win contests to earn $AUDIO tokens!',
   vipTiers: '$AUDIO VIP Tiers',
@@ -101,10 +99,11 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     marginBottom: 16
   },
   tileSubheader: {
-    fontFamily: typography.fontByWeight.regular,
-    fontSize: typography.fontSize.xs,
+    fontFamily: typography.fontByWeight.demiBold,
+    fontSize: typography.fontSize.medium,
     lineHeight: spacing(5),
-    textAlign: 'center'
+    textAlign: 'center',
+    marginBottom: spacing(6)
   },
   tileLink: {
     fontFamily: typography.fontByWeight.bold,
@@ -306,7 +305,6 @@ export const AudioScreen = () => {
           {messages.rewards}
         </GradientText>
         <Text style={styles.tileSubheader}>{messages.rewardsBody1}</Text>
-        <Text style={styles.tileSubheader}>{messages.rewardsBody2}</Text>
         <ChallengeRewards />
       </Tile>
     )
@@ -390,6 +388,7 @@ export const AudioScreen = () => {
           variant='commonAlt'
           size='medium'
           onPress={() => Linking.openURL(LEARN_MORE_LINK)}
+          fullWidth
         />
         <Button
           title={messages.launchDiscord}

packages/mobile/src/screens/audio-screen/Panel.tsx

@@ -17,7 +17,8 @@ import { useThemeColors } from 'app/utils/theme'
 const messages = {
   completeLabel: 'COMPLETE',
   claimReward: 'Claim Your Reward',
-  readyToClaim: 'Ready to Claim'
+  readyToClaim: 'Ready to Claim',
+  viewDetails: 'View Details'
 }
 
 const useStyles = makeStyles(({ spacing, palette, typography }) => ({
@@ -28,7 +29,7 @@ const useStyles = makeStyles(({ spacing, palette, typography }) => ({
     borderWidth: 2,
     paddingBottom: spacing(8)
   },
-  completed: {
+  disbursed: {
     backgroundColor: palette.neutralLight10
   },
   content: {
@@ -119,8 +120,8 @@ export const Panel = ({
   const stepCount = challenge?.max_steps ?? 0
   const shouldShowCompleted =
     challenge?.state === 'completed' || challenge?.state === 'disbursed'
+  const hasCompleted = challenge?.state === 'completed'
   const hasDisbursed = challenge?.state === 'disbursed'
-  const needsDisbursement = challenge && challenge.claimableAmount > 0
   const shouldShowProgressBar =
     stepCount > 1 && challenge?.challenge_type !== 'aggregate' && !hasDisbursed
 
@@ -147,21 +148,26 @@ export const Panel = ({
     }
   }
 
-  const buttonType =
-    challenge?.state === 'completed'
-      ? 'primary'
-      : hasDisbursed
-      ? 'commonAlt'
-      : 'common'
+  const buttonType = hasCompleted
+    ? 'primary'
+    : hasDisbursed
+    ? 'commonAlt'
+    : 'common'
+
+  const buttonMessage = hasCompleted
+    ? messages.claimReward
+    : hasDisbursed
+    ? messages.viewDetails
+    : panelButtonText
 
   return (
     <TouchableOpacity
-      style={[styles.root, hasDisbursed ? styles.completed : null]}
+      style={[styles.root, hasDisbursed ? styles.disbursed : null]}
       onPress={onPress}
       activeOpacity={0.7}
     >
       <View style={styles.pillContainer}>
-        {challenge?.state === 'completed' ? (
+        {hasCompleted ? (
           <Text style={styles.pillMessage}>{messages.readyToClaim}</Text>
         ) : null}
       </View>
@@ -195,13 +201,13 @@ export const Panel = ({
         {
           <Button
             fullWidth
-            title={needsDisbursement ? messages.claimReward : panelButtonText}
+            title={buttonMessage}
             variant={buttonType}
             iconPosition='right'
             size='medium'
-            icon={IconArrow}
+            icon={hasDisbursed ? undefined : IconArrow}
             onPress={onPress}
-            style={[styles.button, hasDisbursed ? styles.completed : null]}
+            style={[styles.button, hasDisbursed ? styles.disbursed : null]}
           />
         }
       </View>

packages/web/src/pages/audio-rewards-page/ChallengeRewardsTile.tsx

@@ -33,13 +33,12 @@ const { fetchUserChallenges, setChallengeRewardsModalType } =
 const { getOptimisticUserChallenges } = challengesSelectors
 
 const messages = {
-  title: '$AUDIO REWARDS',
+  title: 'EARN REWARDS',
   description1: 'Complete tasks to earn $AUDIO tokens!',
-  description2:
-    'Opportunities to earn $AUDIO will change, so check back often for more chances to earn!',
   completeLabel: 'COMPLETE',
   claimReward: 'Claim Your Reward',
-  readyToClaim: 'Ready to Claim'
+  readyToClaim: 'Ready to Claim',
+  viewDetails: 'View Details'
 }
 
 type RewardPanelProps = {
@@ -71,6 +70,7 @@ const RewardPanel = ({
   const challenge = userChallenges[id]
   const shouldShowCompleted =
     challenge?.state === 'completed' || challenge?.state === 'disbursed'
+  const hasCompleted = challenge?.state === 'completed'
   const hasDisbursed = challenge?.state === 'disbursed'
   const needsDisbursement = challenge && challenge.claimableAmount > 0
   const shouldShowProgressBar =
@@ -101,6 +101,11 @@ const RewardPanel = ({
         )
       : ''
   }
+  const buttonMessage = needsDisbursement
+    ? messages.claimReward
+    : hasDisbursed
+    ? messages.viewDetails
+    : panelButtonText
 
   return (
     <div
@@ -110,7 +115,7 @@ const RewardPanel = ({
       onClick={openRewardModal}
     >
       <div className={wm(styles.pillContainer)}>
-        {challenge?.state === 'completed' && (
+        {hasCompleted && (
           <span className={wm(styles.pillMessage)}>
             {messages.readyToClaim}
           </span>
@@ -139,7 +144,7 @@ const RewardPanel = ({
           cn(styles.panelButton, hasDisbursed ? styles.completed : '')
         )}
         completed={challenge?.state}
-        text={needsDisbursement ? messages.claimReward : panelButtonText}
+        text={buttonMessage}
         onClick={openRewardModal}
         textClassName={styles.panelButtonText}
       />
@@ -226,7 +231,6 @@ const RewardsTile = ({ className }: RewardsTileProps) => {
       <span className={wm(styles.title)}>{messages.title}</span>
       <div className={wm(styles.subtitle)}>
         <span>{messages.description1}</span>
-        <span>{messages.description2}</span>
       </div>
       <div className={styles.rewardsContainer}>
         {userChallengesLoading && !haveChallengesLoaded ? (

packages/web/src/pages/audio-rewards-page/components/ButtonWithArrow.tsx

@@ -14,7 +14,7 @@ const ButtonWithArrow = (props: { completed?: string } & ButtonProps) => {
     <Button
       className={cn(styles.rewardButton, props.className)}
       type={buttonType}
-      rightIcon={<IconArrow />}
+      rightIcon={props.completed !== 'disbursed' ? <IconArrow /> : null}
       iconClassName={styles.buttonIcon}
       textClassName={cn(styles.text, props.textClassName)}
       {...props}

packages/web/src/pages/audio-rewards-page/config.tsx

@@ -13,7 +13,8 @@ import {
   SETTINGS_PAGE,
   TRENDING_PAGE,
   UPLOAD_PAGE,
-  FAVORITES_PAGE
+  FAVORITES_PAGE,
+  EXPLORE_PAGE
 } from 'utils/route'
 
 type LinkButtonType =
@@ -75,7 +76,7 @@ const linkButtonMap: Record<LinkButtonType, LinkButtonInfo> = {
     label: 'Discover Some Tracks',
     leftIcon: null,
     rightIcon: <IconArrow />,
-    link: () => FAVORITES_PAGE
+    link: () => EXPLORE_PAGE
   }
 }