From 4ede5b9a6c92f97313b77b0b097d63162a2f7045 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 12 May 2023 14:08:06 +1000
Subject: [PATCH] align tooltip styles

---
 components/stats/PerpMarketsOverviewTable.tsx |  9 +++++----
 components/trade/AdvancedMarketHeader.tsx     |  6 ++++--
 components/trade/OraclePrice.tsx              | 11 +++--------
 components/trade/PerpFundingRate.tsx          |  5 ++---
 4 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/stats/PerpMarketsOverviewTable.tsx b/components/stats/PerpMarketsOverviewTable.tsx
index 1f66e803..4cf30a55 100644
--- a/components/stats/PerpMarketsOverviewTable.tsx
+++ b/components/stats/PerpMarketsOverviewTable.tsx
@@ -20,7 +20,6 @@ import Tooltip from '@components/shared/Tooltip'
 import { PerpStatsItem } from 'types'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { NextRouter, useRouter } from 'next/router'
-import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import SimpleAreaChart from '@components/shared/SimpleAreaChart'
 
 export const getOneDayPerpStats = (
@@ -189,13 +188,15 @@ const PerpMarketsOverviewTable = () => {
                   </Td>
                   <Td>
                     <div className="flex items-center justify-end">
-                      <p className="">{fundingRate}</p>
                       <Tooltip
                         content={
                           <>
                             {fundingRateApr ? (
                               <div className="">
-                                The 1hr rate as an APR is {fundingRateApr}.
+                                The 1hr rate as an APR is{' '}
+                                <span className="font-mono text-th-fgd-2">
+                                  {fundingRateApr}
+                                </span>
                               </div>
                             ) : null}
                             <div className="mt-2">
@@ -210,7 +211,7 @@ const PerpMarketsOverviewTable = () => {
                           </>
                         }
                       >
-                        <InformationCircleIcon className="ml-2 h-4 w-4" />
+                        <p className="tooltip-underline">{fundingRate}</p>
                       </Tooltip>
                     </div>
                   </Td>
diff --git a/components/trade/AdvancedMarketHeader.tsx b/components/trade/AdvancedMarketHeader.tsx
index aa0898d7..be7bce94 100644
--- a/components/trade/AdvancedMarketHeader.tsx
+++ b/components/trade/AdvancedMarketHeader.tsx
@@ -101,7 +101,9 @@ const AdvancedMarketHeader = ({
               <OraclePrice setChangePrice={setChangePrice} />
             </>
             <div className="ml-6 flex-col whitespace-nowrap">
-              <div className="text-xs text-th-fgd-4">{t('rolling-change')}</div>
+              <div className="mb-0.5 text-xs text-th-fgd-4">
+                {t('rolling-change')}
+              </div>
               {!loadingPrices && !loadingPerpStats ? (
                 <Change change={change} size="small" suffix="%" />
               ) : (
@@ -114,7 +116,7 @@ const AdvancedMarketHeader = ({
               <>
                 <PerpFundingRate />
                 <div className="ml-6 flex-col whitespace-nowrap text-xs">
-                  <div className="text-th-fgd-4">
+                  <div className="mb-0.5 text-th-fgd-4 ">
                     {t('trade:open-interest')}
                   </div>
                   <span className="font-mono">
diff --git a/components/trade/OraclePrice.tsx b/components/trade/OraclePrice.tsx
index 95666547..a130e617 100644
--- a/components/trade/OraclePrice.tsx
+++ b/components/trade/OraclePrice.tsx
@@ -1,7 +1,4 @@
-import {
-  ExclamationTriangleIcon,
-  InformationCircleIcon,
-} from '@heroicons/react/24/outline'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import Tooltip from '@components/shared/Tooltip'
 import { useTranslation } from 'next-i18next'
@@ -167,14 +164,12 @@ const OraclePrice = ({
           }
         >
           <div className="flex items-center">
-            <div className="text-xs text-th-fgd-4">
+            <div className="tooltip-underline mb-0.5 text-xs text-th-fgd-4">
               {t('trade:oracle-price')}
             </div>
             {isStale ? (
               <ExclamationTriangleIcon className="ml-1 h-4 w-4 text-th-warning" />
-            ) : (
-              <InformationCircleIcon className="ml-1 h-4 w-4 text-th-fgd-4" />
-            )}
+            ) : null}
           </div>
         </Tooltip>
         <div className="font-mono text-xs text-th-fgd-2">
diff --git a/components/trade/PerpFundingRate.tsx b/components/trade/PerpFundingRate.tsx
index c772a225..f5d9b503 100644
--- a/components/trade/PerpFundingRate.tsx
+++ b/components/trade/PerpFundingRate.tsx
@@ -1,5 +1,4 @@
 import { BookSide, PerpMarket } from '@blockworks-foundation/mango-v4'
-import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { useQuery } from '@tanstack/react-query'
 import useMangoGroup from 'hooks/useMangoGroup'
 import useSelectedMarket from 'hooks/useSelectedMarket'
@@ -164,10 +163,10 @@ const PerpFundingRate = () => {
           }
         >
           <div className="flex items-center">
-            <div className="text-xs text-th-fgd-4">
+            <div className="tooltip-underline mb-0.5 text-xs text-th-fgd-4">
               {t('trade:funding-rate')}
             </div>
-            <InformationCircleIcon className="ml-1 h-4 w-4 text-th-fgd-4" />
+            {/* <InformationCircleIcon className="ml-1 h-4 w-4 text-th-fgd-4" /> */}
           </div>
         </Tooltip>
         <p className="font-mono text-xs text-th-fgd-2">