blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

align tooltip styles

This commit is contained in:
saml33 2023-05-12 14:08:06 +10:00
parent e4b85b4d5e
commit 4ede5b9a6c
4 changed files with 14 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/stats/PerpMarketsOverviewTable.tsx
View File

@ -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>

6
components/trade/AdvancedMarketHeader.tsx
View File

@ -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">

11
components/trade/OraclePrice.tsx
View File

@ -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">

5
components/trade/PerpFundingRate.tsx
View File

@ -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">