diff --git a/dashboard-frontend/src/components/Layout.tsx b/dashboard-frontend/src/components/Layout.tsx index 759751b..b0fab9c 100644 --- a/dashboard-frontend/src/components/Layout.tsx +++ b/dashboard-frontend/src/components/Layout.tsx @@ -89,18 +89,16 @@ export default function Layout({ children }: LayoutProps) { }) return ( -
+
{/* Sidebar */} @@ -157,7 +155,7 @@ export default function Layout({ children }: LayoutProps) {
{/* Header */}
-

+

{getPageTitle(location.pathname)}

@@ -165,15 +163,15 @@ export default function Layout({ children }: LayoutProps) {
- + {connected ? 'Live' : 'Offline'}
{/* Clock */} -
+
{timeStr} MT
diff --git a/dashboard-frontend/src/index.css b/dashboard-frontend/src/index.css index de14eea..d4f2258 100644 --- a/dashboard-frontend/src/index.css +++ b/dashboard-frontend/src/index.css @@ -6,46 +6,30 @@ @tailwind utilities; body { - background: #0a0e17; + background: #111111; margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -/* Custom scrollbar — sharp, no radius */ +/* Custom scrollbar — sharp */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { - background: #0a0e17; + background: #111111; } ::-webkit-scrollbar-thumb { - background: #2d3a4d; + background: #1e1e1e; border-radius: 0; } ::-webkit-scrollbar-thumb:hover { - background: #3b4a5d; -} - -/* Scanline texture on cards */ -.bg-bg-card { - background-image: repeating-linear-gradient( - 0deg, - transparent, - transparent 2px, - rgba(255,255,255,0.008) 2px, - rgba(255,255,255,0.008) 3px - ); -} - -/* Amber glow utility */ -.amber-glow { - box-shadow: 0 0 12px rgba(245,158,11,0.25); + background: #2a2a2a; } /* Data values use JetBrains Mono */ diff --git a/dashboard-frontend/src/pages/Dashboard.tsx b/dashboard-frontend/src/pages/Dashboard.tsx index 7dfd28b..1b84857 100644 --- a/dashboard-frontend/src/pages/Dashboard.tsx +++ b/dashboard-frontend/src/pages/Dashboard.tsx @@ -46,7 +46,7 @@ function HealthGauge({ health }: { health: MeshHealth }) { return (
- + {score.toFixed(1)} - + {tier} @@ -66,18 +66,18 @@ function HealthGauge({ health }: { health: MeshHealth }) { function PillarBar({ label, value }: { label: string; value: number }) { const getColor = (v: number) => { - if (v > 66) return 'bg-amber' - if (v > 33) return 'bg-amber-dim' - return 'bg-danger' + if (v > 66) return 'bg-accent' + if (v > 33) return 'bg-accent-dim' + return 'bg-red-500' } return (
-
{label}
+
{label}
-
{value.toFixed(1)}
+
{value.toFixed(1)}
) } @@ -88,13 +88,13 @@ function AlertItem({ alert }: { alert: Alert }) { case 'critical': case 'emergency': case 'immediate': - return { bg: 'bg-danger-muted', border: 'border-danger', icon: AlertCircle, iconColor: 'text-danger' } + return { bg: 'bg-red-500/5', border: 'border-red-500', icon: AlertCircle, iconColor: 'text-red-500' } case 'warning': case 'priority': - return { bg: 'bg-amber-muted', border: 'border-amber', icon: AlertTriangle, iconColor: 'text-amber' } + return { bg: 'bg-accent/5', border: 'border-accent', icon: AlertTriangle, iconColor: 'text-accent' } case 'routine': default: - return { bg: 'bg-blue-muted', border: 'border-blue', icon: Info, iconColor: 'text-blue' } + return { bg: 'bg-[#161616]', border: 'border-[#333]', icon: Info, iconColor: 'text-[#444]' } } } @@ -105,8 +105,8 @@ function AlertItem({ alert }: { alert: Alert }) {
-
{alert.message}
-
{alert.timestamp || 'Just now'}
+
{alert.message}
+
{alert.timestamp || 'Just now'}
) @@ -114,31 +114,34 @@ function AlertItem({ alert }: { alert: Alert }) { function SourceCard({ source }: { source: SourceHealth }) { const getStatusColor = () => { - if (!source.is_loaded) return 'bg-danger' - if (source.last_error) return 'bg-amber' - return 'bg-blue' + if (!source.is_loaded) return 'bg-red-500' + if (source.last_error) return 'bg-accent' + return 'bg-green-500' } return (
-
{source.name}
-
{source.node_count} nodes · {source.type}
+
{source.name}
+
{source.node_count} nodes · {source.type}
) } -function StatCard({ icon: Icon, label, value, subvalue, valueClass, subvalueClass }: { icon: typeof Radio; label: string; value: string | number; subvalue?: string; valueClass?: string; subvalueClass?: string }) { +function StatCard({ icon: Icon, label, value, subvalue, accent }: { icon: typeof Radio; label: string; value: string | number; subvalue?: string; accent?: string }) { return ( -
-
- - {label} +
+
+ + {label}
-
{value}
- {subvalue &&
{subvalue}
} +
{value}
+ {subvalue &&
{subvalue}
}
) } @@ -151,19 +154,19 @@ function StatCard({ icon: Icon, label, value, subvalue, valueClass, subvalueClas function BandConditionsCard({ bandConditions }: { bandConditions: BandConditionsStatus | null }) { const getRatingColor = (rating?: string) => { switch (rating) { - case 'Good': return 'bg-blue' - case 'Fair': return 'bg-amber-dim' - case 'Poor': return 'bg-danger' - default: return 'bg-slate-600' + case 'Good': return 'bg-green-500' + case 'Fair': return 'bg-accent' + case 'Poor': return 'bg-red-500' + default: return 'bg-[#333]' } } const getRatingTextColor = (rating?: string) => { switch (rating) { - case 'Good': return 'text-blue' - case 'Fair': return 'text-amber-dim' - case 'Poor': return 'text-danger' - default: return 'text-slate-500' + case 'Good': return 'text-green-500' + case 'Fair': return 'text-accent' + case 'Poor': return 'text-red-500' + default: return 'text-[#333]' } } @@ -175,13 +178,13 @@ function BandConditionsCard({ bandConditions }: { bandConditions: BandConditions if (!bandConditions?.enabled || !bandConditions?.ratings) { return (
-

+

RF Propagation

-
No band conditions data
+
No band conditions data
@@ -192,7 +195,7 @@ function BandConditionsCard({ bandConditions }: { bandConditions: BandConditions return (
-

+

RF Propagation

@@ -200,12 +203,12 @@ function BandConditionsCard({ bandConditions }: { bandConditions: BandConditions {/* Slot label */}
{getSlotEmoji(bandConditions.slot_label)} - {bandConditions.slot_label} + {bandConditions.slot_label}
{/* Band conditions header */} -
- 📡 Band Conditions: +
+ 📡 Band Conditions
{/* Band rows */} @@ -214,7 +217,7 @@ function BandConditionsCard({ bandConditions }: { bandConditions: BandConditions const rating = bandConditions.ratings?.[band] return (
- {band} + {band} {rating || '—'} @@ -225,7 +228,7 @@ function BandConditionsCard({ bandConditions }: { bandConditions: BandConditions
{/* Footer: source and time */} -
+
{bandConditions.source && ( {bandConditions.source === 'swpc_local' ? 'SWPC' : 'HamQSL'} )} @@ -303,16 +306,16 @@ function HepburnTropoCard() { return (
-

+

Tropo Forecast (Hepburn)

- {saving && saving...} + {saving && saving...}