Better styles for small screens and errors in rewards

0xsend · Oct 21, 2024 · d0fbd4f · d0fbd4f
1 parent a336545
commit d0fbd4f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 32 deletions.
diff --git a/packages/app/components/MobileButtonRowLayout.tsx b/packages/app/components/MobileButtonRowLayout.tsx
@@ -190,13 +190,13 @@ export const ActivityRewards = ({ children, ...props }: XStackProps) => {
         {!isLoading && isVisible && direction !== 'down' && (
           <Stack
             w={'100%'}
-            pb={isPwa ? '$1' : '$3'}
+            pb={isPwa ? '$1' : '$5'}
             px="$4"
             $platform-web={{
               position: 'fixed',
               bottom: 0,
             }}
-            $gtLg={{
+            $gtSm={{
               display: 'none',
             }}
             animation="200ms"
@@ -222,16 +222,17 @@ export const ActivityRewards = ({ children, ...props }: XStackProps) => {
                   ? `Total ${distributionMonth} Rewards`
                   : `Estimated ${distributionMonth} Rewards`}
               </H3>
-              <Paragraph
-                fontFamily={'$mono'}
-                $gtXs={{ fontSize: '$10' }}
-                fontSize={'$9'}
-                fontWeight={'500'}
-                lh={40}
-              >
-                {shareAmount === undefined ? '' : `${formatAmount(shareAmount, 10, 0)} SEND`}
-              </Paragraph>
-              <Row {...props}>
+
+              <Row {...props} $xs={{ fd: 'column' }}>
+                <Paragraph
+                  fontFamily={'$mono'}
+                  $gtXs={{ fontSize: '$10' }}
+                  fontSize={'$9'}
+                  fontWeight={'500'}
+                  lh={40}
+                >
+                  {shareAmount === undefined ? '' : `${formatAmount(shareAmount, 10, 0)} SEND`}
+                </Paragraph>
                 <DistributionClaimButton distribution={distribution} />
               </Row>
             </Stack>

diff --git a/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap b/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap
@@ -911,9 +911,9 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "System",
-                  "fontSize": 13.2,
+                  "fontSize": 15.6,
                   "fontWeight": "300",
-                  "lineHeight": 16,
+                  "lineHeight": 18,
                   "marginLeft": "auto",
                   "marginRight": "auto",
                   "userSelect": "auto",

diff --git a/packages/app/features/account/rewards/activity/screen.tsx b/packages/app/features/account/rewards/activity/screen.tsx
@@ -218,10 +218,7 @@ export function ActivityRewardsScreen() {
         <YStack f={1} w={'100%'} gap={'$7'}>
           <DistributionRequirementsCard distribution={distributions[selectedDistributionIndex]} />
           <SendPerksCards distribution={distributions[selectedDistributionIndex]} />
-          <MultiplierCards
-            distribution={distributions[selectedDistributionIndex]}
-            distributionDate={distributionDates[selectedDistributionIndex]}
-          />
+          <MultiplierCards distribution={distributions[selectedDistributionIndex]} />
           <ClaimableRewardsCard distribution={distributions[selectedDistributionIndex]} />
         </YStack>
       )}
@@ -480,12 +477,16 @@ const PerkCard = ({
 
 const MultiplierCards = ({
   distribution,
-  distributionDate,
 }: {
   distribution: UseDistributionsResultData[number]
-  distributionDate?: string
 }) => {
   const multipliers = distribution.distribution_verifications_summary[0]?.multipliers
+  const distributionMonth = distribution.timezone_adjusted_qualification_end.toLocaleString(
+    'default',
+    {
+      month: 'long',
+    }
+  )
 
   return (
     <YStack f={1} w={'100%'} gap="$5">
@@ -497,12 +498,10 @@ const MultiplierCards = ({
           .filter(([verificationType]) => multipliers?.[verificationType].multiplier_step > 0)
           .map(([verificationType, title]) => (
             <MultiplierCard key={verificationType}>
-              <XStack ai="center" gap="$2">
+              <XStack ai="center" gap="$2" jc="center">
                 <IconAccount size={'2'} color={'$color10'} />
                 <H3 fontWeight={'500'} color={'$color10'}>
-                  {verificationType === 'tag_referral'
-                    ? distributionDate?.split(' ')[0] ?? 'Monthly'
-                    : ''}{' '}
+                  {verificationType === 'tag_referral' ? distributionMonth ?? 'Monthly' : ''}{' '}
                   {title}
                 </H3>
               </XStack>
@@ -511,6 +510,7 @@ const MultiplierCards = ({
                 $sm={{ fontSize: '$8' }}
                 fontWeight={'600'}
                 color={'$color12'}
+                mx="auto"
               >
                 X {multipliers?.[verificationType].value ?? 1}
               </Paragraph>
@@ -532,7 +532,14 @@ const MultiplierCard = ({ children }: PropsWithChildren<CardProps>) => {
       mih={112}
       w={'fit-content'}
     >
-      <XStack ai="center" w={'100%'} jc="space-between" $gtXs={{ gap: '$7' }} gap={'$5'}>
+      <XStack
+        ai="center"
+        w={'100%'}
+        jc="space-between"
+        $gtXs={{ gap: '$7' }}
+        gap={'$5'}
+        flexWrap="wrap"
+      >
         {children}
       </XStack>
     </Card>
@@ -555,7 +562,7 @@ const ClaimableRewardsCard = ({
   )
 
   return (
-    <YStack f={1} w={'100%'} gap="$5" $lg={{ display: 'none' }}>
+    <YStack f={1} w={'100%'} gap="$5" $sm={{ display: 'none' }}>
       <H3 fontWeight={'600'} color={'$color12'}>
         {isQualificationOver ? `Total ${distributionMonth}` : `Estimated ${distributionMonth}`}
       </H3>

diff --git a/packages/app/features/account/rewards/components/DistributionClaimButton.tsx b/packages/app/features/account/rewards/components/DistributionClaimButton.tsx
@@ -200,7 +200,7 @@ export const DistributionClaimButton = ({ distribution }: DistributionsClaimButt
   // If the user is eligible but has already claimed, show the claim button disabled
   if (isClaimed) {
     return (
-      <Paragraph size="$1" color="$color12" mx="auto">
+      <Paragraph size="$3" color="$color12" mx="auto">
         Claimed
       </Paragraph>
     )
@@ -209,7 +209,7 @@ export const DistributionClaimButton = ({ distribution }: DistributionsClaimButt
   return (
     <YStack>
       <Button
-        theme={canClaim ? 'green' : 'red_alt1'}
+        theme={canClaim ? 'green' : error || hasEnoughGas ? 'red_active' : undefined}
         onPress={onSubmit}
         br={12}
         disabledStyle={{ opacity: 0.7, cursor: 'not-allowed', pointerEvents: 'none' }}
@@ -237,16 +237,14 @@ export const DistributionClaimButton = ({ distribution }: DistributionsClaimButt
               )
             case !isTrancheActive:
               return (
-                <ButtonOg.Text bc="$color5" opacity={0.5} disabled>
+                <ButtonOg.Text opacity={0.5} disabled>
                   Not yet claimable
                 </ButtonOg.Text>
               )
             case !!isTrancheActiveError || !!isClaimedError || !!nonceError:
               return (
                 <>
-                  <ButtonOg.Text bc="$color5" opacity={0.5}>
-                    Error
-                  </ButtonOg.Text>
+                  <ButtonOg.Text opacity={0.5}>Error</ButtonOg.Text>
                 </>
               )
             case !!feesPerGasError || !!usdcFeesError: