From 4ec3b12d03ba72a00c02496b8183144ff9e34db6 Mon Sep 17 00:00:00 2001
From: arrelin <arrelin54@mail.ru>
Date: Fri, 23 Jan 2026 20:46:01 +0300
Subject: [PATCH] fix: improve purchased items visibility on dark theme

Use custom .shopping-purchased class for purchased items
in shopping list. Now purchased items have proper background
on both light and dark themes.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 frontend/src/components/ShoppingListModal.tsx |  2 +-
 frontend/src/index.css                        | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ShoppingListModal.tsx b/frontend/src/components/ShoppingListModal.tsx
index c2489c9..05822b4 100644
--- a/frontend/src/components/ShoppingListModal.tsx
+++ b/frontend/src/components/ShoppingListModal.tsx
@@ -302,7 +302,7 @@ export default function ShoppingListModal({ familyId, onClose }: ShoppingListMod
                       {purchasedItems.map((item) => (
                         <div
                           key={item.id}
-                          className="bg-green-50 p-4 rounded-2xl border-2 border-green-200"
+                          className="shopping-purchased p-4 rounded-2xl border-2"
                         >
                           <div className="flex items-center justify-between">
                             <div className="flex items-center gap-3">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4028c63..9fd2083 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -191,6 +191,16 @@
   border-color: rgba(139, 92, 246, 0.5);
 }
 
+.shopping-purchased {
+  background-color: rgb(240, 253, 244);
+  border-color: rgb(187, 247, 208);
+}
+
+[data-theme="dark"] .shopping-purchased {
+  background-color: rgba(34, 197, 94, 0.15);
+  border-color: rgba(34, 197, 94, 0.4);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }