fix: update admin navigation styles for improved accessibility and dark mode support
This commit is contained in:
seaznCode
parent
5832da59a9
commit
40a01ef665
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user