monoadmin/the-other-dude
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): replace hardcoded chart hex colors with Warm Precision tokens

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 13:45:52 -05:00
parent 72c09d95bb
commit b8d8abde32
5 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/monitoring/HealthChart.tsx
View File

@@ -64,10 +64,10 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
<stop offset="100%" stopColor={color} stopOpacity={0} /> <stop offset="100%" stopColor={color} stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
<XAxis <XAxis
dataKey="bucket" dataKey="bucket"
tick={{ fontSize: 9, fill: '#94a3b8' }} tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
interval="preserveStartEnd" interval="preserveStartEnd"
@@ -75,7 +75,7 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
<YAxis <YAxis
domain={domain} domain={domain}
tickFormatter={(v: number) => `${v}${unit}`} tickFormatter={(v: number) => `${v}${unit}`}
tick={{ fontSize: 9, fill: '#94a3b8' }} tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
width={40} width={40}

2
frontend/src/components/monitoring/HealthTab.tsx
View File

@@ -55,7 +55,7 @@ export function HealthTab({ tenantId, deviceId, active = true }: HealthTabProps)
data={data} data={data}
metric="avg_cpu" metric="avg_cpu"
label="CPU Load" label="CPU Load"
color="#38BDF8" color="hsl(var(--accent))"
unit="%" unit="%"
maxY={100} maxY={100}
/> />

2
frontend/src/components/monitoring/Sparkline.tsx
View File

@@ -7,7 +7,7 @@ interface SparklineProps {
height?: number height?: number
} }
export function Sparkline({ data, color = '#38BDF8', width = 60, height = 24 }: SparklineProps) { export function Sparkline({ data, color = 'hsl(var(--accent))', width = 60, height = 24 }: SparklineProps) {
const chartData = data.map((v, i) => ({ v, i })) const chartData = data.map((v, i) => ({ v, i }))
return ( return (
<LineChart width={width} height={height} data={chartData}> <LineChart width={width} height={height} data={chartData}>

12
frontend/src/components/monitoring/TrafficChart.tsx
View File

@@ -70,25 +70,25 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
<AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}> <AreaChart data={chartData} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
<defs> <defs>
<linearGradient id={`rx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={`rx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#38BDF8" stopOpacity={0.3} /> <stop offset="0%" stopColor="hsl(var(--accent))" stopOpacity={0.3} />
<stop offset="100%" stopColor="#38BDF8" stopOpacity={0} /> <stop offset="100%" stopColor="hsl(var(--accent))" stopOpacity={0} />
</linearGradient> </linearGradient>
<linearGradient id={`tx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1"> <linearGradient id={`tx-grad-${interfaceName}`} x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#4ADE80" stopOpacity={0.3} /> <stop offset="0%" stopColor="#4ADE80" stopOpacity={0.3} />
<stop offset="100%" stopColor="#4ADE80" stopOpacity={0} /> <stop offset="100%" stopColor="#4ADE80" stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
<XAxis <XAxis
dataKey="bucket" dataKey="bucket"
tick={{ fontSize: 10, fill: '#94a3b8' }} tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
interval="preserveStartEnd" interval="preserveStartEnd"
/> />
<YAxis <YAxis
tickFormatter={formatBps} tickFormatter={formatBps}
tick={{ fontSize: 10, fill: '#94a3b8' }} tick={{ fontSize: 10, fill: 'hsl(var(--text-muted))' }}
axisLine={false} axisLine={false}
tickLine={false} tickLine={false}
width={60} width={60}
@@ -98,7 +98,7 @@ export function TrafficChart({ data, interfaceName }: TrafficChartProps) {
type="monotone" type="monotone"
dataKey="avg_rx_bps" dataKey="avg_rx_bps"
name="avg_rx_bps" name="avg_rx_bps"
stroke="#38BDF8" stroke="hsl(var(--accent))"
strokeWidth={1.5} strokeWidth={1.5}
fill={`url(#rx-grad-${interfaceName})`} fill={`url(#rx-grad-${interfaceName})`}
/> />

2
frontend/src/components/monitoring/WirelessTab.tsx
View File

@@ -38,7 +38,7 @@ function ClientCountMiniChart({ data }: { data: WirelessMetricPoint[] }) {
<stop offset="100%" stopColor="#A78BFA" stopOpacity={0} /> <stop offset="100%" stopColor="#A78BFA" stopOpacity={0} />
</linearGradient> </linearGradient>
</defs> </defs>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" /> <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
<XAxis dataKey="bucket" hide /> <XAxis dataKey="bucket" hide />
<Area <Area
type="monotone" type="monotone"