fix: improve text contrast on DevBranchingPage

- Page subtitle: text-secondary → text-primary
- Helper text: text-muted → text-secondary
- Section labels: text-muted → text-secondary
- Detail card labels: text-muted → text-secondary
- Detail card values: text-primary → text-heading
- Detail card body: text-secondary → text-primary

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-24 21:51:24 +00:00
parent 0bd1090a5b
commit 20302900b8

View File

@@ -455,7 +455,7 @@ export default function DevBranchingPage() {
<h1 className="text-lg font-heading font-semibold text-heading">
Conversational Branching Component Test
</h1>
<p className="text-sm text-secondary mt-1">
<p className="text-sm text-primary mt-1">
Mock scenario: Intermittent connectivity on WS-1042. 5 branches, 1 fork, 1 revival.
</p>
</div>
@@ -469,7 +469,7 @@ export default function DevBranchingPage() {
toBranch={activeBranch}
/>
) : (
<p className="text-xs text-muted">Click a branch in the sidebar to see the transition bar.</p>
<p className="text-xs text-secondary">Click a branch in the sidebar to see the transition bar.</p>
)}
</section>
@@ -519,35 +519,35 @@ export default function DevBranchingPage() {
<div className="bg-card border border-default rounded-lg p-4 text-sm">
<div className="grid grid-cols-2 gap-2">
<div>
<span className="text-muted">Label:</span>{' '}
<span className="text-primary">{activeBranch.label}</span>
<span className="text-secondary">Label:</span>{' '}
<span className="text-heading">{activeBranch.label}</span>
</div>
<div>
<span className="text-muted">Status:</span>{' '}
<span className="text-primary">{activeBranch.status}</span>
<span className="text-secondary">Status:</span>{' '}
<span className="text-heading">{activeBranch.status}</span>
</div>
<div>
<span className="text-muted">Steps:</span>{' '}
<span className="text-primary">{activeBranch.step_count}</span>
<span className="text-secondary">Steps:</span>{' '}
<span className="text-heading">{activeBranch.step_count}</span>
</div>
<div>
<span className="text-muted">Order:</span>{' '}
<span className="text-primary">{activeBranch.branch_order}</span>
<span className="text-secondary">Order:</span>{' '}
<span className="text-heading">{activeBranch.branch_order}</span>
</div>
</div>
{activeBranch.status_reason && (
<div className="mt-2 pt-2 border-t border-default">
<span className="text-muted">Reason:</span>{' '}
<span className="text-secondary">{activeBranch.status_reason}</span>
<span className="text-secondary">Reason:</span>{' '}
<span className="text-primary">{activeBranch.status_reason}</span>
</div>
)}
{activeBranch.context_summary && (
<div className="mt-2 pt-2 border-t border-default">
<span className="text-muted">Tried:</span>{' '}
<span className="text-secondary">{activeBranch.context_summary.tried.join(', ')}</span>
<span className="text-secondary">Tried:</span>{' '}
<span className="text-primary">{activeBranch.context_summary.tried.join(', ')}</span>
<br />
<span className="text-muted">Concluded:</span>{' '}
<span className="text-secondary">{activeBranch.context_summary.concluded}</span>
<span className="text-secondary">Concluded:</span>{' '}
<span className="text-primary">{activeBranch.context_summary.concluded}</span>
</div>
)}
</div>
@@ -570,7 +570,7 @@ export default function DevBranchingPage() {
function SectionLabel({ children }: { children: React.ReactNode }) {
return (
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted mb-2 block">
<span className="text-[10px] font-semibold uppercase tracking-wider text-secondary mb-2 block">
{children}
</span>
)