Fimeg/RedFlag
Watch
1
0
Fork
You've already forked RedFlag
 0
Code Releases Activity

web: primary -> steel blue, split from danger (C5)

Browse source 
primary was byte-identical to danger (both red), so every focus ring, toggle,
tab and link read as an error. primary is now steel #336699 (red lives on as
danger). Walked the stray hard-coded interactives onto the token — StackDriftPanel,
software-binding buttons/links, retry CTA — and left the destructive reds alone.
This commit is contained in:
Fimeg 2026-06-15 09:37:48 -04:00
commit 1d84fd46a7
4 changed files with 26 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/components/AgentSoftwareBindings.tsx
View file

@ -122,7 +122,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
{allTracked.length > 0 && bindable.length > 0 && (
<button
onClick={() => setShowAdd((v) => !v)}
className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700"
className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700"
>
<Plus className="w-4 h-4" />
Bind
@ -143,7 +143,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
<select
value={form.tracked_software_id}
onChange={(e) => setForm({ ...form, tracked_software_id: e.target.value })}
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-red-500"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
>
<option value="">— choose —</option>
{bindable.map((s) => (
@ -159,7 +159,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
value={form.installed_version}
onChange={(e) => setForm({ ...form, installed_version: e.target.value })}
placeholder="e.g. 15.4"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-red-500"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
/>
</div>
<div>
@ -170,7 +170,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
value={form.install_path ?? ''}
onChange={(e) => setForm({ ...form, install_path: e.target.value })}
placeholder="/opt/postgres"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-red-500"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded font-mono focus:outline-none focus:ring-2 focus:ring-primary-500"
/>
</div>
<div className="md:col-span-2">
@ -181,7 +181,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
value={form.notes ?? ''}
onChange={(e) => setForm({ ...form, notes: e.target.value })}
placeholder="built from main; --with-openssl"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-red-500"
className="w-full px-2 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary-500"
/>
</div>
</div>
@ -195,7 +195,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
<button
onClick={handleAdd}
disabled={!form.tracked_software_id || !form.installed_version || upsert.isPending}
className="px-3 py-1.5 text-sm bg-red-600 text-white rounded hover:bg-red-700 disabled:opacity-50"
className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded hover:bg-primary-700 disabled:opacity-50"
>
{upsert.isPending ? 'Saving…' : 'Save binding'}
</button>
@ -205,7 +205,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
{isPending ? (
<div className="text-center py-6">
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-red-600"></div>
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
</div>
) : list.length === 0 ? (
<div className="text-center py-8 border border-dashed border-gray-200 rounded-lg">
@ -217,7 +217,7 @@ const AgentSoftwareBindings: React.FC<AgentSoftwareBindingsProps> = ({ agentId }
</p>
<Link
to="/settings/upstream"
className="inline-flex items-center gap-1 text-sm text-red-600 hover:text-red-800"
className="inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
>
Open Upstream Tracking <ArrowRight className="w-4 h-4" />
</Link>

2
web/src/components/ServerStatusOverlay.tsx
View file

@ -34,7 +34,7 @@ const ServerStatusOverlay: React.FC<ServerStatusOverlayProps> = ({
</p>
<button
onClick={onRetryNow}
className="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-red-600 hover:text-red-700 transition-colors"
className="mt-2 inline-flex items-center gap-1.5 text-xs font-medium text-primary-600 hover:text-primary-700 transition-colors"
>
<RefreshCw className="w-3 h-3" />
Retry now

6
web/src/components/StackDriftPanel.tsx
View file

@ -24,7 +24,7 @@ const StackDriftPanel: React.FC = () => {
{isPending ? (
<div className="text-center py-6">
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
<div className="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
</div>
) : drift.length === 0 ? (
<div className="text-center py-6">
@ -33,7 +33,7 @@ const StackDriftPanel: React.FC = () => {
</p>
<Link
to="/settings/upstream"
className="mt-3 inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
className="mt-3 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
>
Track something <ArrowRight className="w-4 h-4" />
</Link>
@ -81,7 +81,7 @@ const StackDriftPanel: React.FC = () => {
{drift.length > 3 && (
<Link
to="/settings/upstream"
className="mt-3 inline-flex items-center gap-1 text-sm text-blue-600 hover:text-blue-800"
className="mt-3 inline-flex items-center gap-1 text-sm text-primary-600 hover:text-primary-800"
>
View all {drift.length} <ArrowRight className="w-4 h-4" />
</Link>