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} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
<CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border-default))" />
<XAxis
dataKey="bucket"
tick={{ fontSize: 9, fill: '#94a3b8' }}
tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
axisLine={false}
tickLine={false}
interval="preserveStartEnd"
@@ -75,7 +75,7 @@ export function HealthChart({ data, metric, label, color, unit, maxY }: HealthCh
<YAxis
domain={domain}
tickFormatter={(v: number) => `${v}${unit}`}
tick={{ fontSize: 9, fill: '#94a3b8' }}
tick={{ fontSize: 9, fill: 'hsl(var(--text-muted))' }}
axisLine={false}
tickLine={false}
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}
metric="avg_cpu"
label="CPU Load"
color="#38BDF8"
color="hsl(var(--accent))"
unit="%"
maxY={100}
/>

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

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