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

feat(ui): sweep remaining components for Deep Space consistency

Browse Source 
Replace old design tokens and hardcoded colors across 29 files:
- bg-primary/text-primary-foreground -> bg-accent/text-white
- text-muted-foreground -> text-text-muted
- text-destructive/bg-destructive -> text-error/bg-error
- bg-muted -> bg-elevated (background usage)
- Hardcoded green/red/yellow/emerald/amber/slate -> semantic tokens
- Remove shadow-md/lg from cards, tooltips, topology nodes
- rounded-xl -> rounded-lg on cards/panels
- focus:ring-1 focus:ring-ring -> focus:border-accent on inputs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jason Staack
2026-03-16 19:00:36 -05:00
parent 25d4a80b73
commit c455fe4ed5
29 changed files with 107 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/certificates/BulkDeployDialog.tsx
View File

@@ -168,7 +168,7 @@ export function BulkDeployDialog({
{availableDevices.length === 0 ? (
<div className="rounded-lg border border-border bg-elevated/50 p-4 text-center">
<CheckCircle className="h-6 w-6 text-green-500 mx-auto mb-2" />
<CheckCircle className="h-6 w-6 text-success mx-auto mb-2" />
<p className="text-sm font-medium text-text-primary">
All devices have certificates
</p>
@@ -222,7 +222,7 @@ export function BulkDeployDialog({
className={cn(
'text-[10px] uppercase px-1.5 py-0.5 rounded',
d.status === 'online'
? 'bg-green-500/10 text-green-500'
? 'bg-success/10 text-success'
: 'bg-text-muted/10 text-text-muted',
)}
>
@@ -263,9 +263,9 @@ export function BulkDeployDialog({
<div className="space-y-4">
{/* Summary */}
<div className="grid grid-cols-2 gap-3">
<div className="rounded-lg border border-green-500/30 bg-green-500/5 p-4 text-center">
<CheckCircle className="h-6 w-6 text-green-500 mx-auto mb-1" />
<p className="text-2xl font-bold text-green-500">
<div className="rounded-lg border border-success/30 bg-success/5 p-4 text-center">
<CheckCircle className="h-6 w-6 text-success mx-auto mb-1" />
<p className="text-2xl font-bold text-success">
{result.success}
</p>
<p className="text-xs text-text-muted">Succeeded</p>

14
frontend/src/components/certificates/CAStatusCard.tsx
View File

@@ -76,7 +76,7 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
if (!ca) {
return (
<div className="max-w-lg mx-auto">
<div className="rounded-xl border border-border bg-surface p-8 text-center space-y-6">
<div className="rounded-lg border border-border bg-surface p-8 text-center space-y-6">
<div className="mx-auto w-16 h-16 rounded-2xl bg-accent/10 flex items-center justify-center">
<Shield className="h-8 w-8 text-accent" />
</div>
@@ -118,8 +118,8 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
return (
<div
className={cn(
'rounded-xl border bg-surface p-6 space-y-4',
isExpired ? 'border-error/40' : 'border-green-500/30',
'rounded-lg border bg-surface p-6 space-y-4',
isExpired ? 'border-error/40' : 'border-success/30',
)}
>
<div className="flex items-center justify-between">
@@ -127,13 +127,13 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
<div
className={cn(
'w-10 h-10 rounded-xl flex items-center justify-center',
isExpired ? 'bg-error/10' : 'bg-green-500/10',
isExpired ? 'bg-error/10' : 'bg-success/10',
)}
>
<ShieldCheck
className={cn(
'h-5 w-5',
isExpired ? 'text-error' : 'text-green-500',
isExpired ? 'text-error' : 'text-success',
)}
/>
</div>
@@ -146,7 +146,7 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
'inline-flex items-center gap-1 text-[10px] font-medium uppercase px-1.5 py-0.5 rounded border mt-0.5',
isExpired
? 'bg-error/20 text-error border-error/40'
: 'bg-green-500/20 text-green-500 border-green-500/40',
: 'bg-success/20 text-success border-success/40',
)}
>
{isExpired ? 'Expired' : 'Active'}
@@ -175,7 +175,7 @@ export function CAStatusCard({ ca, canWrite: writable, tenantId }: CAStatusCardP
title="Copy fingerprint"
>
{copied ? (
<CheckCircle className="h-3.5 w-3.5 text-green-500" />
<CheckCircle className="h-3.5 w-3.5 text-success" />
) : (
<Copy className="h-3.5 w-3.5" />
)}

4
frontend/src/components/certificates/DeployCertDialog.tsx
View File

@@ -148,7 +148,7 @@ export function DeployCertDialog({
{availableDevices.length === 0 ? (
<div className="rounded-lg border border-border bg-elevated/50 p-4 text-center">
<CheckCircle className="h-6 w-6 text-green-500 mx-auto mb-2" />
<CheckCircle className="h-6 w-6 text-success mx-auto mb-2" />
<p className="text-sm font-medium text-text-primary">
All devices have certificates
</p>
@@ -231,7 +231,7 @@ export function DeployCertDialog({
{step === 'done' && (
<div className="py-8 text-center space-y-3">
<CheckCircle className="h-8 w-8 text-green-500 mx-auto" />
<CheckCircle className="h-8 w-8 text-success mx-auto" />
<p className="text-sm font-medium text-text-primary">
Certificate deployed successfully
</p>

6
frontend/src/components/certificates/DeviceCertTable.tsx
View File

@@ -54,11 +54,11 @@ const STATUS_CONFIG: Record<
},
deployed: {
label: 'Deployed',
className: 'bg-green-500/20 text-green-500 border-green-500/40',
className: 'bg-success/20 text-success border-success/40',
},
expiring: {
label: 'Expiring Soon',
className: 'bg-yellow-500/20 text-yellow-500 border-yellow-500/40',
className: 'bg-warning/20 text-warning border-warning/40',
},
expired: {
label: 'Expired',
@@ -236,7 +236,7 @@ export function DeviceCertTable({
{/* Empty state */}
{filteredCerts.length === 0 ? (
<div className="rounded-xl border border-dashed border-accent/30 bg-accent/5 p-8 text-center space-y-3">
<div className="rounded-lg border border-dashed border-accent/30 bg-accent/5 p-8 text-center space-y-3">
<ShieldCheck className="h-10 w-10 text-accent mx-auto" />
<h3 className="text-base font-semibold text-text-primary">
No device certificates yet