From 3d2888b66b1cd05788c9a0cfc9a61820a49ed684 Mon Sep 17 00:00:00 2001
From: arrelin <arrelin54@mail.ru>
Date: Fri, 23 Jan 2026 17:37:08 +0300
Subject: [PATCH] fix: improve member highlight visibility on dark theme

Use custom .member-current class instead of tailwind bg-purple-50
to properly support dark theme. Current user now has visible
background on both light and dark themes.

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

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 28cde43..4028c63 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -181,6 +181,16 @@
   color: var(--text-secondary);
 }
 
+.member-current {
+  background-color: rgb(243, 232, 255);
+  border-color: rgb(216, 180, 254);
+}
+
+[data-theme="dark"] .member-current {
+  background-color: rgba(139, 92, 246, 0.2);
+  border-color: rgba(139, 92, 246, 0.5);
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.2s ease-in-out;
 }
diff --git a/frontend/src/pages/Profile.tsx b/frontend/src/pages/Profile.tsx
index 538f508..414d76f 100644
--- a/frontend/src/pages/Profile.tsx
+++ b/frontend/src/pages/Profile.tsx
@@ -238,7 +238,7 @@ export default function Profile() {
                     {familyMembers.map((member) => (
                       <div
                         key={member.id}
-                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'bg-purple-50 border border-purple-200' : 'bg-gray-50'}`}
+                        className={`flex items-center justify-between p-3 rounded-xl ${member.id === user?.id ? 'member-current border' : 'bg-gray-50'}`}
                       >
                         <div className="flex items-center gap-2">
                           <div className="w-8 h-8 category-icon rounded-full flex items-center justify-center text-white text-sm font-medium">