From f021b8248ea57b09d784f9f346abf83bc4e356b8 Mon Sep 17 00:00:00 2001 From: lyzno1 Date: Thu, 13 Nov 2025 17:36:38 +0800 Subject: [PATCH] refactor: usage info bar color --- web/app/components/billing/usage-info/index.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/web/app/components/billing/usage-info/index.tsx b/web/app/components/billing/usage-info/index.tsx index 0ed8775772..1434c376ad 100644 --- a/web/app/components/billing/usage-info/index.tsx +++ b/web/app/components/billing/usage-info/index.tsx @@ -18,8 +18,7 @@ type Props = { unitPosition?: 'inline' | 'suffix' } -const LOW = 50 -const MIDDLE = 80 +const WARNING_THRESHOLD = 80 const UsageInfo: FC = ({ className, @@ -34,15 +33,9 @@ const UsageInfo: FC = ({ const { t } = useTranslation() const percent = usage / total * 100 - const color = (() => { - if (percent < LOW) - return 'bg-components-progress-bar-progress-solid' - - if (percent < MIDDLE) - return 'bg-components-progress-warning-progress' - - return 'bg-components-progress-error-progress' - })() + const color = percent >= 100 + ? 'bg-components-progress-error-progress' + : (percent >= WARNING_THRESHOLD ? 'bg-components-progress-warning-progress' : 'bg-components-progress-bar-progress-solid') const isUnlimited = total === NUM_INFINITE let totalDisplay: string | number = isUnlimited ? t('billing.plansCommon.unlimited') : total if (!isUnlimited && unit && unitPosition === 'inline')