bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(frontend): refactor AdminOverlay for DESIGN.md compliance

Browse Source 
- Replaced hardcoded background colors with 'level-0' and 'level-1'
- Ensured sharp corners and removed 'font-sans'
- Used primary orange consistently for icons and accents
This commit is contained in:
Daniel Bedeleanu
2026-04-25 13:03:44 +03:00
parent 530b0ec2f9
commit 1b789f6907
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/components/AdminOverlay.tsx
View File

@@ -113,11 +113,11 @@ export default function AdminOverlay({
loading={confirmState.loading} loading={confirmState.loading}
dangerLevel={confirmState.affectedCount && confirmState.affectedCount > 10 ? 'high' : 'medium'} dangerLevel={confirmState.affectedCount && confirmState.affectedCount > 10 ? 'high' : 'medium'}
/> />
<div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-black/60 animate-in fade-in duration-300 font-sans"> <div data-testid="admin-overlay" className="fixed inset-0 z-50 bg-black/80 animate-in fade-in duration-300">
<div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md bg-[#0A0A0A] border-l border-[#222222] shadow-none flex flex-col animate-in slide-in-from-right duration-500 rounded-none"> <div className="absolute inset-y-0 right-0 w-full max-w-md sm:max-w-lg md:max-w-md level-0 border-l border-border shadow-none flex flex-col animate-in slide-in-from-right duration-500">
<div className="p-3 md:p-6 border-b border-[#222222] flex items-center justify-between"> <div className="p-3 md:p-6 border-b border-border flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="p-2 bg-[#1A1A1A] rounded-none text-primary border border-[#222222]"> <div className="p-2 bg-black text-primary border border-border">
<Shield size={20} /> <Shield size={20} />
</div> </div>
<h2 className="text-xl font-normal text-white">System Admin</h2> <h2 className="text-xl font-normal text-white">System Admin</h2>
@@ -125,7 +125,7 @@ export default function AdminOverlay({
<button <button
data-testid="close-admin-overlay" data-testid="close-admin-overlay"
onClick={onClose} onClick={onClose}
className="p-2 hover:bg-[#1A1A1A] rounded-none transition-colors text-[#888888] focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none" className="p-2 hover:bg-black border border-transparent hover:border-border transition-colors text-[#888888] focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
aria-label="Close" aria-label="Close"
> >
<X size={20} /> <X size={20} />
@@ -141,7 +141,7 @@ export default function AdminOverlay({
</div> </div>
<button <button
onClick={() => setShowCreateUserModal(true)} onClick={() => setShowCreateUserModal(true)}
className="flex items-center gap-1 text-xs font-normal text-primary hover:text-[#F58618]/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded-none px-1" className="flex items-center gap-1 text-xs font-normal text-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none px-1"
> >
<UserPlus size={12} /> Add User <UserPlus size={12} /> Add User
</button> </button>
@@ -149,9 +149,9 @@ export default function AdminOverlay({
<div className="grid gap-1.5 md:gap-2"> <div className="grid gap-1.5 md:gap-2">
{users.map(u => ( {users.map(u => (
<div key={u.id} className="bg-transparent border border-[#222222] p-3 md:p-4 rounded-none flex items-center justify-between"> <div key={u.id} className="bg-transparent border border-border p-3 md:p-4 flex items-center justify-between transition-colors hover:border-muted">
<div className="flex items-center gap-2 md:gap-3"> <div className="flex items-center gap-2 md:gap-3">
<div className={`p-2 rounded-none ${u.role === 'admin' ? "bg-primary/20 text-primary" : "bg-[#1A1A1A] text-[#888888]"}`}> <div className={`p-2 ${u.role === 'admin' ? "bg-primary/20 text-primary border border-primary/30" : "bg-black text-[#888888] border border-border"}`}>
<User size={16} /> <User size={16} />
</div> </div>
<div> <div>
@@ -171,7 +171,7 @@ export default function AdminOverlay({
loading: false, loading: false,
}); });
}} }}
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-none transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none" className="p-2 text-rose-500 hover:bg-rose-500/10 transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label={`Delete user ${u.username}`} aria-label={`Delete user ${u.username}`}
> >
<Trash2 size={16} /> <Trash2 size={16} />
@@ -190,7 +190,7 @@ export default function AdminOverlay({
</div> </div>
<button <button
onClick={() => setShowCreateCategoryModal(true)} onClick={() => setShowCreateCategoryModal(true)}
className="flex items-center gap-1 text-xs font-normal text-primary hover:text-[#F58618]/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none rounded-none px-1" className="flex items-center gap-1 text-xs font-normal text-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none px-1"
> >
<Plus size={12} /> Add Category <Plus size={12} /> Add Category
</button> </button>
@@ -198,9 +198,9 @@ export default function AdminOverlay({
<div className="grid gap-1.5 md:gap-2"> <div className="grid gap-1.5 md:gap-2">
{categories.map(cat => ( {categories.map(cat => (
<div key={cat.id} className="bg-transparent border border-[#222222] p-3 md:p-4 rounded-none flex items-center justify-between"> <div key={cat.id} className="bg-transparent border border-border p-3 md:p-4 flex items-center justify-between transition-colors hover:border-muted">
<div className="flex items-center gap-2 md:gap-3"> <div className="flex items-center gap-2 md:gap-3">
<div className="p-2 bg-primary/10 rounded-none text-primary"> <div className="p-2 bg-primary/10 text-primary border border-primary/20">
<Layers size={16} /> <Layers size={16} />
</div> </div>
<div> <div>
@@ -220,7 +220,7 @@ export default function AdminOverlay({
loading: false, loading: false,
}); });
}} }}
className="p-2 text-rose-500 hover:bg-rose-500/10 rounded-none transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none" className="p-2 text-rose-500 hover:bg-rose-500/10 transition-all focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
aria-label={`Delete category ${cat.name}`} aria-label={`Delete category ${cat.name}`}
> >
<Trash2 size={16} /> <Trash2 size={16} />
@@ -230,7 +230,7 @@ export default function AdminOverlay({
</div> </div>
</section> </section>
<section className="p-4 md:p-6 bg-[#1A1A1A] rounded-none border border-[#222222] space-y-2 md:space-y-3"> <section className="p-4 md:p-6 level-1 space-y-2 md:space-y-3">
<div className="flex items-center gap-2 text-rose-500"> <div className="flex items-center gap-2 text-rose-500">
<AlertTriangle size={16} /> <AlertTriangle size={16} />
<p className="text-sm font-normal">Sign Out</p> <p className="text-sm font-normal">Sign Out</p>
@@ -241,7 +241,7 @@ export default function AdminOverlay({
import('@/lib/auth').then(m => m.clearAuth()); import('@/lib/auth').then(m => m.clearAuth());
window.location.href = '/login'; window.location.href = '/login';
}} }}
className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-normal py-3 rounded-none transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none" className="w-full bg-rose-500/10 hover:bg-rose-500/20 text-rose-500 border border-rose-500/20 font-normal py-3 transition-all flex items-center justify-center gap-2 focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:outline-none"
> >
<LogOut size={16} /> Sign Out <LogOut size={16} /> Sign Out
</button> </button>