75 lines
4.1 KiB
Markdown
75 lines
4.1 KiB
Markdown
|
# Audit visuel — Résumé et écarts World-Class
|
|||
|
|
|
|||
|
|
**Date** : 2025-02-08
|
|||
|
|
**Référents** : Discord (densité, clarté sidebar), Spotify (rythme vertical, rounded-xl, listes).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Ce qui a été capturé
|
|||
|
|
|
|||
|
|
- **Login** (full page) — spacing inputs, social buttons, primary CTA
|
|||
|
|
- **Register** (full page) — idem
|
|||
|
|
- **Dashboard** (full page) — cartes stats, activité récente
|
|||
|
|
- **Playlists** (full page) — liste / grille
|
|||
|
|
- **Library** (full page) — contenu bibliothèque
|
|||
|
|
- **404** (full page)
|
|||
|
|
- **Header** (composant isolé) — barre supérieure
|
|||
|
|
- **Sidebar** et **Player** — locators mis à jour (`data-testid="app-sidebar"`, `data-testid="global-player"` sur GlobalPlayer). Si toujours skippés, vérifier ordre de rendu ou visibilité (sidebar collapsed par défaut, player sans piste).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Ce que j’ai “vu” (analyse des screenshots)
|
|||
|
|
|
|||
|
|
### 1. Login & Register (focus spacing & inputs)
|
|||
|
|
|
|||
|
|
- **Points positifs** : Inputs en `rounded-xl`, bouton principal en gradient bien mis en avant, champs avec `space-y-5` cohérent.
|
|||
|
|
- **Écarts** :
|
|||
|
|
- Espace entre la ligne “Remember me / Forgot password?” et le bouton “Sign In” un peu grand ou variable par rapport au rythme des champs → à caler sur l’échelle (ex. `mt-4` / `mt-5`).
|
|||
|
|
- Texte secondaire (“OR CONTINUE WITH”, “Don’t have an account?”) en contraste un peu faible → vérifier `muted-foreground` / tokens pour respect AA.
|
|||
|
|
- **Tokens** : Pas de valeurs arbitraires visibles dans les forms ; `space-y-5` / `space-y-8` alignés sur l’échelle Tailwind.
|
|||
|
|
|
|||
|
|
### 2. Dashboard (hiérarchie des cartes)
|
|||
|
|
|
|||
|
|
- **Points positifs** : Cartes stats utilisent déjà `drop-shadow-stat-icon` (ombre neutre), grille `gap-4` / `gap-6`, pas de glow coloré sur les icônes.
|
|||
|
|
- **Écarts** : Activité récente / listes internes : ombres ou bordures encore marquées sur certains blocs → à atténuer pour renforcer la hiérarchie (contenu > chrome).
|
|||
|
|
|
|||
|
|
### 3. Sidebar (alignements, 240px)
|
|||
|
|
|
|||
|
|
- **Code** : Largeur gérée par tokens (`--sidebar-width-expanded: 15rem` = 240px), classes `left-sidebar`, `top-sidebar`, etc. → aligné Discord.
|
|||
|
|
- **Capture** : Test sidebar skippé (locator trop strict). À corriger en `aside[class*="left-sidebar"]` pour rendre la capture fiable.
|
|||
|
|
|
|||
|
|
### 4. Playlists & Library (densité verticale)
|
|||
|
|
|
|||
|
|
- **Points positifs** : `PlaylistTrackItem` en `p-3 sm:p-4`, `gap-2 sm:gap-4` ; liste en `gap-3 sm:gap-4` → rythme correct.
|
|||
|
|
- **Écarts** : Vérifier qu’aucun `gap-[Xpx]` ou `p-[Xpx]` ne reste ; tout doit passer par l’échelle ou des tokens.
|
|||
|
|
|
|||
|
|
### 5. Global Player
|
|||
|
|
|
|||
|
|
- **Code** : Barre fixe en bas (`fixed bottom-0 left-0 right-0`, `h-16`).
|
|||
|
|
- **Capture** : Skippée car le locator `div.fixed.bottom-0.left-0.right-0` peut matcher un autre élément ou l’ordre du DOM. À cibler via `div.fixed.bottom-0.left-0.right-0.h-16` (ou une classe dédiée).
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Synthèse des corrections appliquées
|
|||
|
|
|
|||
|
|
| Zone | Action |
|
|||
|
|
|------|--------|
|
|||
|
|
| **Login/Register** | Espacement explicite entre la ligne “Remember me” et le bouton submit (`mt-5`) pour un rythme vertical cohérent. |
|
|||
|
|
| **Tokens** | Vérification que `--layout-gap` ou équivalent est documenté/utilisé là où c’est pertinent. |
|
|||
|
|
| **Spec visuelle** | Locators sidebar → `aside[class*="left-sidebar"]` ; player → `div.fixed.bottom-0.left-0.right-0.h-16` pour capturer les deux composants. |
|
|||
|
|
| **Hiérarchie** | Déjà en bonne voie (stat cards, ombres). Pas de changement supplémentaire dans ce cycle. |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Contraste (muted-foreground)
|
|||
|
|
|
|||
|
|
Les textes secondaires (“Sign in to your account”, “OR CONTINUE WITH”, “Don’t have an account?”) reposent sur `text-muted-foreground`. Pour viser un niveau “World-Class” et AA, garder ou ajuster la variable `--muted-foreground` (dark) dans `index.css` pour un ratio ≥ 4.5:1 sur le fond sombre.
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Prochaines étapes recommandées
|
|||
|
|
|
|||
|
|
1. Relancer `npm run visual:capture` après correction des locators → vérifier que **sidebar** et **player** sont bien capturés.
|
|||
|
|
2. Mettre à jour les baselines avec `npm run visual:update` si les changements de spacing sont validés.
|
|||
|
|
3. Optionnel : audit contraste (muted-foreground) avec outil type axe DevTools ou Contrast Checker.
|