diff --git a/.kiro/specs/schotziad-km-tracker/design.md b/.kiro/specs/schotziad-km-tracker/design.md index b345250..143ee0e 100644 --- a/.kiro/specs/schotziad-km-tracker/design.md +++ b/.kiro/specs/schotziad-km-tracker/design.md @@ -55,7 +55,11 @@ ### Charte graphique - **Palette officielle** (variables CSS globales dans `styles.scss`) : Orange `--couleur-orange: #F28C28`, Bleu IAD `--couleur-bleu: #0074B8` (couleur primaire), Gris anthracite `--couleur-anthracite: #343A40`, Gris clair `--couleur-gris-clair: #E7E9EA`, avec déclinaisons de survol `--couleur-bleu-fonce` et `--couleur-orange-fonce`. -- **Convention d'interaction** : les boutons d'action à fond bleu (texte, ex. `.btn-principal`, `.btn-primaire`, `.btn-confirmer`) passent à l'orange au survol. Cette règle ne s'applique PAS aux boutons à fond différent (rouge pour la suppression, blanc pour les actions secondaires) ni aux boutons à icône. Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) restent en bleu plein, sans changement de teinte au survol. +- **Convention d'interaction** : tous les boutons d'ACTION passent à l'orange plein au survol (texte blanc), qu'ils soient à fond bleu plein (ex. `.btn-principal`, `.btn-primaire`, bouton de soumission bleu) ou à fond blanc/clair avec texte bleu (actions secondaires, ex. « Utiliser mon domicile » `.btn-domicile`, « Export PDF » `.btn-secondaire` des résumés, « Recopier le dernier barème » `.btn-secondaire` du barème, « Modifier » et « Enregistrer/Ajouter » du carnet d'adresses). L'intention : harmoniser le feedback de survol de toutes les actions sur l'orange de la charte. Exceptions qui NE passent PAS à l'orange au survol : + - Les boutons « Annuler » : rendu neutre uniformisé sur tout le site (fond blanc, bordure grise `#c4c9d1`, texte `#33475b`, survol gris clair `#f3f5f8`), aligné sur l'écran d'ajout/modification d'un trajet et repris à l'identique sur le barème (`.btn-annuler`), le carnet d'adresses (`.btn--annuler`) et le composant partagé `confirm-dialog`. + - Les boutons de suppression (rouge) : restent rouges. + - Les boutons à icône seule. + - Les indicateurs d'état sélectionné/actif (lien de navigation actif, mois sélectionné, onglet actif) : restent en bleu plein, sans changement de teinte au survol. - **Assets graphiques** (`frontend/src/assets/images/`) : - `logo-icon.png` : icône seule, affichée en tête de la barre de navigation (fond blanc localisé pour ressortir sur la barre anthracite). - `logo-carre.png` : logo avec texte vertical, centré au-dessus du formulaire sur les 4 pages d'authentification (connexion, inscription, mot de passe oublié, réinitialisation). diff --git a/frontend/src/app/features/bareme/bareme.component.html b/frontend/src/app/features/bareme/bareme.component.html index fc3d139..1b79770 100644 --- a/frontend/src/app/features/bareme/bareme.component.html +++ b/frontend/src/app/features/bareme/bareme.component.html @@ -107,7 +107,7 @@ - diff --git a/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss b/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss index 5a61264..8fc72b4 100644 --- a/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss +++ b/frontend/src/app/features/carnet-adresses/carnet-adresses.component.scss @@ -139,6 +139,10 @@ button { font-size: 0.9rem; cursor: pointer; + &:hover:not(:disabled) { + background: var(--couleur-orange); + } + &:disabled { opacity: 0.5; cursor: not-allowed; @@ -148,6 +152,26 @@ button { .btn--secondary { background: #e0e0e0; color: #333; + + // "Modifier" (et autres actions secondaires) : passage à l'orange au survol, + // comme les boutons bleus. + &:hover:not(:disabled) { + background: var(--couleur-orange); + color: #fff; + } +} + +// "Annuler" : rendu uniformisé sur tout le site — fond blanc, bordure grise, +// survol gris clair (même rendu que l'écran d'ajout/modification d'un trajet). +.btn--annuler { + background: #fff; + color: #33475b; + border: 1px solid #c4c9d1; + + &:hover:not(:disabled) { + background: #f3f5f8; + color: #33475b; + } } .btn--danger { diff --git a/frontend/src/app/features/resume-annuel/resume-annuel.component.scss b/frontend/src/app/features/resume-annuel/resume-annuel.component.scss index 4a2700d..67176e8 100644 --- a/frontend/src/app/features/resume-annuel/resume-annuel.component.scss +++ b/frontend/src/app/features/resume-annuel/resume-annuel.component.scss @@ -70,6 +70,12 @@ h1 { background: #fff; color: #1565c0; border: 1px solid #1565c0; + + &:hover:not(:disabled) { + background: var(--couleur-orange); + border-color: var(--couleur-orange); + color: #fff; + } } .btn-principal:disabled, diff --git a/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss b/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss index 97ef8b9..c494fed 100644 --- a/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss +++ b/frontend/src/app/features/resume-mensuel/resume-mensuel.component.scss @@ -46,6 +46,12 @@ h1 { background: #fff; color: #1565c0; border: 1px solid #1565c0; + + &:hover:not(:disabled) { + background: var(--couleur-orange); + border-color: var(--couleur-orange); + color: #fff; + } } .btn-principal:disabled, diff --git a/frontend/src/app/features/trajet-form/trajet-form.component.scss b/frontend/src/app/features/trajet-form/trajet-form.component.scss index 240b31f..d2f2da3 100644 --- a/frontend/src/app/features/trajet-form/trajet-form.component.scss +++ b/frontend/src/app/features/trajet-form/trajet-form.component.scss @@ -59,7 +59,9 @@ cursor: pointer; &:hover:not(:disabled) { - background: #ebf3fb; + background: var(--couleur-orange); + border-color: var(--couleur-orange); + color: #fff; } &:disabled {