Seazn/profit-planet-frontend
2
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: update admin navigation styles for improved accessibility and dark mode support

Browse Source
This commit is contained in:
seaznCode 2026-01-27 19:25:55 +01:00
parent 5832da59a9
commit 40a01ef665
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/components/nav/Header.tsx
View File

@ -723,42 +723,42 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
{/* Admin navigation – LAST */} {/* Admin navigation – LAST */}
{isAdmin && ( {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"> <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 Admin Navigation
</p> </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"> <div className="grid grid-cols-1 gap-1.5 text-sm">
<button <button
onClick={() => { router.push('/admin'); setMobileMenuOpen(false); }} 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 Dashboard
</button> </button>
<button <button
onClick={() => { router.push('/admin/user-verify'); setMobileMenuOpen(false); }} 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 User Verify
</button> </button>
<button <button
onClick={() => { router.push('/admin/user-management'); setMobileMenuOpen(false); }} 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 User Management
</button> </button>
{DISPLAY_MATRIX && ( {DISPLAY_MATRIX && (
<button <button
onClick={() => { router.push('/admin/matrix-management'); setMobileMenuOpen(false); }} 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 Matrix Management
</button> </button>
)} )}
<button <button
onClick={() => { router.push('/admin/contract-management'); setMobileMenuOpen(false); }} 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 Contract Management
</button> </button>
@ -766,13 +766,13 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
<> <>
<button <button
onClick={() => { router.push('/admin/subscriptions'); setMobileMenuOpen(false); }} 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 Coffee Management
</button> </button>
<button <button
onClick={() => { router.push('/admin/finance-management'); setMobileMenuOpen(false); }} 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 Finance Management
</button> </button>
@ -781,21 +781,21 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
{DISPLAY_POOLS && ( {DISPLAY_POOLS && (
<button <button
onClick={() => { router.push('/admin/pool-management'); setMobileMenuOpen(false); }} 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 Pool Management
</button> </button>
)} )}
<button <button
onClick={() => { router.push('/admin/affiliate-management'); setMobileMenuOpen(false); }} 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 Affiliate Management
</button> </button>
{DISPLAY_NEWS && ( {DISPLAY_NEWS && (
<button <button
onClick={() => { router.push('/admin/news-management'); setMobileMenuOpen(false); }} 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 News Management
</button> </button>
@ -805,7 +805,7 @@ export default function Header({ setGlobalLoggingOut }: HeaderProps) {
{isAdminOrSuper && ( {isAdminOrSuper && (
<button <button
onClick={() => { router.push('/admin/dev-management'); setMobileMenuOpen(false); }} 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 Dev Management
</button> </button>