Aller au contenu
login
arrow_backRetour aux issues
Betta-Pay/BettaPay-Frontend #61

Replace `border-l-2` accent stripe in AdminSidebar with background-fill approach

ecoDébutant enhancement help wanted Design Quality

descriptionDescription

**Description:** The admin sidebar uses `border-l-2` with `border-primary` on the active nav item. This is the #1 banned pattern in the impeccable design guidelines ("the single most overused 'design touch' in admin, dashboard, and medical UIs"). The merchant sidebar already uses a better approach: background fill with `bg-amber-50` and a subtle border. **Requirements:** - Remove the `border-l-2` and `border-transparent` classes from admin nav items - Replace with a background-fill approach similar to the merchant sidebar: `bg-primary/10` or `bg-sidebar-accent/30` - Consider adding a small indicator dot instead of a stripe - The active item should still be visually distinct from inactive items **Suggested execution steps:** 1. Open `components/layout/AdminSidebar.tsx` 2. In the nav item `className`, remove `border-l-2 border-transparent` and `border-primary` 3. Change the active style to: `isActive ? "bg-primary/10 text-sidebar-foreground font-semibold" : "text-muted-foreground hover:bg-sidebar-accent/20"` 4. Optionally add a small rounded dot or icon color change for the active indicator 5. Update the merchant sidebar to match if there are any differences **Example commit message:** ``` fix(design): replace border-left accent stripe with background fill in AdminSidebar Removed the banned border-l-2 pattern from admin sidebar nav items. Active state now uses background fill (bg-primary/10) matching the merchant sidebar's approach. Eliminates top AI slop tell. ```
codeOuvre sur GitHub