viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(theme): lighten backgrounds, simplify header/sidebar/panel styling

Browse source
This commit is contained in:
zenchantlive 2026-02-26 15:27:21 -08:00
parent 227012ba1a
commit fc328adf31
5 changed files with 30 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/globals.css
View file

@ -4,10 +4,11 @@
:root {
/* ========== VISUAL-TRUTH UI TOKEN CONTRACT (bb-vt.1.1) ========== */
--ui-bg-app: #070d16;
--ui-bg-shell: #0c1420;
--ui-bg-panel: #111c2a;
--ui-bg-card: #1a2431;
/* Lightened aurora palette */
--ui-bg-app: #0d1219;
--ui-bg-shell: #131b26;
--ui-bg-panel: #1a2330;
--ui-bg-card: #222d3d;
--ui-border-soft: rgba(153, 171, 190, 0.2);
--ui-border-strong: rgba(153, 171, 190, 0.34);

24
src/components/shared/left-panel.tsx
View file

@ -139,15 +139,15 @@ function statusDot(status: BeadIssue['status']): string {
function rowTone(entry: EpicEntry): string {
if (entry.blockedCount > 0) {
return '#22111a';
return 'rgba(255, 76, 114, 0.08)';
}
if (entry.activeCount > 0) {
return '#221a11';
return 'rgba(255, 178, 74, 0.08)';
}
if (entry.readyCount > 0) {
return '#0f221c';
return 'rgba(53, 217, 143, 0.08)';
}
return '#111f2b';
return 'var(--ui-bg-panel)';
}
function isTaskMatch(task: BeadIssue, filters: LeftPanelFilters): boolean {
@ -213,7 +213,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
})}
</div>
<div className="space-y-2 rounded-xl bg-[#101a27] p-2.5 shadow-[0_16px_26px_-20px_rgba(0,0,0,0.92)]">
<div className="space-y-2 rounded-xl bg-[var(--ui-bg-panel)] p-2.5 border border-[var(--ui-border-soft)]">
<div className="grid grid-cols-1 gap-2">
<input
value={filters.query}
@ -284,10 +284,10 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
type="button"
onClick={() => onFiltersChange({ ...filters, hideClosed: !filters.hideClosed })}
className={cn(
'w-full rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] shadow-[0_8px_18px_-16px_rgba(0,0,0,0.9)] transition-colors',
'w-full rounded-lg px-2 py-1.5 text-[10px] font-semibold uppercase tracking-[0.11em] transition-colors border',
filters.hideClosed
? 'bg-[#1d2b1a] text-[var(--ui-accent-ready)]'
: 'bg-[#0f1824] text-[var(--ui-text-muted)]',
? 'bg-[var(--ui-accent-ready)]/15 border-[var(--ui-accent-ready)]/40 text-[var(--ui-accent-ready)]'
: 'bg-[var(--ui-bg-card)] border-[var(--ui-border-soft)] text-[var(--ui-text-muted)]',
)}
aria-pressed={filters.hideClosed}
>
@ -330,13 +330,13 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
<div key={epic.id} className="mb-2">
<div
className={cn(
'rounded-2xl px-3 py-3 transition-colors shadow-[0_18px_28px_-22px_rgba(0,0,0,0.96)]',
'rounded-xl px-3 py-3 transition-colors border border-[var(--ui-border-soft)]',
isSelected
? 'text-[var(--ui-text-primary)] ring-1 ring-[rgba(143,156,175,0.45)]'
? 'text-[var(--ui-text-primary)] ring-1 ring-[var(--ui-accent-info)]/30'
: 'text-[var(--ui-text-muted)] hover:text-[var(--ui-text-primary)]',
)}
style={{
boxShadow: `inset 3px 0 0 ${laneColor}, 0 18px 30px -24px rgba(0,0,0,0.95)`,
borderLeft: `3px solid ${laneColor}`,
background: rowBackground,
}}
>
@ -364,7 +364,7 @@ export function LeftPanel({ issues, selectedEpicId, onEpicSelect, filters, onFil
<button
type="button"
onClick={() => onEpicSelect?.(epic.id)}
className="inline-flex h-5 w-5 items-center justify-center rounded bg-[#0e1823] text-[var(--ui-text-muted)] shadow-[0_10px_16px_-12px_rgba(0,0,0,0.9)] transition-colors hover:text-[var(--ui-text-primary)]"
className="inline-flex h-5 w-5 items-center justify-center rounded bg-[var(--ui-bg-card)] text-[var(--ui-text-muted)] border border-[var(--ui-border-soft)] transition-colors hover:text-[var(--ui-text-primary)]"
aria-label={`Focus ${epic.title}`}
>
<Star className="h-3 w-3" aria-hidden="true" />

11
src/components/shared/right-panel.tsx
View file

@ -22,7 +22,7 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
<div
className="ui-shell-panel flex overflow-hidden h-full"
style={{
boxShadow: isOpen ? '-24px 0 40px -26px rgba(0,0,0,0.95), inset 1px 0 0 rgba(91,168,160,0.22)' : 'none',
boxShadow: isOpen ? '-12px 0 24px -16px rgba(0,0,0,0.5)' : 'none',
}}
data-testid="right-panel-desktop"
>
@ -30,12 +30,12 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
<>
{/* Main Content (Chat or Activity) */}
<div className="flex-1 min-w-0 h-full overflow-hidden flex flex-col">
<div className="border-l border-[color-mix(in_srgb,var(--ui-accent-info)_36%,var(--ui-border-soft))] bg-[linear-gradient(180deg,color-mix(in_srgb,var(--ui-bg-shell)_96%,black),color-mix(in_srgb,var(--ui-bg-panel)_90%,black))]">
<div className="border-l border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)]">
<div className="px-3 py-2 border-b border-[var(--ui-border-soft)]">
<p className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--ui-text-muted)]">Agent Pool Monitor</p>
</div>
</div>
<div className="flex-1 overflow-y-auto custom-scrollbar p-0 bg-[#08111d]">
<div className="flex-1 overflow-y-auto custom-scrollbar p-0 bg-[var(--ui-bg-shell)]">
{/* Remove default padding to allow edge-to-edge chat */}
{children || <span>Right Panel</span>}
</div>
@ -122,10 +122,9 @@ export function RightPanel({ children, rail, isOpen: externalIsOpen }: RightPane
className="fixed top-0 right-0 h-full z-50 overflow-y-auto"
style={{
width: '17rem',
background:
'linear-gradient(180deg, color-mix(in srgb, var(--ui-bg-panel) 86%, black), var(--ui-bg-panel))',
background: 'var(--ui-bg-panel)',
borderLeft: '1px solid var(--ui-border-soft)',
boxShadow: '-24px 0 44px -26px rgba(0,0,0,0.85)',
boxShadow: '-12px 0 24px -16px rgba(0,0,0,0.5)',
}}
data-testid="right-panel-tablet"
>

12
src/components/shared/top-bar.tsx
View file

@ -33,7 +33,7 @@ function MetricTile({ label, value, accent = 'info' }: MetricTileProps) {
: 'var(--ui-accent-info)';
return (
<div className="hidden items-center gap-2 rounded-md border border-[var(--ui-border-soft)] bg-[color-mix(in_srgb,var(--ui-bg-panel)_84%,black)] px-2.5 py-1 text-xs md:inline-flex">
<div className="hidden items-center gap-2 rounded-md border border-[var(--ui-border-soft)] bg-[var(--ui-bg-panel)] px-2.5 py-1 text-xs md:inline-flex">
<p className="font-mono text-[10px] uppercase tracking-[0.13em] text-[var(--ui-text-muted)]">{label}</p>
<p className="font-mono text-sm leading-none text-[var(--ui-text-primary)]">{value}</p>
<span className="h-1.5 w-1.5 rounded-full" style={{ backgroundColor: accentColor }} />
@ -69,7 +69,7 @@ export function TopBar({
</button>
<div className="mr-3 flex min-w-[210px] items-center gap-2 border-r border-[var(--ui-border-soft)] px-2 py-2">
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-[color-mix(in_srgb,var(--ui-accent-ready)_24%,var(--ui-bg-panel))] text-[var(--ui-accent-ready)]">
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-[var(--ui-bg-card)] text-[var(--ui-accent-ready)]">
<LayoutGrid className="h-5 w-5" aria-hidden="true" />
</div>
<div>
@ -96,11 +96,11 @@ export function TopBar({
className="inline-flex items-center gap-2 rounded-xl border px-3 py-2 text-xs font-semibold uppercase tracking-[0.11em] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)]"
style={{
borderColor: blockedOnly
? 'color-mix(in srgb, var(--ui-accent-blocked) 78%, transparent)'
? 'rgba(255, 76, 114, 0.6)'
: 'var(--ui-border-soft)',
backgroundColor: blockedOnly
? 'color-mix(in srgb, var(--ui-accent-blocked) 20%, var(--ui-bg-panel))'
: 'color-mix(in srgb, var(--ui-bg-panel) 88%, black)',
? 'rgba(255, 76, 114, 0.15)'
: 'var(--ui-bg-panel)',
color: blockedOnly ? '#ffd4dd' : 'var(--ui-text-primary)',
}}
data-testid="blocked-items-button"
@ -118,7 +118,7 @@ export function TopBar({
void onCreateTask?.();
}}
disabled={isCreatingTask}
className="inline-flex items-center gap-2 rounded-xl border border-[color-mix(in_srgb,var(--ui-accent-ready)_80%,black)] bg-[var(--ui-accent-action-green)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-[#072514] transition-colors hover:bg-[color-mix(in_srgb,var(--ui-accent-action-green)_84%,white)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] disabled:opacity-60"
className="inline-flex items-center gap-2 rounded-xl border border-[var(--ui-accent-ready)] bg-[var(--ui-accent-ready)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.11em] text-[#072514] transition-colors hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-accent-info)] disabled:opacity-60"
data-testid="new-task-button"
>
<Plus className="h-3.5 w-3.5" aria-hidden="true" />

4
src/components/shared/unified-shell.tsx
View file

@ -158,7 +158,7 @@ export function UnifiedShell({
};
return (
<div className="flex flex-col h-screen" style={{ backgroundColor: 'var(--color-bg-base)' }} data-testid="unified-shell">
<div className="flex flex-col h-screen bg-[var(--ui-bg-app)]" data-testid="unified-shell">
{/* TOP BAR: 3rem fixed */}
<TopBar />
@ -182,7 +182,7 @@ export function UnifiedShell({
<ResizeHandle direction="left" onResize={handleLeftResize} />
{/* MIDDLE CONTENT: flex-1 */}
<div className="flex-1 relative overflow-hidden bg-black/10 shadow-inner" data-testid="middle-content">
<div className="flex-1 relative overflow-hidden bg-[var(--ui-bg-shell)]" data-testid="middle-content">
{renderMiddleContent()}
</div>