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

refactor(ui): migrate all components to Warm Precision token names

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-21 11:49:37 -05:00
parent f7108ba357
commit b39014ef47
118 changed files with 322 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/network/ClientsTab.tsx
View File

@@ -246,7 +246,7 @@ export function ClientsTab({ tenantId, deviceId, active }: ClientsTabProps) {
<div className="overflow-x-auto rounded-lg border border-border">
<table className="w-full text-sm">
<thead>
<tr className="bg-surface text-text-secondary text-left">
<tr className="bg-panel text-text-secondary text-left">
{/* Expand chevron column */}
<th className="w-8 px-3 py-2.5" />

6
frontend/src/components/network/InterfaceGauges.tsx
View File

@@ -103,7 +103,7 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
return (
<div className="space-y-3">
{[0, 1, 2].map((i) => (
<div key={i} className="rounded-lg border border-border bg-surface p-3">
<div key={i} className="rounded-lg border border-border bg-panel p-3">
<Skeleton className="h-4 w-24 mb-2" />
<Skeleton className="h-3 w-full mb-1" />
<Skeleton className="h-3 w-full" />
@@ -115,7 +115,7 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
if (!interfaces || interfaces.length === 0) {
return (
<div className="rounded-lg border border-border bg-surface p-6 text-center text-sm text-text-muted">
<div className="rounded-lg border border-border bg-panel p-6 text-center text-sm text-text-muted">
No interface data available.
</div>
)
@@ -149,7 +149,7 @@ export function InterfaceGauges({ tenantId, deviceId, active }: InterfaceGaugesP
const values = latestByIface.get(ifaceName) ?? { rx: 0, tx: 0 }
return (
<div key={ifaceName} className="rounded-lg border border-border bg-surface p-3">
<div key={ifaceName} className="rounded-lg border border-border bg-panel p-3">
<div className="flex items-center justify-between mb-1.5">
<span className="text-sm font-medium text-text-primary">{ifaceName}</span>
<span className="text-[10px] text-text-muted">

2
frontend/src/components/network/LogsTab.tsx
View File

@@ -187,7 +187,7 @@ export function LogsTab({ tenantId, deviceId, active }: LogsTabProps) {
</div>
{/* Log table */}
<div className="rounded-lg border border-border bg-surface overflow-hidden">
<div className="rounded-lg border border-border bg-panel overflow-hidden">
{isLoading ? (
<TableSkeleton />
) : error ? (

8
frontend/src/components/network/TopologyMap.tsx
View File

@@ -99,7 +99,7 @@ function DeviceNode({ data }: NodeProps<DeviceNodeData>) {
return (
<div
className={cn(
'rounded-lg border bg-surface px-3 py-2 min-w-[180px]',
'rounded-lg border bg-panel px-3 py-2 min-w-[180px]',
'transition-colors',
isOnline ? 'border-border' : 'border-error/30',
)}
@@ -339,7 +339,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
>
<Background color="hsl(var(--muted))" gap={20} size={1} />
<Controls
className="!bg-surface !border-border [&>button]:!bg-surface [&>button]:!border-border [&>button]:!text-text-secondary [&>button:hover]:!bg-elevated"
className="!bg-panel !border-border [&>button]:!bg-panel [&>button]:!border-border [&>button]:!text-text-secondary [&>button:hover]:!bg-elevated"
/>
<MiniMap
nodeColor={(node) => {
@@ -349,7 +349,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
: 'hsl(var(--error))'
}}
maskColor="hsl(var(--background) / 0.7)"
className="!bg-surface !border-border"
className="!bg-panel !border-border"
/>
</ReactFlow>
@@ -357,7 +357,7 @@ export function TopologyMap({ tenantId }: TopologyMapProps) {
{tooltip && <NodeTooltip data={tooltip} onClose={() => setTooltip(null)} />}
{/* Legend */}
<div className="absolute bottom-4 left-4 rounded-lg border border-border bg-surface/90 backdrop-blur-sm px-3 py-2 text-xs text-text-muted">
<div className="absolute bottom-4 left-4 rounded-lg border border-border bg-panel/90 backdrop-blur-sm px-3 py-2 text-xs text-text-muted">
<div className="flex items-center gap-4">
<span className="flex items-center gap-1.5">
<span className="h-2 w-2 rounded-full bg-success" /> Online

6
frontend/src/components/network/VpnTab.tsx
View File

@@ -112,7 +112,7 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
if (error) {
return (
<div className="mt-4 rounded-lg border border-border bg-surface p-6 text-center text-sm text-error">
<div className="mt-4 rounded-lg border border-border bg-panel p-6 text-center text-sm text-error">
Failed to load VPN tunnels. The device may not support this feature.
</div>
)
@@ -120,7 +120,7 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
if (!data || data.tunnels.length === 0) {
return (
<div className="mt-4 rounded-lg border border-border bg-surface p-8 text-center">
<div className="mt-4 rounded-lg border border-border bg-panel p-8 text-center">
<Shield className="w-10 h-10 mx-auto mb-3 text-text-muted opacity-40" />
<p className="text-sm font-medium text-text-primary mb-1">
No active VPN tunnels
@@ -134,7 +134,7 @@ export function VpnTab({ tenantId, deviceId, active }: VpnTabProps) {
}
return (
<div className="mt-4 rounded-lg border border-border bg-surface overflow-hidden">
<div className="mt-4 rounded-lg border border-border bg-panel overflow-hidden">
<table className="w-full text-left">
<thead>
<tr className="border-b border-border bg-elevated/50">