diff --git a/frontend/src/components/SpotPanel/SpotPanel.css b/frontend/src/components/SpotPanel/SpotPanel.css index d8db858..22d0103 100644 --- a/frontend/src/components/SpotPanel/SpotPanel.css +++ b/frontend/src/components/SpotPanel/SpotPanel.css @@ -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; diff --git a/frontend/src/components/SpotPanel/SpotPanel.jsx b/frontend/src/components/SpotPanel/SpotPanel.jsx index edc1b91..fb77a66 100644 --- a/frontend/src/components/SpotPanel/SpotPanel.jsx +++ b/frontend/src/components/SpotPanel/SpotPanel.jsx @@ -110,19 +110,15 @@ export default function SpotPanel({ spot, activeStep, onClose }) { })()}
Indice de risque
+ {scoreLabel(displayScore.value, lvl)}{displayScore.value} / 100