feat: update tooltip small text (#240)

Swaylend · Jan 15, 2025 · b4f73e5 · b4f73e5
1 parent 75477bf
commit b4f73e5
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 5 deletions.
diff --git a/apps/frontend/src/components/InfoIcon/index.tsx b/apps/frontend/src/components/InfoIcon/index.tsx
@@ -7,7 +7,7 @@ import {
   TooltipTrigger,
 } from '@/components/ui/tooltip';
 import { Info } from 'lucide-react';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export const InfoIcon = ({ text }: { text: ReactNode }) => {
   return (
     <TooltipProvider delayDuration={100}>

diff --git a/apps/frontend/src/components/Navbar/Points.tsx b/apps/frontend/src/components/Navbar/Points.tsx
@@ -53,6 +53,34 @@ export const Points = () => {
             Points Leaderboard
           </Button>
         </Link>
+
+        <div className="flex flex-col mt-4 gap-y-2 items-center border border-white/10 w-full p-2 rounded-xl">
+          <div className="text-primary">Fuel Rewards</div>
+          <div className={cn('text-lavender font-semibold')}>
+            Season 1 - Part 1
+          </div>
+          <div className=" text-[#F4B845] text-lg font-semibold">
+            Calculating
+          </div>
+        </div>
+        <div className="px-1 text-[10px] italic text-moon">
+          <div className="">
+            <span className="font-semibold">Disclaimer</span>: Fuel Rewards will
+            be visible after the distribution:
+          </div>
+          <div className=" w-full mt-2 flex justify-center">
+            <div>
+              <div>
+                - <span className="font-semibold">After Day 30</span>: Initial
+                distribution of rewards.
+              </div>
+              <div>
+                - <span className="font-semibold">End of Day 45</span>: Final
+                distribution of rewards.
+              </div>
+            </div>
+          </div>
+        </div>
       </PopoverContent>
     </Popover>
   );

diff --git a/apps/frontend/src/components/NetBorrowTooltip/index.tsx b/apps/frontend/src/components/NetBorrowTooltip/index.tsx
@@ -1,4 +1,4 @@
-import BigNumber from 'bignumber.js';
+import type BigNumber from 'bignumber.js';
 import { Line } from '../Line';
 
 type NetBorrowTooltipProps = {
@@ -16,7 +16,7 @@ type NetBorrowTooltipProps = {
 
 export const NetBorrowTooltip = ({ aprData }: NetBorrowTooltipProps) => {
   return (
-    <div className="min-w-[200px] p-2">
+    <div className="min-w-[200px] max-w-[300px] py-2 px-4">
       <div className="flex justify-center font-semibold text-white text-lg">
         Net Borrow APY
       </div>
@@ -38,6 +38,10 @@ export const NetBorrowTooltip = ({ aprData }: NetBorrowTooltipProps) => {
         <div>Net Borrow APY</div>
         <div>{aprData?.netBorrowApr.times(100).toFixed(2)}%</div>
       </div>
+      <div className="mt-1 text-center text-xs italic text-moon">
+        A negative Net Borrow APY means you are earning interest on your
+        borrowed funds.
+      </div>
     </div>
   );
 };
diff --git a/apps/frontend/src/components/NetEarnTooltip/index.tsx b/apps/frontend/src/components/NetEarnTooltip/index.tsx
@@ -1,4 +1,4 @@
-import BigNumber from 'bignumber.js';
+import type BigNumber from 'bignumber.js';
 import { Line } from '../Line';
 
 type NetEarnTooltipProps = {

diff --git a/apps/frontend/src/components/PointIcons/index.tsx b/apps/frontend/src/components/PointIcons/index.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import Image from 'next/image';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import {
   Tooltip,
   TooltipContent,