Files
WooNooW/admin-spa
dwindown a36094f6df feat: Standardize toolbar buttons across Orders and Products
**Issue:**
- Products: Delete button was black (bg-black), always visible
- Products: Used inline mr-2 for icon spacing
- Orders: Delete button was red (bg-red-600), conditional
- Orders: Used inline-flex gap-2 for icon spacing
- Inconsistent UX between modules

**Solution:**
1. Added "Toolbar Button Standards" to PROJECT_SOP.md
2. Updated Products to match Orders standard

**Changes to PROJECT_SOP.md:**
- Added button type definitions (Delete, Refresh, Secondary)
- Specified Delete button: bg-red-600 (NOT bg-black)
- Specified icon spacing: inline-flex items-center gap-2
- Specified conditional rendering for destructive actions
- Added 8 mandatory rules for toolbar buttons

**Changes to Products/index.tsx:**
- Delete button: bg-black → bg-red-600 text-white hover:bg-red-700
- Delete button: Always visible → Conditional (only when items selected)
- Icon spacing: inline mr-2 → inline-flex items-center gap-2
- Delete disabled: selectedIds.length === 0 → deleteMutation.isPending
- Refresh icon: inline mr-2 → inline-flex items-center gap-2

**Result:**
 Consistent red delete button (destructive color)
 Delete only shows when items selected (better UX)
 Consistent icon spacing (gap-2)
 Consistent hover effects
 Both modules now identical

**Visual Improvements:**
- Red delete button clearly indicates destructive action
- Cleaner toolbar when no items selected
- Better visual hierarchy
2025-11-20 10:21:32 +07:00
..
2025-11-13 10:13:17 +07:00