From 40a01ef66578dda21368440916d3fe4bd0e508ae Mon Sep 17 00:00:00 2001
From: seaznCode <alexander.atmn@gmail.com>
Date: Tue, 27 Jan 2026 19:25:55 +0100
Subject: [PATCH] fix: update admin navigation styles for improved
 accessibility and dark mode support

---
 src/app/components/nav/Header.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/components/nav/Header.tsx b/src/app/components/nav/Header.tsx
index e104ef3..81436d0 100644
--- a/src/app/components/nav/Header.tsx
+++ b/src/app/components/nav/Header.tsx
@@ -723,42 +723,42 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
 
                         {/* Admin navigation – LAST */}
                         {isAdmin && (
-                          <div className="group mt-2 rounded-2xl border border-white/15 bg-zinc-900/90 shadow-[0_18px_45px_rgba(0,0,0,0.45)] ring-1 ring-white/15 transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_22px_55px_rgba(0,0,0,0.6)]">
+                          <div className="group mt-2 rounded-2xl border border-indigo-100 bg-white shadow-[0_12px_28px_rgba(15,23,42,0.12)] ring-1 ring-indigo-100/70 transition-transform transition-shadow duration-200 ease-out hover:-translate-y-0.5 hover:shadow-[0_16px_32px_rgba(15,23,42,0.18)] dark:border-indigo-500/20 dark:bg-gradient-to-br dark:from-slate-950/85 dark:via-slate-900/90 dark:to-indigo-950/80 dark:ring-white/10 dark:shadow-[0_18px_45px_rgba(0,0,0,0.45)] dark:hover:shadow-[0_22px_55px_rgba(0,0,0,0.6)]">
                             <div className="px-3 py-2.5 group-hover:animate-pulse">
-                              <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-200">
+                              <p className="mb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-700 dark:text-indigo-100/80">
                                 Admin Navigation
                               </p>
-                              <div className="mb-2 h-px w-full bg-gradient-to-r from-transparent via-white/70 to-transparent opacity-80 transition-opacity group-hover:opacity-100" />
+                              <div className="mb-2 h-px w-full bg-gradient-to-r from-transparent via-indigo-200/70 to-transparent opacity-80 transition-opacity group-hover:opacity-100 dark:via-indigo-200/40" />
                               <div className="grid grid-cols-1 gap-1.5 text-sm">
                                 <button
                                   onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }}
-                                  className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                  className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                 >
                                   Dashboard
                                 </button>
                                 <button
                                   onClick={() => { router.push('/admin/user-verify'); setMobileMenuOpen(false); }}
-                                  className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                  className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                 >
                                   User Verify
                                 </button>
                                 <button
                                   onClick={() => { router.push('/admin/user-management'); setMobileMenuOpen(false); }}
-                                  className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                  className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                 >
                                   User Management
                                 </button>
                                 {DISPLAY_MATRIX && (
                                   <button
                                     onClick={() => { router.push('/admin/matrix-management'); setMobileMenuOpen(false); }}
-                                    className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                    className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                   >
                                     Matrix Management
                                   </button>
                                 )}
                                 <button
                                   onClick={() => { router.push('/admin/contract-management'); setMobileMenuOpen(false); }}
-                                  className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                  className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                 >
                                   Contract Management
                                 </button>
@@ -766,13 +766,13 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
                                   <>
                                     <button
                                       onClick={() => { router.push('/admin/subscriptions'); setMobileMenuOpen(false); }}
-                                      className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                      className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                     >
                                       Coffee Management
                                     </button>
                                     <button
                                       onClick={() => { router.push('/admin/finance-management'); setMobileMenuOpen(false); }}
-                                      className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                      className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                     >
                                       Finance Management
                                     </button>
@@ -781,21 +781,21 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
                                 {DISPLAY_POOLS && (
                                   <button
                                     onClick={() => { router.push('/admin/pool-management'); setMobileMenuOpen(false); }}
-                                    className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                    className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                   >
                                     Pool Management
                                   </button>
                                 )}
                                 <button
                                   onClick={() => { router.push('/admin/affiliate-management'); setMobileMenuOpen(false); }}
-                                  className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                  className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                 >
                                   Affiliate Management
                                 </button>
                                 {DISPLAY_NEWS && (
                                   <button
                                     onClick={() => { router.push('/admin/news-management'); setMobileMenuOpen(false); }}
-                                    className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                    className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                   >
                                     News Management
                                   </button>
@@ -805,7 +805,7 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
                                 {isAdminOrSuper && (
                                   <button
                                     onClick={() => { router.push('/admin/dev-management'); setMobileMenuOpen(false); }}
-                                    className="w-full text-left rounded-lg px-2 py-1.5 text-gray-100 hover:bg-white/15 hover:text-white transition-colors"
+                                    className="w-full text-left rounded-lg px-2 py-1.5 text-slate-800 hover:bg-indigo-50 hover:text-slate-900 transition-colors dark:text-indigo-50 dark:hover:bg-white/10 dark:hover:text-white"
                                   >
                                     Dev Management
                                   </button>