chore(trading): remove underlines on tooltips (#4884)

This commit is contained in:
Maciek 2023-09-26 19:45:33 +02:00 committed by GitHub
parent bb402c02f6
commit d78de10855
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 11 deletions

View File

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

View File

@ -290,7 +290,6 @@ export const DealTicketMarginDetails = ({
assetDecimals assetDecimals
) ?? '-' ) ?? '-'
} }
noUnderline
> >
<div className="font-mono text-right"> <div className="font-mono text-right">
{formatValue( {formatValue(

View File

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

View File

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