chore(trading): remove underlines on tooltips (#4884)
This commit is contained in:
parent
bb402c02f6
commit
d78de10855
@ -53,7 +53,7 @@ export const HeaderStat = ({
|
|||||||
<div data-testid="item-header" id={id}>
|
<div data-testid="item-header" id={id}>
|
||||||
{heading}
|
{heading}
|
||||||
</div>
|
</div>
|
||||||
<Tooltip description={description}>
|
<Tooltip description={description} underline>
|
||||||
<div
|
<div
|
||||||
data-testid="item-value"
|
data-testid="item-value"
|
||||||
aria-labelledby={id}
|
aria-labelledby={id}
|
||||||
|
@ -290,7 +290,6 @@ export const DealTicketMarginDetails = ({
|
|||||||
assetDecimals
|
assetDecimals
|
||||||
) ?? '-'
|
) ?? '-'
|
||||||
}
|
}
|
||||||
noUnderline
|
|
||||||
>
|
>
|
||||||
<div className="font-mono text-right">
|
<div className="font-mono text-right">
|
||||||
{formatValue(
|
{formatValue(
|
||||||
|
@ -47,7 +47,7 @@ export const KeyValue = ({
|
|||||||
<Tooltip description={labelDescription}>
|
<Tooltip description={labelDescription}>
|
||||||
<div className="text-muted">{label}</div>
|
<div className="text-muted">{label}</div>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip description={`${value ?? '-'} ${symbol || ''}`} noUnderline>
|
<Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
|
||||||
{valueElement}
|
{valueElement}
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,14 +19,14 @@ export interface TooltipProps {
|
|||||||
align?: 'start' | 'center' | 'end';
|
align?: 'start' | 'center' | 'end';
|
||||||
side?: 'top' | 'right' | 'bottom' | 'left';
|
side?: 'top' | 'right' | 'bottom' | 'left';
|
||||||
sideOffset?: number;
|
sideOffset?: number;
|
||||||
noUnderline?: boolean;
|
underline?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) =>
|
export const TOOLTIP_TRIGGER_CLASS_NAME = (underline?: boolean) =>
|
||||||
classNames(
|
classNames({
|
||||||
{ 'underline underline-offset-2': !noUnderline },
|
'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed':
|
||||||
'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'
|
underline,
|
||||||
);
|
});
|
||||||
|
|
||||||
// Conditionally rendered tooltip if description content is provided.
|
// Conditionally rendered tooltip if description content is provided.
|
||||||
export const Tooltip = ({
|
export const Tooltip = ({
|
||||||
@ -36,12 +36,12 @@ export const Tooltip = ({
|
|||||||
sideOffset,
|
sideOffset,
|
||||||
align = 'start',
|
align = 'start',
|
||||||
side = 'bottom',
|
side = 'bottom',
|
||||||
noUnderline,
|
underline,
|
||||||
}: TooltipProps) =>
|
}: TooltipProps) =>
|
||||||
description ? (
|
description ? (
|
||||||
<Provider delayDuration={200} skipDelayDuration={100}>
|
<Provider delayDuration={200} skipDelayDuration={100}>
|
||||||
<Root open={open}>
|
<Root open={open}>
|
||||||
<Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(noUnderline)}>
|
<Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}>
|
||||||
{children}
|
{children}
|
||||||
</Trigger>
|
</Trigger>
|
||||||
{description && (
|
{description && (
|
||||||
|
Loading…
Reference in New Issue
Block a user