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

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

@@ -514,14 +514,14 @@ function AboutPage() {
<p className="text-text-secondary">
MSP fleet management platform for RouterOS devices
</p>
<span className="inline-block px-3 py-1 text-xs font-mono font-medium text-accent bg-accent-muted rounded-full">
<span className="inline-block px-3 py-1 text-xs font-mono font-medium text-accent bg-accent-soft rounded-full">
{APP_VERSION}
</span>
</div>
{/* License */}
{license && (
<div className="rounded-lg border border-border bg-surface p-5 space-y-2">
<div className="rounded-lg border border-border bg-panel p-5 space-y-2">
<h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
License
</h2>
@@ -542,7 +542,7 @@ function AboutPage() {
)}
{/* Features summary */}
<div className="rounded-lg border border-border bg-surface p-5 space-y-3">
<div className="rounded-lg border border-border bg-panel p-5 space-y-3">
<h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
Platform
</h2>
@@ -575,7 +575,7 @@ function AboutPage() {
</div>
{/* Support Development */}
<div className="rounded-lg border border-border bg-surface p-5 space-y-4">
<div className="rounded-lg border border-border bg-panel p-5 space-y-4">
<h2 className="text-sm font-semibold text-text-primary uppercase tracking-wider">
Support Development
</h2>

4
frontend/src/routes/_authenticated/audit.tsx
View File

@@ -31,7 +31,7 @@ function AuditPage() {
<ClipboardList className="h-5 w-5 text-text-muted" />
Audit Trail
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need at least operator permissions to view the audit trail.
</p>
@@ -52,7 +52,7 @@ function AuditPage() {
{tenantId ? (
<AuditLogTable tenantId={tenantId} />
) : (
<div className="rounded-lg border border-border bg-surface p-12 text-center">
<div className="rounded-lg border border-border bg-panel p-12 text-center">
<Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
<p className="text-sm text-text-muted">
Select an organization from the header to view audit logs.

4
frontend/src/routes/_authenticated/batch-config.tsx
View File

@@ -30,7 +30,7 @@ function BatchConfigPage() {
<Wrench className="h-5 w-5 text-text-muted" />
Batch Configuration
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need at least operator permissions to use batch configuration.
</p>
@@ -58,7 +58,7 @@ function BatchConfigPage() {
{tenantId ? (
<BatchConfigPanel tenantId={tenantId} />
) : (
<div className="rounded-lg border border-border bg-surface p-8 text-center space-y-2">
<div className="rounded-lg border border-border bg-panel p-8 text-center space-y-2">
<Building2 className="h-6 w-6 mx-auto text-text-muted" />
<p className="text-sm text-text-muted">
Select an organization from the header to get started.

2
frontend/src/routes/_authenticated/bulk-commands.tsx
View File

@@ -31,7 +31,7 @@ function BulkCommandsPage() {
<Terminal className="h-5 w-5 text-text-muted" />
Bulk Commands
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need at least operator permissions to use bulk commands.
</p>

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

@@ -32,7 +32,7 @@ function MaintenancePage() {
<Calendar className="h-5 w-5 text-text-muted" />
Maintenance Windows
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need at least operator permissions to manage maintenance windows.
</p>

4
frontend/src/routes/_authenticated/reports.tsx
View File

@@ -33,7 +33,7 @@ function ReportsPageRoute() {
<FileText className="h-5 w-5 text-text-muted" />
Reports
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need at least operator permissions to generate reports.
</p>
@@ -61,7 +61,7 @@ function ReportsPageRoute() {
{tenantId ? (
<ReportsPage tenantId={tenantId} />
) : (
<div className="rounded-lg border border-border bg-surface p-12 text-center">
<div className="rounded-lg border border-border bg-panel p-12 text-center">
<Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
<p className="text-sm text-text-muted">
Select an organization from the header to view reports.

4
frontend/src/routes/_authenticated/settings.api-keys.tsx
View File

@@ -18,7 +18,7 @@ function ApiKeysRoute() {
if (!isTenantAdmin(user)) {
return (
<div className="space-y-6 max-w-2xl">
<div className="rounded-lg border border-border bg-surface px-6 py-12 text-center">
<div className="rounded-lg border border-border bg-panel px-6 py-12 text-center">
<ShieldAlert className="h-10 w-10 text-text-muted mx-auto mb-3" />
<h2 className="text-sm font-medium mb-1">Access Denied</h2>
<p className="text-sm text-text-muted">
@@ -32,7 +32,7 @@ function ApiKeysRoute() {
return (
<div className="space-y-4 max-w-4xl">
{!tenantId ? (
<div className="rounded-lg border border-border bg-surface p-8 text-center space-y-2">
<div className="rounded-lg border border-border bg-panel p-8 text-center space-y-2">
<Building2 className="h-6 w-6 mx-auto text-text-muted" />
<p className="text-sm text-text-muted">
Select an organization from the header to manage API keys.

18
frontend/src/routes/_authenticated/tenants/$tenantId/devices/$deviceId.tsx
View File

@@ -542,7 +542,7 @@ function DeviceDetailPage() {
overviewContent={
<>
{/* Device info */}
<div className="rounded-lg border border-border bg-surface px-4 py-2">
<div className="rounded-lg border border-border bg-panel px-4 py-2">
<InfoRow label="Model" value={device.model} />
<InfoRow label="RouterOS" value={device.routeros_version} />
<InfoRow label="Firmware" value={device.firmware_version || 'N/A'} />
@@ -595,7 +595,7 @@ function DeviceDetailPage() {
</div>
{/* Credentials (masked) */}
<div className="rounded-lg border border-border bg-surface px-4 py-3">
<div className="rounded-lg border border-border bg-panel px-4 py-3">
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium text-text-secondary">Credentials</h3>
<Button
@@ -632,7 +632,7 @@ function DeviceDetailPage() {
</div>
{/* Groups */}
<div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
<div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
<div className="flex items-center gap-2">
<FolderOpen className="h-4 w-4 text-text-muted" />
<h3 className="text-sm font-medium text-text-secondary">Groups</h3>
@@ -641,7 +641,7 @@ function DeviceDetailPage() {
{device.groups.map((group) => (
<div
key={group.id}
className="flex items-center gap-1 text-xs border border-border-bright rounded px-2 py-1"
className="flex items-center gap-1 text-xs border border-border-default rounded px-2 py-1"
>
{group.name}
{canWrite(user) && (
@@ -678,7 +678,7 @@ function DeviceDetailPage() {
</div>
{/* Tags */}
<div className="rounded-lg border border-border bg-surface px-4 py-3 space-y-3">
<div className="rounded-lg border border-border bg-panel px-4 py-3 space-y-3">
<div className="flex items-center gap-2">
<Tag className="h-4 w-4 text-text-muted" />
<h3 className="text-sm font-medium text-text-secondary">Tags</h3>
@@ -721,7 +721,7 @@ function DeviceDetailPage() {
</div>
{/* Interface Utilization */}
<div className="rounded-lg border border-border bg-surface p-4">
<div className="rounded-lg border border-border bg-panel p-4">
<h3 className="text-sm font-medium text-text-muted mb-3">Interface Utilization</h3>
<InterfaceGauges tenantId={tenantId} deviceId={deviceId} active={activeTab === 'overview'} />
</div>
@@ -842,12 +842,12 @@ function DeviceAlertsSection({
</h3>
{firingAlerts.length === 0 ? (
<div className="rounded-lg border border-border bg-surface p-6 text-center">
<div className="rounded-lg border border-border bg-panel p-6 text-center">
<CheckCircle className="h-6 w-6 text-success/50 mx-auto mb-1" />
<p className="text-xs text-text-muted">No active alerts for this device.</p>
</div>
) : (
<div className="rounded-lg border border-border bg-surface overflow-hidden">
<div className="rounded-lg border border-border bg-panel overflow-hidden">
{firingAlerts.map((alert) => {
const isSilenced =
alert.silenced_until && new Date(alert.silenced_until) > new Date()
@@ -940,7 +940,7 @@ function DeviceAlertsSection({
</button>
{showResolved && (
<div className="rounded-lg border border-border bg-surface overflow-hidden">
<div className="rounded-lg border border-border bg-panel overflow-hidden">
{resolvedAlerts.map((alert) => (
<div
key={alert.id}

6
frontend/src/routes/_authenticated/tenants/$tenantId/index.tsx
View File

@@ -49,7 +49,7 @@ function TenantDetailPage() {
<Link
to="/tenants/$tenantId/users"
params={{ tenantId }}
className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
>
<Users className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
<div>
@@ -61,7 +61,7 @@ function TenantDetailPage() {
<Link
to="/tenants/$tenantId/sites"
params={{ tenantId }}
className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
>
<MapPin className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
<div>
@@ -73,7 +73,7 @@ function TenantDetailPage() {
<Link
to="/tenants/$tenantId/devices"
params={{ tenantId }}
className="flex items-center gap-3 rounded-lg border border-border bg-surface p-4 hover:bg-elevated/50 transition-colors group"
className="flex items-center gap-3 rounded-lg border border-border bg-panel p-4 hover:bg-elevated/50 transition-colors group"
>
<Monitor className="h-8 w-8 text-text-muted group-hover:text-text-muted transition-colors" />
<div>

10
frontend/src/routes/_authenticated/tenants/$tenantId/sites/$siteId.tsx
View File

@@ -49,7 +49,7 @@ function SiteDetailPage() {
</div>
{/* Site info card */}
<div className="rounded-lg border border-border bg-surface p-6 space-y-4">
<div className="rounded-lg border border-border bg-panel p-6 space-y-4">
<div className="flex items-center gap-3">
<MapPin className="h-6 w-6 text-text-muted" />
<h1 className="text-xl font-semibold">{site.name}</h1>
@@ -87,15 +87,15 @@ function SiteDetailPage() {
{/* Health stats summary */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="rounded-lg border border-border bg-surface p-4 text-center">
<div className="rounded-lg border border-border bg-panel p-4 text-center">
<p className="text-2xl font-semibold">{site.device_count}</p>
<p className="text-xs text-text-muted">Devices</p>
</div>
<div className="rounded-lg border border-border bg-surface p-4 text-center">
<div className="rounded-lg border border-border bg-panel p-4 text-center">
<p className="text-2xl font-semibold">{site.online_count}</p>
<p className="text-xs text-text-muted">Online</p>
</div>
<div className="rounded-lg border border-border bg-surface p-4 text-center">
<div className="rounded-lg border border-border bg-panel p-4 text-center">
<p
className={cn(
'text-2xl font-semibold',
@@ -110,7 +110,7 @@ function SiteDetailPage() {
</p>
<p className="text-xs text-text-muted">Online %</p>
</div>
<div className="rounded-lg border border-border bg-surface p-4 text-center">
<div className="rounded-lg border border-border bg-panel p-4 text-center">
<p className={cn('text-2xl font-semibold', site.alert_count > 0 && 'text-red-500')}>
{site.alert_count}
</p>

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

@@ -42,7 +42,7 @@ function TopologyPage() {
</div>
{/* Topology map (full remaining height) */}
<div className="flex-1 min-h-0 mx-4 mb-4 rounded-lg border border-border bg-surface overflow-hidden">
<div className="flex-1 min-h-0 mx-4 mb-4 rounded-lg border border-border bg-panel overflow-hidden">
{tenantId ? (
<TopologyMap tenantId={tenantId} />
) : (

14
frontend/src/routes/_authenticated/traffic.tsx
View File

@@ -84,7 +84,7 @@ function TrafficPage() {
{/* KPI Cards */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Fleet Avg CPU
@@ -100,7 +100,7 @@ function TrafficPage() {
</CardContent>
</Card>
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Fleet Avg Memory
@@ -116,7 +116,7 @@ function TrafficPage() {
</CardContent>
</Card>
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Devices Online
@@ -130,13 +130,13 @@ function TrafficPage() {
{/* Top Resource Consumers */}
{isLoading ? (
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-6">
<p className="text-sm text-text-muted">Loading fleet data...</p>
</CardContent>
</Card>
) : devices.length === 0 ? (
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="flex flex-col items-center justify-center gap-3 p-12">
<Inbox className="h-10 w-10 text-text-muted" />
<p className="text-sm font-medium text-text-secondary">
@@ -149,7 +149,7 @@ function TrafficPage() {
<h2 className="text-sm font-semibold text-text-primary">
Top Resource Consumers
</h2>
<Card className="border-border bg-surface overflow-hidden">
<Card className="border-border bg-panel overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
@@ -180,7 +180,7 @@ function TrafficPage() {
{top10.map((device) => (
<tr
key={device.id}
className="border-b border-border/50 hover:bg-surface-hover transition-colors"
className="border-b border-border/50 hover:bg-panel-hover transition-colors"
>
<td className="px-4 py-3 text-sm text-text-secondary">
{tenantId ? (

4
frontend/src/routes/_authenticated/transparency.tsx
View File

@@ -35,7 +35,7 @@ function TransparencyPage() {
<Eye className="h-5 w-5 text-text-muted" />
Data Transparency
</h1>
<div className="rounded-lg border border-border bg-surface p-8 text-center">
<div className="rounded-lg border border-border bg-panel p-8 text-center">
<p className="text-sm text-text-muted">
You need admin permissions to view the transparency dashboard.
</p>
@@ -61,7 +61,7 @@ function TransparencyPage() {
{tenantId ? (
<TransparencyLogTable tenantId={tenantId} />
) : (
<div className="rounded-lg border border-border bg-surface p-12 text-center">
<div className="rounded-lg border border-border bg-panel p-12 text-center">
<Building2 className="h-8 w-8 text-text-muted mx-auto mb-3" />
<p className="text-sm text-text-muted">
Select an organization from the header to view transparency logs.

14
frontend/src/routes/_authenticated/wireless.tsx
View File

@@ -57,7 +57,7 @@ function WirelessPage() {
{/* KPI Cards */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
APs with Issues
@@ -68,7 +68,7 @@ function WirelessPage() {
</CardContent>
</Card>
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Worst Signal
@@ -84,7 +84,7 @@ function WirelessPage() {
</CardContent>
</Card>
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-4">
<p className="text-[10px] uppercase tracking-wider font-semibold text-text-muted">
Total Clients
@@ -98,13 +98,13 @@ function WirelessPage() {
{/* Issues Table or All Clear */}
{isLoading ? (
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="p-6">
<p className="text-sm text-text-muted">Loading wireless data...</p>
</CardContent>
</Card>
) : issues.length === 0 ? (
<Card className="border-border bg-surface">
<Card className="border-border bg-panel">
<CardContent className="flex flex-col items-center justify-center gap-3 p-12">
<CheckCircle2 className="h-10 w-10 text-success" />
<p className="text-sm font-medium text-text-secondary">
@@ -113,7 +113,7 @@ function WirelessPage() {
</CardContent>
</Card>
) : (
<Card className="border-border bg-surface overflow-hidden">
<Card className="border-border bg-panel overflow-hidden">
<div className="overflow-x-auto">
<table className="w-full text-left">
<thead>
@@ -150,7 +150,7 @@ function WirelessPage() {
{issues.map((issue, idx) => (
<tr
key={`${issue.device_id}-${issue.interface}-${idx}`}
className="border-b border-border/50 hover:bg-surface-hover transition-colors"
className="border-b border-border/50 hover:bg-panel-hover transition-colors"
>
<td className="px-4 py-3 text-sm text-text-secondary">
<div className="flex items-center gap-2">

2
frontend/src/routes/forgot-password.tsx
View File

@@ -46,7 +46,7 @@ function ForgotPasswordPage() {
</p>
</div>
<div className="rounded-lg border border-border bg-surface/50 p-6">
<div className="rounded-lg border border-border bg-panel/50 p-6">
{sent ? (
<div className="space-y-4">
<div className="rounded-md bg-success/10 border border-success/30 px-3 py-3">

2
frontend/src/routes/login.tsx
View File

@@ -125,7 +125,7 @@ function LoginPage() {
</div>
{/* Login card */}
<div className="rounded-lg border border-border bg-surface p-6">
<div className="rounded-lg border border-border bg-panel p-6">
<form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
<div className="space-y-1.5">
<Label htmlFor="email">Email</Label>

4
frontend/src/routes/reset-password.tsx
View File

@@ -46,7 +46,7 @@ function ResetPasswordPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-background">
<div className="w-full max-w-sm text-center">
<div className="rounded-lg border border-border bg-surface/50 p-6 space-y-4">
<div className="rounded-lg border border-border bg-panel/50 p-6 space-y-4">
<p className="text-sm text-error">Invalid reset link. No token provided.</p>
<Link to="/login" className="block text-sm text-accent hover:underline">
Back to Sign In
@@ -69,7 +69,7 @@ function ResetPasswordPage() {
<p className="text-xs text-text-muted mt-1">Choose a strong password</p>
</div>
<div className="rounded-lg border border-border bg-surface/50 p-6">
<div className="rounded-lg border border-border bg-panel/50 p-6">
{success ? (
<div className="space-y-4">
<div className="rounded-md bg-success/10 border border-success/30 px-3 py-3">