feat(ui): polish remaining pages with Deep Space tokens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-16 18:40:48 -05:00
parent 1a463cfa84
commit 4924580a4b
8 changed files with 40 additions and 40 deletions

View File

@@ -7,10 +7,10 @@ interface WirelessIssuesProps {
}
function signalColor(signal: number | null): string {
if (signal === null) return 'text-muted-foreground'
if (signal > -60) return 'text-green-400'
if (signal > -70) return 'text-yellow-400'
return 'text-red-400'
if (signal === null) return 'text-text-muted'
if (signal > -60) return 'text-success'
if (signal > -70) return 'text-warning'
return 'text-error'
}
export function WirelessIssues({ tenantId }: WirelessIssuesProps) {
@@ -24,40 +24,40 @@ export function WirelessIssues({ tenantId }: WirelessIssuesProps) {
})
return (
<div className="rounded-xl border border-border bg-card p-5">
<h3 className="text-sm font-semibold text-foreground mb-4 flex items-center gap-2">
<Wifi className="h-4 w-4 text-muted-foreground" />
<div className="rounded-lg border border-border bg-surface p-5">
<h3 className="text-sm font-semibold text-text-primary mb-4 flex items-center gap-2">
<Wifi className="h-4 w-4 text-text-muted" />
APs Needing Attention
</h3>
{isLoading ? (
<div className="text-sm text-muted-foreground">Loading...</div>
<div className="text-sm text-text-muted">Loading...</div>
) : issues.length === 0 ? (
<div className="flex flex-col items-center gap-2 py-6 text-center">
<CheckCircle2 className="h-8 w-8 text-green-400" />
<span className="text-sm font-medium text-green-400">All APs Healthy</span>
<span className="text-xs text-muted-foreground">No wireless issues detected</span>
<CheckCircle2 className="h-8 w-8 text-success" />
<span className="text-sm font-medium text-success">All APs Healthy</span>
<span className="text-xs text-text-muted">No wireless issues detected</span>
</div>
) : (
<div className="space-y-2">
{issues.map((ap, i) => (
<div
key={`${ap.device_id}-${ap.interface}-${i}`}
className="flex items-center justify-between py-2 px-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
className="flex items-center justify-between py-2 px-3 rounded-lg bg-elevated/30 hover:bg-elevated/50 transition-colors"
>
<div className="flex items-center gap-3 min-w-0">
<div className={`h-2 w-2 rounded-full flex-shrink-0 ${
ap.signal !== null && ap.signal < -75 ? 'bg-red-400' :
ap.ccq !== null && ap.ccq < 50 ? 'bg-red-400' :
'bg-yellow-400'
ap.signal !== null && ap.signal < -75 ? 'bg-error' :
ap.ccq !== null && ap.ccq < 50 ? 'bg-error' :
'bg-warning'
}`} />
<div className="min-w-0">
<div className="text-sm font-medium text-foreground truncate">
<div className="text-sm font-medium text-text-primary truncate">
{ap.hostname}
<span className="text-xs text-muted-foreground ml-1">({ap.interface})</span>
<span className="text-xs text-text-muted ml-1">({ap.interface})</span>
</div>
{ap.tenant_name && (
<div className="text-xs text-muted-foreground">{ap.tenant_name}</div>
<div className="text-xs text-text-muted">{ap.tenant_name}</div>
)}
</div>
</div>