fix: alignment issues

VenusProtocol · Mar 6, 2025 · 3e2c2eb · 3e2c2eb
1 parent 89037a7
commit 3e2c2eb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 26 deletions.
diff --git a/apps/evm/src/containers/Layout/ClaimRewardButton/ClaimRewardsContent/index.tsx b/apps/evm/src/containers/Layout/ClaimRewardButton/ClaimRewardsContent/index.tsx
@@ -49,7 +49,7 @@ export const ClaimRewardsContent = ({
     >
       {hasInternalRewards && (
         <RewardGroupFrame
-          className={cn(hasExternalRewards && 'border-b pb-4 mb-4 md:mb-0')}
+          className={cn(hasExternalRewards && 'border-b pb-6 mb-4 md:mb-0')}
           title={t('claimReward.modal.rewards')}
           claimComponent={
             <Checkbox
@@ -59,7 +59,7 @@ export const ClaimRewardsContent = ({
             />
           }
         >
-          <div data-testid={TEST_IDS.claimRewardBreakdown}>
+          <div data-testid={TEST_IDS.claimRewardBreakdown} className="space-y-4">
             {internalRewardsGroups.map(group => (
               <InternalRewardGroup
                 group={group}
@@ -90,7 +90,7 @@ export const ClaimRewardsContent = ({
       )}
       {hasExternalRewards && (
         <RewardGroupFrame title={t('claimReward.modal.externalRewards')}>
-          <div data-testid={TEST_IDS.claimExternalRewardBreakdown}>
+          <div data-testid={TEST_IDS.claimExternalRewardBreakdown} className="space-y-4">
             {externalRewardsGroups.map(group => (
               <ExternalRewardGroup
                 group={group}

diff --git a/apps/evm/src/containers/Layout/ClaimRewardButton/RewardGroupContent/index.tsx b/apps/evm/src/containers/Layout/ClaimRewardButton/RewardGroupContent/index.tsx
@@ -31,8 +31,8 @@ export const RewardGroupContent: React.FC<RewardGroupContentProps> = ({
     return Array.from(pendingRewardMapping.values());
   }, [group.pendingRewards]);
   return (
-    <div className="border-lightGrey mb-4 last:mb-0">
-      <div className="my-4">
+    <div>
+      <div className="mb-4">
         <div className="flex items-center justify-between">
           <p className="text-lg">{group.name}</p>
 
@@ -42,28 +42,30 @@ export const RewardGroupContent: React.FC<RewardGroupContentProps> = ({
         {group.warningMessage}
       </div>
 
-      {pendingRewards.map(pendingReward => (
-        <div
-          className="border-lightGrey mb-4 flex items-center border-b last:border-b-0 justify-between last:mb-0"
-          key={`reward-group-${group.name}-${pendingReward.rewardToken.address}`}
-        >
-          <div className="flex">
-            <TokenIconWithSymbol token={pendingReward.rewardToken} />
-          </div>
+      <div className="space-y-3">
+        {pendingRewards.map(pendingReward => (
+          <div
+            className="flex items-start justify-between"
+            key={`reward-group-${group.name}-${pendingReward.rewardToken.address}`}
+          >
+            <div className="flex">
+              <TokenIconWithSymbol token={pendingReward.rewardToken} />
+            </div>
 
-          <LayeredValues
-            className="text-end"
-            topValue={formatCentsToReadableValue({
-              value: pendingReward.rewardAmountCents,
-            })}
-            bottomValue={convertMantissaToTokens({
-              value: pendingReward.rewardAmountMantissa,
-              token: pendingReward.rewardToken,
-              returnInReadableFormat: true,
-            })}
-          />
-        </div>
-      ))}
+            <LayeredValues
+              className="text-end"
+              topValue={formatCentsToReadableValue({
+                value: pendingReward.rewardAmountCents,
+              })}
+              bottomValue={convertMantissaToTokens({
+                value: pendingReward.rewardAmountMantissa,
+                token: pendingReward.rewardToken,
+                returnInReadableFormat: true,
+              })}
+            />
+          </div>
+        ))}
+      </div>
     </div>
   );
 };