claude:design: co-locate meterBar styles + delete dead progressBar.css

Co-Authored-By: Claude <noreply@anthropic.com>

Author: kuco23

src/assets/css/index.scss

@@ -13,8 +13,6 @@
 @import 'responsive.css';
 @import 'custom.css';
 @import 'wallet.css';
-@import 'meterBar.css';
-@import 'progressBar.css';
 @import 'specs.css';
 
 // --- Error display (used by ServerError + 404 page) ---

src/assets/css/meterBar.css

@@ -0,0 +1,35 @@
+@use '../../assets/css/tokens' as t;
+
+// LED-row meter used on the protocol stats pages (FSP success rates,
+// validator uptime, etc.). The LEDs and the status colours are bespoke
+// data-viz, not theme tokens — they live alongside the component so the
+// status palette stays scoped here.
+
+.meter-bar-container {
+    margin-top: t.$space-3;
+}
+
+.meter-bar-title {
+    font-size: t.$text-base;
+    color: var(--heading-color);
+}
+
+.meter-bar {
+    display: flex;
+    padding: 1.5px;
+}
+
+.meter-bar-desc {
+    text-align: center;
+    width: 100px;
+    font-size: t.$text-lg;
+    margin: auto;
+    margin-left: t.$space-2;
+}
+
+.meter-bar-led {
+    min-height: 100%;
+    margin: 1px;
+    flex-grow: 1;
+    border-radius: 2px;
+}

src/assets/css/progressBar.css

@@ -1,5 +1,6 @@
 import { useMemo } from "react"
 import { Formatter } from "~/utils/misc/formatter"
+import './meterBar.scss'
 
 const MAX_PERC = 100
 
@@ -10,10 +11,14 @@ const MAX_LEDS = 70
 const OPACITY_BEFORE = 0.25
 const OPACITY_AFTER = 1
 
-const COLOR_BAD = ["#d94357", "radial-gradient(#d94357 25%, #a82234)"]
-const COLOR_MED = ["#e58630", "radial-gradient(#a05714 25%, #dd781c)"]
-const COLOR_GUD = ["#76B768", "radial-gradient(#487e3c 25%, #64ae55)"]
-const COLORS = [COLOR_BAD, COLOR_MED, COLOR_GUD]
+// Bespoke status palette for the meter LEDs. Each tier carries the flat
+// label colour + the radial gradient used to render the LED itself.
+type StatusPalette = { label: string, gradient: string }
+
+const STATUS_BAD:    StatusPalette = { label: '#d94357', gradient: 'radial-gradient(#d94357 25%, #a82234)' }
+const STATUS_MEDIUM: StatusPalette = { label: '#e58630', gradient: 'radial-gradient(#a05714 25%, #dd781c)' }
+const STATUS_GOOD:   StatusPalette = { label: '#76B768', gradient: 'radial-gradient(#487e3c 25%, #64ae55)' }
+const STATUS_PALETTE = [STATUS_BAD, STATUS_MEDIUM, STATUS_GOOD]
 
 type args = {
   name: string
@@ -50,12 +55,12 @@ const MeterBar = ({ name, value, text, ranges, height = 40 }: args) => {
 
     valueidx = getColorIdx(scaledValue, -1)
 
-    const data: { color: string[], opacity: number }[] = []
+    const data: { palette: StatusPalette, opacity: number }[] = []
     for (let i = 0; i < leds; i++) {
       const ratio = getRatio(i)
-      const color = getColorIdx(ratio, scaledValue)
+      const idx = getColorIdx(ratio, scaledValue)
       const opacity = scaledValue < ratio ? OPACITY_BEFORE : OPACITY_AFTER
-      data.push({ color: COLORS[color], opacity })
+      data.push({ palette: STATUS_PALETTE[idx], opacity })
     }
 
     return { data, valueidx }
@@ -68,10 +73,10 @@ const MeterBar = ({ name, value, text, ranges, height = 40 }: args) => {
         {
           data.map((d, i) => {
             return <span className='meter-bar-led'
-              key={i} style={{ background: d.color[1], opacity: d.opacity }}></span>
+              key={i} style={{ background: d.palette.gradient, opacity: d.opacity }}></span>
           })
         }
-        <span className='meter-bar-desc' style={{ color: COLORS[valueidx][0] }}>
+        <span className='meter-bar-desc' style={{ color: STATUS_PALETTE[valueidx].label }}>
           { text ?? Formatter.percent(scaledValue / MAX_PERC) }
         </span>
       </div>