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

refactor(ui): simplify status badges to flat colors with accent borders

Browse source
This commit is contained in:
zenchantlive 2026-02-26 15:20:49 -08:00
parent 4ea6f38e09
commit f1eae0c8b0
2 changed files with 24 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/graph/task-card-grid.tsx
View file

@ -70,22 +70,22 @@ function statusDot(status: BeadIssue['status']): string {
} }
/** /**
* Returns status-tinted gradient background for Aero Chrome styling. * Returns status-tinted gradient background for simplified flat styling.
*/ */
function statusGradient(status: BeadIssue['status']): string { function statusGradient(status: BeadIssue['status']): string {
switch (status) { switch (status) {
case 'open': case 'open':
return 'bg-[linear-gradient(145deg,rgba(34,45,42,0.92)_0%,rgba(24,32,30,0.88)_50%,rgba(18,28,26,0.9)_100%)]'; return 'border-l-2 border-emerald-400/60 bg-emerald-400/8';
case 'in_progress': case 'in_progress':
return 'bg-[linear-gradient(145deg,rgba(42,40,32,0.92)_0%,rgba(32,30,24,0.88)_50%,rgba(26,24,18,0.9)_100%)]'; return 'border-l-2 border-amber-400/60 bg-amber-400/8';
case 'blocked': case 'blocked':
return 'bg-[linear-gradient(145deg,rgba(60,24,30,0.95)_0%,rgba(45,18,24,0.9)_50%,rgba(32,12,16,0.92)_100%)]'; return 'border-l-2 border-rose-400/60 bg-rose-400/8';
case 'closed': case 'closed':
return 'bg-[linear-gradient(145deg,rgba(28,30,34,0.75)_0%,rgba(22,24,28,0.72)_50%,rgba(18,20,24,0.75)_100%)] opacity-75'; return 'border-l-2 border-slate-400/40 bg-slate-400/5 opacity-70';
case 'deferred': case 'deferred':
return 'bg-[linear-gradient(145deg,rgba(38,40,48,0.92)_0%,rgba(28,30,36,0.88)_50%,rgba(22,24,30,0.9)_100%)]'; return 'border-l-2 border-slate-400/40 bg-slate-400/5';
default: default:
return 'bg-[linear-gradient(145deg,rgba(38,40,48,0.92)_0%,rgba(28,30,36,0.88)_50%,rgba(22,24,30,0.9)_100%)]'; return 'border-l-2 border-slate-400/40 bg-slate-400/5';
} }
} }

15
src/components/shared/status-utils.tsx
View file

@ -1,16 +1,19 @@
export function statusGradient(status: string): string { export function statusGradient(status: string): string {
switch (status) { switch (status) {
case 'ready': case 'ready':
case 'open': return 'border-l-2 border-emerald-400/60 bg-emerald-400/8';
return 'bg-[linear-gradient(145deg,rgba(34,45,42,0.92)_0%,rgba(24,32,30,0.88)_50%,rgba(18,28,26,0.9)_100%)]';
case 'in_progress': case 'in_progress':
return 'bg-[linear-gradient(145deg,rgba(42,40,32,0.92)_0%,rgba(32,30,24,0.88)_50%,rgba(26,24,18,0.9)_100%)]'; return 'border-l-2 border-amber-400/60 bg-amber-400/8';
case 'blocked': case 'blocked':
return 'bg-[linear-gradient(145deg,rgba(60,24,30,0.95)_0%,rgba(45,18,24,0.9)_50%,rgba(32,12,16,0.92)_100%)]'; return 'border-l-2 border-rose-400/60 bg-rose-400/8';
case 'closed': case 'closed':
return 'bg-[linear-gradient(145deg,rgba(28,30,34,0.75)_0%,rgba(22,24,28,0.72)_50%,rgba(18,20,24,0.75)_100%)] opacity-75'; return 'border-l-2 border-slate-400/40 bg-slate-400/5 opacity-70';
case 'open':
return 'border-l-2 border-sky-400/60 bg-sky-400/8';
case 'deferred':
return 'border-l-2 border-slate-400/40 bg-slate-400/5';
default: default:
return 'bg-[linear-gradient(145deg,rgba(38,40,48,0.92)_0%,rgba(28,30,36,0.88)_50%,rgba(22,24,30,0.9)_100%)]'; return 'border-l-2 border-slate-400/40 bg-slate-400/5';
} }
} }