ux: refonte jauge — label dominant, score /100 en détail discret

- "Indice de risque" en petit header explicite au-dessus
- Le label (VEILLE / RISQUE / IMPACT) devient l'élément visuel principal (30px)
- Le nombre /100 rétrogradé en hint discret sous la barre
- Suppression de l'ambiguïté "est-ce une note ou un risque ?"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gwadaking
2026-04-08 02:03:33 -04:00
parent 364bb5dfcc
commit 0d47a7ee89
2 changed files with 23 additions and 31 deletions

View File

@@ -76,38 +76,27 @@
.gauge--medium { background: #fef9c3; }
.gauge--high { background: #fee2e2; }
.spot-panel__gauge-top {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 10px;
.spot-panel__gauge-header {
margin: 0 0 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(0,0,0,0.35);
}
.spot-panel__gauge-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
display: block;
font-family: 'Fredoka One', cursive;
font-size: 30px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 10px;
}
.gauge--low .spot-panel__gauge-label { color: #16a34a; }
.gauge--medium .spot-panel__gauge-label { color: #d97706; }
.gauge--high .spot-panel__gauge-label { color: #dc2626; }
.spot-panel__gauge-score {
font-family: 'Fredoka One', cursive;
font-size: 32px;
font-weight: 400;
color: #1a1a2e;
line-height: 1;
}
.spot-panel__gauge-max {
font-size: 13px;
font-weight: 400;
color: #999;
margin-left: 2px;
font-family: 'Fredoka', sans-serif;
}
.spot-panel__gauge-track {
height: 6px;
background: rgba(0, 0, 0, 0.1);
@@ -124,6 +113,13 @@
.gauge--medium .spot-panel__gauge-fill { background: #eab308; }
.gauge--high .spot-panel__gauge-fill { background: #ef4444; }
.spot-panel__gauge-hint {
margin: 5px 0 0;
font-size: 11px;
color: rgba(0,0,0,0.3);
text-align: right;
}
/* ETA */
.spot-panel__eta {
display: flex;

View File

@@ -110,19 +110,15 @@ export default function SpotPanel({ spot, activeStep, onClose }) {
})()}
<div className={`spot-panel__gauge gauge--${lvl}`}>
<div className="spot-panel__gauge-top">
<p className="spot-panel__gauge-header">Indice de risque</p>
<span className="spot-panel__gauge-label">{scoreLabel(displayScore.value, lvl)}</span>
<span className="spot-panel__gauge-score">
{displayScore.value}
<span className="spot-panel__gauge-max">/100</span>
</span>
</div>
<div className="spot-panel__gauge-track">
<div
className="spot-panel__gauge-fill"
style={{ width: `${displayScore.value}%` }}
/>
</div>
<p className="spot-panel__gauge-hint">{displayScore.value} / 100</p>
</div>
{activeStep === 'now' && displayScore.trend && (() => {