TOK-579: change backer est. reward tooltip text (#641)

* chore(cr): change backer est. reward tooltip text * fix: make overflow visible * chore(cr): change backer est. reward tooltip text * fix: remove unused component --------- Co-authored-by: Antonio <antonio@iovlabs.org>
RootstockCollective · Feb 12, 2025 · 83adbab · 83adbab
1 parent b69178e
commit 83adbab
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/src/app/collective-rewards/rewards/backers/BackerRewardsTable.tsx b/src/app/collective-rewards/rewards/backers/BackerRewardsTable.tsx
@@ -20,6 +20,7 @@ import { useBasicPaginationUi } from '@/shared/hooks/usePaginationUi'
 import { CycleContextProvider } from '@/app/collective-rewards/metrics'
 import Link from 'next/link'
 import Big from '@/lib/big'
+import { Typography } from '@/components/Typography/Typography'
 
 enum RewardsColumnKeyEnum {
   builder = 'builder',
@@ -40,14 +41,18 @@ const tableHeaders: TableHeader[] = [
     tooltip: {
       text: (
         <>
-          An estimate of this Cycle’s rewards from each Builder that will become fully claimable by the end of
-          the current Cycle. These rewards gradually become claimable and are added to your ‘Claimable
-          Rewards’ as the cycle progresses. To check the cycle completion, go to Collective Rewards → Current
-          Cycle.
-          <br />
-          <br />
-          The displayed information is dynamic and may vary based on total rewards and user activity. This
-          data is for informational purposes only.
+          <Typography>
+            An estimate of the remainder of this Cycle’s rewards from each Builder that will become fully
+            claimable by the end of the current Cycle. These rewards gradually transition into your ‘Claimable
+            Rewards’ as the cycle progresses.
+          </Typography>
+          <Typography marginTop="1rem" marginBottom="1rem">
+            To check the cycle`s completion, go to Collective Rewards → Current Cycle.
+          </Typography>
+          <Typography>
+            The displayed information is dynamic and may vary based on total rewards and user activity. This
+            data is for informational purposes only.
+          </Typography>
         </>
       ),
       popoverProps: { size: 'medium' },
@@ -153,7 +158,7 @@ const RewardsTable: FC<BackerRewardsTable> = ({ builder, gauges, tokens }) => {
         </div>
       ) : (
         <>
-          <TableCore className="table-fixed">
+          <TableCore className="table-fixed overflow-visible">
             <TableHead>
               <TableRow className="min-h-0 normal-case">
                 {tableHeaders.map(header => (

diff --git a/src/app/collective-rewards/rewards/backers/Rewards.tsx b/src/app/collective-rewards/rewards/backers/Rewards.tsx
@@ -13,6 +13,7 @@ import { CycleContextProvider } from '@/app/collective-rewards/metrics'
 import { PricesContextProvider } from '@/shared/context/PricesContext'
 import { Button } from '@/components/Button'
 import { MetricContainer } from '@/app/collective-rewards/rewards/components/MetricContainer'
+import { Typography } from '@/components/Typography/Typography'
 
 type RewardsProps = RewardDetails
 
@@ -40,13 +41,18 @@ const RewardsContent: FC<RewardsProps> = ({ builder, gauges, tokens }) => {
           tooltip={{
             text: (
               <>
-                An estimate of this Cycle’s rewards that will become fully claimable by the end of the current
-                Cycle. These rewards gradually become claimable and are added to your ‘Claimable Rewards’ as
-                the cycle progresses. To check the cycle completion, go to Collective Rewards → Current Cycle.
-                <br />
-                <br />
-                The displayed information is dynamic and may vary based on total rewards and user activity.
-                This data is for informational purposes only.
+                <Typography>
+                  An estimate of the remainder of this Cycle’s rewards that will become fully claimable by the
+                  end of the current Cycle. These rewards gradually transition into your ‘Claimable Rewards’
+                  as the cycle progresses.
+                </Typography>
+                <Typography marginTop="1rem" marginBottom="1rem">
+                  To check the cycle`s completion, go to Collective Rewards → Current Cycle.
+                </Typography>
+                <Typography>
+                  The displayed information is dynamic and may vary based on total rewards and user activity.
+                  This data is for informational purposes only.
+                </Typography>
               </>
             ),
             popoverProps: { size: 'medium' },

diff --git a/src/app/collective-rewards/rewards/components/Tooltip.tsx b/src/app/collective-rewards/rewards/components/Tooltip.tsx
@@ -30,8 +30,8 @@ export const Tooltip: FC<TooltipProps> = ({ text, popoverProps }) => (
   <>
     <Popover
       content={
-        <div className="text-[12px] mb-1 font-rootstock-sans">
-          <p data-testid="tooltip">{text}</p>
+        <div data-testid="tooltip" className="text-[12px] mb-1 font-rootstock-sans">
+          {text}
         </div>
       }
       trigger="hover"