diff --git a/src/renderer/src/components/TaskPage.tsx b/src/renderer/src/components/TaskPage.tsx index 967a05bd095..8e0bc6e29fd 100644 --- a/src/renderer/src/components/TaskPage.tsx +++ b/src/renderer/src/components/TaskPage.tsx @@ -1985,13 +1985,13 @@ function getChecksLabel(item: GitHubWorkItem): string { function getChecksPillTone(item: GitHubWorkItem): string { const state = item.checksSummary?.state if (state === 'success') { - return 'border-emerald-500/40 bg-emerald-500/10 text-emerald-200' + return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-200' } if (state === 'failure') { - return 'border-rose-500/40 bg-rose-500/10 text-rose-200' + return 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-200' } if (state === 'pending') { - return 'border-amber-500/40 bg-amber-500/10 text-amber-200' + return 'border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-200' } return 'border-border/60 bg-background/70 text-muted-foreground' } diff --git a/src/renderer/src/components/task-page-github-work-item-status.test.ts b/src/renderer/src/components/task-page-github-work-item-status.test.ts index 62ced71280d..84c2f2b6f63 100644 --- a/src/renderer/src/components/task-page-github-work-item-status.test.ts +++ b/src/renderer/src/components/task-page-github-work-item-status.test.ts @@ -33,9 +33,16 @@ describe('task-page-github-work-item-status', () => { expect(isTaskPageGitHubDraftPR({ type: 'pr', state: 'open' })).toBe(false) }) - it('uses distinct tones for merged and open PRs', () => { - expect(getTaskPageGitHubWorkItemStateTone({ type: 'pr', state: 'merged' })).toContain('purple') - expect(getTaskPageGitHubWorkItemStateTone({ type: 'pr', state: 'open' })).toContain('emerald') + it('uses distinct muted tones for merged and open PRs', () => { + const mergedTone = getTaskPageGitHubWorkItemStateTone({ type: 'pr', state: 'merged' }) + expect(mergedTone).toContain('purple') + expect(mergedTone).toContain('text-purple-700') + expect(mergedTone).not.toContain('bg-purple-600') + + const openTone = getTaskPageGitHubWorkItemStateTone({ type: 'pr', state: 'open' }) + expect(openTone).toContain('emerald') + expect(openTone).toContain('text-emerald-700') + expect(openTone).not.toContain('bg-emerald-600') }) it('handles edge cases gracefully', () => { diff --git a/src/renderer/src/components/task-page-github-work-item-status.ts b/src/renderer/src/components/task-page-github-work-item-status.ts index b200abb2328..5e54688305b 100644 --- a/src/renderer/src/components/task-page-github-work-item-status.ts +++ b/src/renderer/src/components/task-page-github-work-item-status.ts @@ -22,22 +22,21 @@ export function getTaskPageGitHubWorkItemStateLabel(item: GitHubWorkItemStatusIt : translate('auto.components.TaskPage.606a85c774', 'Open') } -// Why: mirror GitHub Primer StateLabel tones — draft is neutral gray, open is -// green, merged purple, closed red. No custom amber/dashed treatment. -// Note: Draft uses a different pattern (muted-foreground bg on border bg) because -// it's a non-actionable "meta" state, while other states use solid color fills. +// Why: use the same muted pill tones as merge/check badges — light washes with +// readable foreground text in both themes. Draft stays neutral gray because +// it's a non-actionable meta state. export function getTaskPageGitHubWorkItemStateTone(item: GitHubWorkItemStatusItem): string { if (item.type === 'pr') { if (item.state === 'merged') { - return 'border-purple-600/20 bg-purple-600 text-purple-50 dark:border-purple-400/20 dark:bg-purple-500 dark:text-white' + return 'border-purple-500/30 bg-purple-500/10 text-purple-700 dark:text-purple-300' } if (item.state === 'draft') { return 'border-border/60 bg-muted-foreground/70 text-background dark:bg-muted-foreground/60 dark:text-foreground' } if (item.state === 'closed') { - return 'border-rose-600/20 bg-rose-600 text-rose-50 dark:border-rose-400/20 dark:bg-rose-500 dark:text-white' + return 'border-rose-500/30 bg-rose-500/10 text-rose-700 dark:text-rose-200' } - return 'border-emerald-600/20 bg-emerald-600 text-emerald-50 dark:border-emerald-400/20 dark:bg-emerald-500 dark:text-white' + return 'border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-200' } if (item.state === 'closed') {