diff --git a/components/dashboard/subscriptions-tab.tsx b/components/dashboard/subscriptions-tab.tsx index f021f425..ce3bf2e0 100644 --- a/components/dashboard/subscriptions-tab.tsx +++ b/components/dashboard/subscriptions-tab.tsx @@ -40,7 +40,6 @@ type Subscriptions = SubscriptionActionHandlers & { const statusColor = { active: "bg-income text-white", cancelled: "bg-destructive text-white", - paused: "bg-yellow text-black", }; type SubscriptionSummaryCardsProps = { @@ -103,8 +102,11 @@ function SubscriptionInfo({ {payment.name}

{t(`common.${payment.status}`)} diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx index 59328aa2..b771d3e0 100644 --- a/components/ui/badge.tsx +++ b/components/ui/badge.tsx @@ -27,6 +27,8 @@ const badgeVariants = cva( 'rounded-full bg-needs-bg text-needs border-needs/20', wants: 'rounded-full bg-wants-bg text-wants border-wants/20', + warning: + 'rounded-full bg-warning-bg text-warning border-warning/20', }, }, defaultVariants: { diff --git a/tests/components/badge.test.tsx b/tests/components/badge.test.tsx new file mode 100644 index 00000000..6c23fdd7 --- /dev/null +++ b/tests/components/badge.test.tsx @@ -0,0 +1,14 @@ +import { render } from "@testing-library/react"; +import { describe, expect, it } from "vitest"; + +import { Badge } from "@/components/ui/badge"; + +describe("Badge warning variant", () => { + it("renders with theme-safe warning background and text classes", () => { + const { container } = render(Paused); + const el = container.firstElementChild; + expect(el?.className).toContain("bg-warning-bg"); + expect(el?.className).toContain("text-warning"); + expect(el?.className).not.toContain("bg-yellow"); + }); +});