diff --git a/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx b/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx index d36fac649..e7559eff3 100644 --- a/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx +++ b/libs/network-stats/src/components/promoted-stats-item/promoted-stats-item.tsx @@ -1,7 +1,7 @@ import { Tooltip } from '@vegaprotocol/ui-toolkit'; import type { StatFields } from '../../config/types'; import { defaultFieldFormatter } from '../table-row'; -import { Card, Indicator, Variant } from '@vegaprotocol/ui-toolkit'; +import { Card, Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit'; import { useMemo } from 'react'; export const PromotedStatsItem = ({ @@ -15,9 +15,9 @@ export const PromotedStatsItem = ({ () => goodThreshold ? goodThreshold(value) - ? Variant.Success - : Variant.Danger - : Variant.Highlight, + ? TailwindIntents.Success + : TailwindIntents.Danger + : TailwindIntents.Highlight, [goodThreshold, value] ); return ( diff --git a/libs/network-stats/src/components/table-row/table-row.tsx b/libs/network-stats/src/components/table-row/table-row.tsx index acae03ab3..955824344 100644 --- a/libs/network-stats/src/components/table-row/table-row.tsx +++ b/libs/network-stats/src/components/table-row/table-row.tsx @@ -1,7 +1,7 @@ import { Tooltip } from '@vegaprotocol/ui-toolkit'; import type { StatFields } from '../../config/types'; import { useMemo } from 'react'; -import { Indicator, Variant } from '@vegaprotocol/ui-toolkit'; +import { Indicator, TailwindIntents } from '@vegaprotocol/ui-toolkit'; export const defaultFieldFormatter = (field: unknown) => field === undefined ? 'no data' : field; @@ -17,9 +17,9 @@ export const TableRow = ({ () => goodThreshold ? goodThreshold(value) - ? Variant.Success - : Variant.Danger - : Variant.Highlight, + ? TailwindIntents.Success + : TailwindIntents.Danger + : TailwindIntents.Help, [goodThreshold, value] ); return ( @@ -30,7 +30,7 @@ export const TableRow = ({ {formatter ? formatter(value) : defaultFieldFormatter(value)} - + diff --git a/libs/ui-toolkit/src/components/indicator/indicator.tsx b/libs/ui-toolkit/src/components/indicator/indicator.tsx index d019c15c1..11354686e 100644 --- a/libs/ui-toolkit/src/components/indicator/indicator.tsx +++ b/libs/ui-toolkit/src/components/indicator/indicator.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; -import type { Variant } from '../../utils/intent'; +import type { TailwindIntents } from '../../utils/intent'; import { getVariantBackground } from '../../utils/intent'; -export const Indicator = ({ variant }: { variant?: Variant }) => { +export const Indicator = ({ variant }: { variant?: TailwindIntents }) => { const names = classNames( 'inline-block w-8 h-8 mb-2 mr-8 rounded', getVariantBackground(variant) diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx index bd1780708..ba5b72efd 100644 --- a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx +++ b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx @@ -1,11 +1,11 @@ import type { ReactNode } from 'react'; import classNames from 'classnames'; -import type { Variant } from '../../utils/intent'; import { getVariantBackground } from '../../utils/intent'; +import type { TailwindIntents } from '../../utils/intent'; interface LozengeProps { children: ReactNode; - variant?: Variant; + variant?: TailwindIntents; className?: string; details?: string; } diff --git a/libs/ui-toolkit/src/utils/intent.ts b/libs/ui-toolkit/src/utils/intent.ts index 0871461d1..0c9e92bdb 100644 --- a/libs/ui-toolkit/src/utils/intent.ts +++ b/libs/ui-toolkit/src/utils/intent.ts @@ -9,10 +9,12 @@ export enum Intent { Help = 'help', } -export enum Variant { - Success = 'success', - Warning = 'warning', +export enum TailwindIntents { Danger = 'danger', + Warning = 'warning', + Prompt = 'prompt', + Success = 'success', + Help = 'help', Highlight = 'highlight', } @@ -27,12 +29,13 @@ export const getIntentShadow = (intent?: Intent) => { }); }; -export const getVariantBackground = (variant?: Variant) => { +export const getVariantBackground = (variant?: TailwindIntents) => { return classNames({ - 'bg-intent-success text-black': variant === Variant.Success, - 'bg-intent-danger text-white': variant === Variant.Danger, - 'bg-intent-warning text-black': variant === Variant.Warning, - 'bg-intent-highlight text-black': variant === Variant.Highlight, - 'bg-intent-help text-white': !variant, + 'bg-intent-danger text-white': variant === TailwindIntents.Danger, + 'bg-intent-warning text-black': variant === TailwindIntents.Warning, + 'bg-intent-prompt text-black': variant === TailwindIntents.Prompt, + 'bg-intent-success text-black': variant === TailwindIntents.Success, + 'bg-intent-help text-white': variant === TailwindIntents.Help, + 'bg-intent-highlight text-black': variant === TailwindIntents.Highlight, }); };