fix: use theme-aware bg-muted for subscription icon background

[fsousac]

Summary

Fixes subscription icon background not adapting to light/dark theme by replacing static bg-accent with theme-aware bg-muted.

Root cause: The subscription icon container used bg-accent, but the --accent CSS variable is hardcoded as #2a3038 in both :root (light mode) and .dark (dark mode). This meant the icon background stayed dark-gray regardless of theme, creating poor contrast in light mode.

Solution: Replaced bg-accent with bg-muted, which is properly theme-aware:

• Light mode: #f5f0e8 (light neutral background)
• Dark mode: #252b31 (dark neutral background)

This matches the semantic use of other neutral backgrounds in the dashboard and follows the existing theme-token pattern used throughout the app.

Changes:

• components/dashboard/subscriptions-tab.tsx: Changed icon container from bg-accent to bg-muted
• components/dashboard/__tests__/subscriptions-tab.test.tsx: Added test verifying the component uses bg-muted instead of bg-accent

Type of Change

• Bug fix
• Feature
• Documentation
• Security hardening
• Database migration
• Refactor

Testing

• pnpm run lint — passes
• pnpm run build — passes
• pnpm run test — passes (subscriptions-tab theme adaptation test)
• Manual testing completed

Supabase / Database

• No database changes
• Migration added under supabase/migrations
• RLS impact reviewed

Security Checklist

• No secrets committed
• Server Action inputs are validated
• User-owned records are scoped by authenticated user ID
• user_metadata is not used for authorization decisions

Notes

The fix ensures consistent theme adaptation across all icon chip backgrounds in the dashboard. No visual behavior change in dark mode (which already used a light background via transparency); light mode now properly adapts to the lighter theme.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
dragg-finance	Ignored	v0	Sep 23, 2026 3:05pm UTC