From 66df05cbb355a01f41284580469fbde394192513 Mon Sep 17 00:00:00 2001
From: Felipe de Sousa <felipescoelho517@gmail.com>
Date: Wed, 23 Sep 2026 11:52:10 -0300
Subject: [PATCH] fix: use theme-aware bg-muted for subscription icon
 background

---
 components/dashboard/subscriptions-tab.tsx |  2 +-
 tests/dashboard/subscriptions-tab.test.tsx | 43 ++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 tests/dashboard/subscriptions-tab.test.tsx

diff --git a/components/dashboard/subscriptions-tab.tsx b/components/dashboard/subscriptions-tab.tsx
index f021f425..24296eb6 100644
--- a/components/dashboard/subscriptions-tab.tsx
+++ b/components/dashboard/subscriptions-tab.tsx
@@ -94,7 +94,7 @@ function SubscriptionInfo({
 
   return (
     <>
-      <div className="flex size-12 items-center justify-center rounded-lg bg-accent text-2xl">
+      <div className="flex size-12 items-center justify-center rounded-lg bg-muted text-2xl">
         {payment.icon}
       </div>
       <div className="min-w-0">
diff --git a/tests/dashboard/subscriptions-tab.test.tsx b/tests/dashboard/subscriptions-tab.test.tsx
new file mode 100644
index 00000000..37af3776
--- /dev/null
+++ b/tests/dashboard/subscriptions-tab.test.tsx
@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { SubscriptionsTab } from "@/components/dashboard/subscriptions-tab";
+import type { SubscriptionOverviewItem } from "@/lib/finance/subscriptions";
+
+vi.mock("@/lib/i18n", () => ({
+  useI18n: () => ({
+    formatCurrency: (value: number) => `$${value.toFixed(2)}`,
+    formatDate: (value: string | Date) =>
+      value instanceof Date ? value.toISOString().slice(0, 10) : value,
+    t: (key: string) => key,
+  }),
+}));
+
+const subscription: SubscriptionOverviewItem = {
+  amount: 25,
+  categoryKey: "categories.entertainment",
+  frequency: "monthly",
+  icon: "🎬",
+  id: "sub-1",
+  name: "Streaming",
+  nextDate: "2026-10-01",
+  status: "active",
+};
+
+describe("SubscriptionsTab icon background theming", () => {
+  it("uses a theme-aware muted background, not the static accent token", () => {
+    const { container } = render(
+      <SubscriptionsTab
+        isPending={false}
+        onDeleteSubscription={vi.fn()}
+        onEditSubscription={vi.fn()}
+        onToggleSubscriptionStatus={vi.fn()}
+        subscriptions={[subscription]}
+      />,
+    );
+
+    const iconContainer = container.querySelector(".rounded-lg.bg-muted");
+    expect(iconContainer).not.toBeNull();
+    expect(container.querySelector(".rounded-lg.bg-accent")).toBeNull();
+  });
+});