fix: Carbon sweep — GaugeSites, TownAnchors, Notifications, Alerts — teal/cyan/blue → amber

This commit is contained in:
Matt Johnson (via Claude) 2026-06-10 19:42:39 +00:00
commit f65d1d2f59
7 changed files with 48 additions and 48 deletions

View file

@ -76,10 +76,10 @@ function getSeverityStyles(severity: string) {
case 'routine': case 'routine':
default: default:
return { return {
bg: 'bg-sky-400/10', bg: 'bg-[#f59e0b]/10',
border: 'border-sky-400', border: 'border-[#f59e0b]',
badge: 'bg-sky-400/20 text-sky-400', badge: 'bg-[#f59e0b]/20 text-[#f59e0b]',
iconColor: 'text-sky-400', iconColor: 'text-[#f59e0b]',
} }
} }
} }
@ -207,7 +207,7 @@ function AlertHistoryTable({
<select <select
value={typeFilter} value={typeFilter}
onChange={(e) => onTypeFilterChange(e.target.value)} onChange={(e) => onTypeFilterChange(e.target.value)}
className="bg-bg border border-border rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-sky-400" className="bg-bg border border-border rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-[#f59e0b]"
> >
{alertTypes.map((t) => ( {alertTypes.map((t) => (
<option key={t} value={t}> <option key={t} value={t}>
@ -218,7 +218,7 @@ function AlertHistoryTable({
<select <select
value={severityFilter} value={severityFilter}
onChange={(e) => onSeverityFilterChange(e.target.value)} onChange={(e) => onSeverityFilterChange(e.target.value)}
className="bg-bg border border-border rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-sky-400" className="bg-bg border border-border rounded px-3 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-[#f59e0b]"
> >
{severities.map((s) => ( {severities.map((s) => (
<option key={s} value={s}> <option key={s} value={s}>
@ -354,8 +354,8 @@ function SubscriptionCard({ subscription, nodes }: { subscription: Subscription;
return ( return (
<div className="p-4 bg-bg-hover border border-border"> <div className="p-4 bg-bg-hover border border-border">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-10 h-10 bg-sky-400/10 flex items-center justify-center"> <div className="w-10 h-10 bg-[#f59e0b]/10 flex items-center justify-center">
<Icon size={18} className="text-sky-400" /> <Icon size={18} className="text-[#f59e0b]" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-sm text-slate-200 font-medium"> <div className="text-sm text-slate-200 font-medium">
@ -553,7 +553,7 @@ export default function Alerts() {
<div className="text-slate-500 py-4"> <div className="text-slate-500 py-4">
<p>No active subscriptions.</p> <p>No active subscriptions.</p>
<p className="text-xs mt-2"> <p className="text-xs mt-2">
Manage subscriptions via <code className="text-sky-400">!subscribe</code> on mesh. Broadcasts arrive with one of three prefixes <strong>New:</strong> (first sight), <strong>Update:</strong> (material change), or <strong>Active:</strong> (clock-driven reminder while the event is still live). See <a href="/reference#broadcast-types" className="text-sky-400 hover:underline">Broadcast Types</a> and <a href="/reference#reminders" className="text-sky-400 hover:underline">Reminder System</a> in Reference. Manage subscriptions via <code className="text-[#f59e0b]">!subscribe</code> on mesh. Broadcasts arrive with one of three prefixes <strong>New:</strong> (first sight), <strong>Update:</strong> (material change), or <strong>Active:</strong> (clock-driven reminder while the event is still live). See <a href="/reference#broadcast-types" className="text-[#f59e0b] hover:underline">Broadcast Types</a> and <a href="/reference#reminders" className="text-[#f59e0b] hover:underline">Reminder System</a> in Reference.
</p> </p>
</div> </div>
)} )}

View file

@ -96,7 +96,7 @@ export default function GaugeSites() {
<h1 className="text-xl font-semibold text-slate-100">Gauge Sites</h1> <h1 className="text-xl font-semibold text-slate-100">Gauge Sites</h1>
<span className="text-xs text-slate-500 ml-2">{rows.length} sites</span> <span className="text-xs text-slate-500 ml-2">{rows.length} sites</span>
<button onClick={beginAdd} <button onClick={beginAdd}
className="ml-auto flex items-center gap-1 px-3 py-1 bg-cyan-700 hover:bg-cyan-600 rounded text-white text-sm"> className="ml-auto flex items-center gap-1 px-3 py-1 bg-[#f59e0b] hover:bg-[#d97706] text-black font-sans font-medium text-sm">
<Plus className="w-4 h-4" /> Add site <Plus className="w-4 h-4" /> Add site
</button> </button>
</div> </div>
@ -108,22 +108,22 @@ export default function GaugeSites() {
<div className="bg-slate-800/60 border border-slate-700 overflow-x-auto"> <div className="bg-slate-800/60 border border-slate-700 overflow-x-auto">
<table className="w-full text-sm text-slate-200"> <table className="w-full text-sm text-slate-200">
<thead className="bg-slate-900 text-xs text-slate-400 uppercase"> <thead className="bg-[#161616] border-b border-border">
<tr> <tr>
<th className="px-3 py-2 text-left">Site ID</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-left">Site ID</th>
<th className="px-3 py-2 text-left">Name</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-left">Name</th>
<th className="px-3 py-2 text-right">Lat,Lon</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Lat,Lon</th>
<th className="px-3 py-2 text-right">Action</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Action</th>
<th className="px-3 py-2 text-right">Minor</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Minor</th>
<th className="px-3 py-2 text-right">Moderate</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Moderate</th>
<th className="px-3 py-2 text-right">Major</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Major</th>
<th className="px-3 py-2 text-center">On</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-center">On</th>
<th className="px-3 py-2"></th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666]"></th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-700/60"> <tbody className="divide-y divide-slate-700/60">
{rows.map(r => editing === r.site_id ? ( {rows.map(r => editing === r.site_id ? (
<tr key={r.site_id} className="bg-slate-900/40"> <tr key={r.site_id} className="bg-bg-card border-b border-border hover:bg-bg-hover">
<td colSpan={9} className="px-3 py-2"> <td colSpan={9} className="px-3 py-2">
<RowEditor draft={draft} setDraft={setDraft} onSave={save} onCancel={cancel} feedSource={feedSource} /> <RowEditor draft={draft} setDraft={setDraft} onSave={save} onCancel={cancel} feedSource={feedSource} />
</td> </td>
@ -204,7 +204,7 @@ function RowEditor({ draft, setDraft, onSave, onCancel, adding, feedSource }: {
} }
} }
return ( return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 p-3 bg-slate-900/50 rounded"> <div className="grid grid-cols-2 md:grid-cols-4 gap-2 p-3 bg-[#1a1a1a] rounded">
<label className="text-xs text-slate-400 col-span-2"> <label className="text-xs text-slate-400 col-span-2">
Site ID Site ID
<div className="flex items-center gap-1 mt-1"> <div className="flex items-center gap-1 mt-1">
@ -254,7 +254,7 @@ function RowEditor({ draft, setDraft, onSave, onCancel, adding, feedSource }: {
</label> </label>
<div className="col-span-2 flex items-center justify-end gap-2 mt-2"> <div className="col-span-2 flex items-center justify-end gap-2 mt-2">
<button onClick={onCancel} className="px-3 py-1 text-slate-300 hover:bg-slate-700 rounded text-sm">Cancel</button> <button onClick={onCancel} className="px-3 py-1 text-slate-300 hover:bg-slate-700 rounded text-sm">Cancel</button>
<button onClick={onSave} className="px-3 py-1 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-sm">Save</button> <button onClick={onSave} className="px-3 py-1 bg-[#f59e0b] hover:bg-[#d97706] text-black font-sans font-medium text-sm">Save</button>
</div> </div>
</div> </div>
) )

View file

@ -929,7 +929,7 @@ function NotificationRuleCard({
title={rule.enabled ? 'Enabled' : 'Disabled'} title={rule.enabled ? 'Enabled' : 'Disabled'}
/> />
{rule.trigger_type === 'schedule' ? ( {rule.trigger_type === 'schedule' ? (
<Clock size={14} className="text-sky-400 flex-shrink-0" /> <Clock size={14} className="text-[#f59e0b] flex-shrink-0" />
) : ( ) : (
<Zap size={14} className="text-yellow-400 flex-shrink-0" /> <Zap size={14} className="text-yellow-400 flex-shrink-0" />
)} )}
@ -976,7 +976,7 @@ function NotificationRuleCard({
<button <button
onClick={(e) => { e.stopPropagation(); handleTest() }} onClick={(e) => { e.stopPropagation(); handleTest() }}
disabled={testing || !rule.name} disabled={testing || !rule.name}
className="p-1.5 text-sky-400 hover:text-sky-300 hover:bg-sky-400/10 rounded disabled:opacity-50" className="p-1.5 text-[#f59e0b] hover:text-[#d97706] hover:bg-[#f59e0b]/10 rounded disabled:opacity-50"
title="Test rule" title="Test rule"
> >
<Send size={14} /> <Send size={14} />

View file

@ -68,7 +68,7 @@ export default function TownAnchors() {
<h1 className="text-xl font-semibold text-slate-100">Town Anchors</h1> <h1 className="text-xl font-semibold text-slate-100">Town Anchors</h1>
<span className="text-xs text-slate-500 ml-2">{rows.length} towns</span> <span className="text-xs text-slate-500 ml-2">{rows.length} towns</span>
<button onClick={beginAdd} <button onClick={beginAdd}
className="ml-auto flex items-center gap-1 px-3 py-1 bg-cyan-700 hover:bg-cyan-600 rounded text-white text-sm"> className="ml-auto flex items-center gap-1 px-3 py-1 bg-[#f59e0b] hover:bg-[#d97706] text-black font-sans font-medium text-sm">
<Plus className="w-4 h-4" /> Add town <Plus className="w-4 h-4" /> Add town
</button> </button>
</div> </div>
@ -84,19 +84,19 @@ export default function TownAnchors() {
<div className="bg-slate-800/60 border border-slate-700 overflow-x-auto"> <div className="bg-slate-800/60 border border-slate-700 overflow-x-auto">
<table className="w-full text-sm text-slate-200"> <table className="w-full text-sm text-slate-200">
<thead className="bg-slate-900 text-xs text-slate-400 uppercase"> <thead className="bg-[#161616] border-b border-border">
<tr> <tr>
<th className="px-3 py-2 text-left">Name</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-left">Name</th>
<th className="px-3 py-2 text-right">Lat</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Lat</th>
<th className="px-3 py-2 text-right">Lon</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-right">Lon</th>
<th className="px-3 py-2 text-center">State</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-center">State</th>
<th className="px-3 py-2 text-center">On</th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666] text-center">On</th>
<th className="px-3 py-2"></th> <th className="px-3 py-2 font-sans text-[9px] uppercase tracking-widest text-[#666]"></th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-slate-700/60"> <tbody className="divide-y divide-slate-700/60">
{rows.map(r => editing === r.anchor_id ? ( {rows.map(r => editing === r.anchor_id ? (
<tr key={r.anchor_id} className="bg-slate-900/40"> <tr key={r.anchor_id} className="bg-bg-card border-b border-border hover:bg-bg-hover">
<td colSpan={6} className="px-3 py-2"><RowEditor draft={draft} setDraft={setDraft} onSave={save} onCancel={cancel} /></td> <td colSpan={6} className="px-3 py-2"><RowEditor draft={draft} setDraft={setDraft} onSave={save} onCancel={cancel} /></td>
</tr> </tr>
) : ( ) : (
@ -126,7 +126,7 @@ function RowEditor({ draft, setDraft, onSave, onCancel, adding }: {
}) { }) {
const upd = (k: keyof TownAnchor, v: unknown) => setDraft({ ...draft, [k]: v }) const upd = (k: keyof TownAnchor, v: unknown) => setDraft({ ...draft, [k]: v })
return ( return (
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 p-3 bg-slate-900/50 rounded"> <div className="grid grid-cols-2 md:grid-cols-4 gap-2 p-3 bg-[#1a1a1a] rounded">
<label className="text-xs text-slate-400 col-span-2">Name (lowercased on save) <label className="text-xs text-slate-400 col-span-2">Name (lowercased on save)
<input className="block w-full mt-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100" <input className="block w-full mt-1 bg-slate-800 border border-slate-700 rounded px-2 py-1 text-slate-100"
value={draft.name} onChange={e => upd('name', e.target.value)} disabled={!adding} /> value={draft.name} onChange={e => upd('name', e.target.value)} disabled={!adding} />
@ -149,7 +149,7 @@ function RowEditor({ draft, setDraft, onSave, onCancel, adding }: {
</label> </label>
<div className="col-span-2 flex items-center justify-end gap-2 mt-2"> <div className="col-span-2 flex items-center justify-end gap-2 mt-2">
<button onClick={onCancel} className="px-3 py-1 text-slate-300 hover:bg-slate-700 rounded text-sm">Cancel</button> <button onClick={onCancel} className="px-3 py-1 text-slate-300 hover:bg-slate-700 rounded text-sm">Cancel</button>
<button onClick={onSave} className="px-3 py-1 bg-cyan-700 hover:bg-cyan-600 text-white rounded text-sm">Save</button> <button onClick={onSave} className="px-3 py-1 bg-[#f59e0b] hover:bg-[#d97706] text-black font-sans font-medium text-sm">Save</button>
</div> </div>
</div> </div>
) )

View file

@ -8,8 +8,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<script type="module" crossorigin src="/assets/index-BT0Sg4ip.js"></script> <script type="module" crossorigin src="/assets/index-cJev-9xo.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BOveD3kO.css"> <link rel="stylesheet" crossorigin href="/assets/index-8oP3B9c2.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>