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

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/alerts/AlertsPage.tsx
View File

@@ -308,7 +308,7 @@ export function AlertsPage() {
) : ( ) : (
<div className="rounded-lg border border-border bg-surface overflow-hidden"> <div className="rounded-lg border border-border bg-surface overflow-hidden">
{/* Table header */} {/* Table header */}
<div className="flex items-center gap-3 px-4 py-2 border-b border-border text-xs text-text-muted font-medium"> <div className="flex items-center gap-3 px-4 py-2 border-b border-border text-[10px] uppercase tracking-wider text-text-muted font-semibold">
<span className="w-5" /> <span className="w-5" />
<span className="w-16">Severity</span> <span className="w-16">Severity</span>
<span className="w-16">Status</span> <span className="w-16">Status</span>

12
frontend/src/components/audit/AuditLogTable.tsx
View File

@@ -228,22 +228,22 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
<thead> <thead>
<tr className="border-b border-border bg-elevated/50"> <tr className="border-b border-border bg-elevated/50">
<th scope="col" className="w-8 px-3 py-2"><span className="sr-only">Expand</span></th> <th scope="col" className="w-8 px-3 py-2"><span className="sr-only">Expand</span></th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Timestamp Timestamp
</th> </th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
User User
</th> </th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Action Action
</th> </th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Resource Resource
</th> </th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Device Device
</th> </th>
<th scope="col" className="px-3 py-2 text-left text-xs font-medium text-text-muted"> <th scope="col" className="px-3 py-2 text-left text-[10px] uppercase tracking-wider font-semibold text-text-muted">
IP Address IP Address
</th> </th>
</tr> </tr>

2
frontend/src/components/dashboard/BandwidthChart.tsx
View File

@@ -45,7 +45,7 @@ function BwTooltip({ active, payload }: CustomTooltipProps) {
if (!active || !payload || payload.length === 0) return null if (!active || !payload || payload.length === 0) return null
const item = payload[0] const item = payload[0]
return ( return (
<div className="rounded-md border border-border bg-surface px-3 py-2 shadow-md text-xs"> <div className="rounded-md border border-border bg-surface px-3 py-2 text-xs">
<p className="font-medium text-text-primary">{item.payload.hostname}</p> <p className="font-medium text-text-primary">{item.payload.hostname}</p>
<p className="text-text-secondary">{formatBw(item.value)}</p> <p className="text-text-secondary">{formatBw(item.value)}</p>
</div> </div>

36
frontend/src/components/dashboard/WirelessIssues.tsx
View File

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

14
frontend/src/components/settings/ApiKeysPage.tsx
View File

@@ -170,13 +170,13 @@ export function ApiKeysPage({ tenantId }: ApiKeysPageProps) {
<table className="w-full text-sm"> <table className="w-full text-sm">
<thead> <thead>
<tr className="border-b border-border bg-elevated/30"> <tr className="border-b border-border bg-elevated/30">
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Name</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Name</th>
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Key</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Key</th>
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Scopes</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Scopes</th>
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Last Used</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Last Used</th>
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Expires</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Expires</th>
<th className="text-left px-4 py-2.5 font-medium text-text-secondary">Status</th> <th className="text-left px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Status</th>
<th className="text-right px-4 py-2.5 font-medium text-text-secondary">Actions</th> <th className="text-right px-4 py-2.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

4
frontend/src/components/settings/SettingsPage.tsx
View File

@@ -393,7 +393,7 @@ function SMTPSettingsSection() {
<select <select
value={provider} value={provider}
onChange={(e) => handleProviderChange(e.target.value)} onChange={(e) => handleProviderChange(e.target.value)}
className="w-full rounded-md bg-slate-700 border border-slate-600 text-white px-3 py-2 text-sm mt-1" className="w-full rounded-md bg-elevated border border-border text-text-primary px-3 py-2 text-sm mt-1"
> >
{SMTP_PRESETS.map((p) => ( {SMTP_PRESETS.map((p) => (
<option key={p.id} value={p.id}>{p.label}</option> <option key={p.id} value={p.id}>{p.label}</option>
@@ -455,7 +455,7 @@ function SMTPSettingsSection() {
</div> </div>
{testResult && ( {testResult && (
<p className={`text-sm ${testResult.success ? 'text-green-400' : 'text-red-400'}`}> <p className={`text-sm ${testResult.success ? 'text-success' : 'text-error'}`}>
{testResult.message} {testResult.message}
</p> </p>
)} )}

8
frontend/src/components/templates/TemplateEditor.tsx
View File

@@ -248,10 +248,10 @@ export function TemplateEditor({ template, onSave, onCancel }: TemplateEditorPro
<table className="w-full text-xs"> <table className="w-full text-xs">
<thead> <thead>
<tr className="bg-surface border-b border-border"> <tr className="bg-surface border-b border-border">
<th className="text-left px-3 py-1.5 text-text-secondary font-medium">Name</th> <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Name</th>
<th className="text-left px-3 py-1.5 text-text-secondary font-medium w-28">Type</th> <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted w-28">Type</th>
<th className="text-left px-3 py-1.5 text-text-secondary font-medium">Default</th> <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Default</th>
<th className="text-left px-3 py-1.5 text-text-secondary font-medium">Description</th> <th className="text-left px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-text-muted">Description</th>
<th className="w-8" /> <th className="w-8" />
</tr> </tr>
</thead> </thead>

2
frontend/src/routes/_authenticated/about.tsx
View File

@@ -585,7 +585,7 @@ function AboutPage() {
<span className="flex-shrink-0 text-text-muted"> <span className="flex-shrink-0 text-text-muted">
{copied ? ( {copied ? (
<svg <svg
className="w-4 h-4 text-green-400" className="w-4 h-4 text-success"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"