[PAY-3947] Fix challenge error UI (#11507)

AudiusProject · Mar 4, 2025 · f0f3867 · f0f3867
1 parent d898567
commit f0f3867
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsLayout.tsx b/packages/mobile/src/components/challenge-rewards-drawer/ChallengeRewardsLayout.tsx
@@ -95,8 +95,8 @@ export const ChallengeRewardsLayout = ({
         </Flex>
       </ScrollView>
       <Flex w='100%' ph='l' pv='m' gap='l'>
-        {actions}
         {errorContent}
+        {actions}
       </Flex>
     </>
   )

diff --git a/packages/mobile/src/components/challenge-rewards-drawer/ClaimError.tsx b/packages/mobile/src/components/challenge-rewards-drawer/ClaimError.tsx
@@ -4,17 +4,19 @@ import { Text } from '@audius/harmony-native'
 
 const messages = {
   claimErrorMessage:
-    'Something has gone wrong, not all your rewards were claimed. Please try again.',
+    'Something went wrong while claiming your rewards. Please try again and contact support@audius.co.',
   claimErrorMessageAAO:
     'Your account is unable to claim rewards at this time. Please try again later or contact support@audius.co. '
 }
 
 /** Renders a generic error message for failed challenge claims */
 export const ClaimError = ({ aaoErrorCode }: { aaoErrorCode?: number }) => {
   return aaoErrorCode === undefined ? (
-    <Text>{messages.claimErrorMessage}</Text>
+    <Text size='s' color='danger'>
+      {messages.claimErrorMessage}
+    </Text>
   ) : (
-    <Text>
+    <Text size='s' color='danger'>
       {messages.claimErrorMessageAAO}
       {getAAOErrorEmojis(aaoErrorCode)}
     </Text>

diff --git a/...src/pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsLayout.tsx b/...src/pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsLayout.tsx
@@ -56,7 +56,7 @@ export const ChallengeRewardsLayout = ({
   )
 
   return (
-    <Flex column alignItems='center' gap='2xl'>
+    <Flex column gap='2xl'>
       {header}
       {isMobile ? (
         <>

diff --git a/.../src/pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx b/.../src/pages/rewards-page/components/modals/ChallengeRewardsModal/ChallengeRewardsModal.tsx
@@ -33,7 +33,7 @@ const messages = {
   rewardClaimed: 'Reward claimed successfully!',
   rewardAlreadyClaimed: 'Reward already claimed!',
   claimError:
-    'Something has gone wrong, not all your rewards were claimed. Please try again or contact support@audius.co.',
+    'Something went wrong while claiming your rewards. Please try again and contact support@audius.co.',
   claimErrorAAO:
     'Your account is unable to claim rewards at this time. Please try again later or contact support@audius.co. ',
   claimableAmountLabel: (amount: number) => `Claim $${amount} AUDIO`,
@@ -100,7 +100,9 @@ const ChallengeRewardsBody = ({ dismissModal }: BodyProps) => {
 
   const errorContent =
     claimStatus === ClaimStatus.ERROR ? (
-      <Text>{getErrorMessage(aaoErrorCode)}</Text>
+      <Text size='s' color='danger'>
+        {getErrorMessage(aaoErrorCode)}
+      </Text>
     ) : null
 
   useEffect(() => {