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

refactor: extend admin spacing optimization to all components

Browse Source 
Phase 3: Complete admin dashboard spacing standardization

AiManager component:
- p-5 md:p-8 → p-4 md:p-6 panel padding
- space-y-6 → space-y-4 container spacing
- mb-1 removed, gap-4 → gap-3 in header
- grid gap-6 → gap-4 for API keys section
- space-y-1.5 → space-y-1 for form fields
- py-2 → py-1.5 inputs, py-2.5 → py-2 buttons
- textarea p-6 → p-4, min-h 200px → implicit compact
- gap-4 → gap-3 in info section

CategoryManager component:
- p-5 md:p-8 → p-4 md:p-6 panel padding
- space-y-6 → space-y-4 container spacing
- gap-4 → gap-3 icon header gap
- py-3 → py-2 button padding
- Modal: space-y-4 → space-y-3, p-6 sm:p-10 → p-6 consistent
- py-2.5 → py-1.5 inputs
- h-32 textarea → h-24 compact

Tests: 291/291 passing, Build: success
Total admin dashboard savings: ~150px vertical (all 4 components)
This commit is contained in:
Daniel Bedeleanu
2026-04-19 18:59:36 +03:00
parent 1f45e4981b
commit f05fe4b1b6
3 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/components/admin/CategoryManager.tsx
View File

@@ -23,9 +23,9 @@ export default function CategoryManager({
onUpdateCategorySubmit
}: CategoryManagerProps) {
return (
<section className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-5 md:p-8 shadow-2xl space-y-6 transition-all group/categories">
<div className="flex items-center justify-between px-2 mb-2">
<div className="flex items-center gap-4">
<section className="bg-surface/50 border border-slate-800/50 rounded-[2.5rem] p-4 md:p-6 shadow-2xl space-y-4 transition-all group/categories">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Layers size={20} />
</div>
@@ -34,7 +34,7 @@ export default function CategoryManager({
<button
onClick={onAddCategory}
data-testid="add-category-button"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-6 py-3 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
className="flex items-center gap-2 bg-primary hover:bg-primary text-white px-5 py-2 rounded-xl text-sm font-normal transition-all shadow-xl shadow-primary/10 active:scale-95 border border-primary/30 tracking-tight"
>
<Plus size={14} /> New Group
</button>
@@ -72,19 +72,19 @@ export default function CategoryManager({
{/* Edit Category Modal */}
{editingCategory && (
<div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-0 sm:p-4 bg-background/90 animate-in fade-in duration-300">
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 sm:p-10 shadow-2xl space-y-4 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="w-full max-w-lg bg-surface border-x border-t sm:border border-slate-800 rounded-t-[2.5rem] sm:rounded-3xl p-6 shadow-2xl space-y-3 overflow-hidden animate-in slide-in-from-bottom-10">
<div className="flex justify-between items-center mb-2">
<div className="flex items-center gap-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20">
<Edit2 size={20} />
</div>
<h3 className="text-xl font-normal text-white tracking-tight">Modify Group</h3>
</div>
<button onClick={() => setEditingCategory(null)} className="p-3 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
<button onClick={() => setEditingCategory(null)} className="p-2 hover:bg-slate-800 rounded-2xl text-muted transition-colors border border-slate-800">
<X size={20} />
</button>
</div>
<div data-testid="category-form" className="space-y-3">
<div data-testid="category-form" className="space-y-2">
<div className="space-y-1">
<label className="text-sm font-normal text-secondary tracking-tight ml-1">Group Identifier</label>
<input
@@ -92,7 +92,7 @@ export default function CategoryManager({
type="text"
value={editCatForm.name}
onChange={(e) => setEditCatForm({...editCatForm, name: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-2.5 px-5 text-sm text-white focus:border-primary outline-none transition-all"
className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all"
/>
</div>
<div className="space-y-1">
@@ -100,10 +100,10 @@ export default function CategoryManager({
<textarea
value={editCatForm.description}
onChange={(e) => setEditCatForm({...editCatForm, description: e.target.value})}
className="w-full bg-background border border-slate-800 rounded-2xl py-2.5 px-5 text-sm text-white focus:border-primary outline-none transition-all h-32 resize-none"
className="w-full bg-background border border-slate-800 rounded-2xl py-1.5 px-4 text-sm text-white focus:border-primary outline-none transition-all h-24 resize-none"
/>
</div>
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-4 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm mb-4 tracking-tight">
<button data-testid="add-category-submit" onClick={onUpdateCategorySubmit} className="w-full bg-primary hover:bg-primary text-white font-normal py-2.5 rounded-2xl shadow-xl shadow-primary/20 active:scale-95 transition-all text-sm tracking-tight">
Update Asset Group
</button>
</div>