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");
+ });
+});