From 45c32d62c52673f7983ff961af6f3a16c8563eee Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Wed, 11 Mar 2026 22:50:29 +0000 Subject: [PATCH] fix(site): standardize PR status icon colors to match diff colors (#22971) --- site/src/index.css | 16 ++++++++ site/src/pages/AgentsPage/AgentsSidebar.tsx | 10 ++--- site/src/pages/AgentsPage/DiffStats.tsx | 4 +- site/src/pages/AgentsPage/DiffViewer.tsx | 37 +---------------- .../pages/AgentsPage/FilesChangedPanel.tsx | 41 +------------------ .../AgentsPage/SidebarTabView.stories.tsx | 4 +- site/src/pages/AgentsPage/diffColors.ts | 35 ++++++++++++++++ site/tailwind.config.js | 10 +++++ 8 files changed, 74 insertions(+), 83 deletions(-) create mode 100644 site/src/pages/AgentsPage/diffColors.ts diff --git a/site/src/index.css b/site/src/index.css index 3a2bda9811..ce310c8f2b 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -58,6 +58,14 @@ --highlight-sky: 195, 61%, 22%; --highlight-red: 0 74% 42%; --highlight-magenta: 295, 68%, 46%; + --git-added: 142 72% 29%; + --git-deleted: 0 74% 42%; + --git-modified: 17 88% 40%; + --git-merged: 271 91% 65%; + --git-added-bright: 142 72% 29%; + --git-deleted-bright: 0 74% 42%; + --surface-git-added: 141 84% 93%; + --surface-git-deleted: 0 93% 94%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 240 10% 3.9%; @@ -117,6 +125,14 @@ --highlight-sky: 188, 75%, 80%; --highlight-red: 0 91% 71%; --highlight-magenta: 292, 100%, 78%; + --git-added: 142 77% 73%; + --git-deleted: 0 94% 82%; + --git-modified: 31 97% 72%; + --git-merged: 271 91% 65%; + --git-added-bright: 142 71% 45%; + --git-deleted-bright: 0 91% 71%; + --surface-git-added: 145 80% 10%; + --surface-git-deleted: 0 75% 15%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 240 4.9% 83.9%; diff --git a/site/src/pages/AgentsPage/AgentsSidebar.tsx b/site/src/pages/AgentsPage/AgentsSidebar.tsx index a028396590..b1628dd780 100644 --- a/site/src/pages/AgentsPage/AgentsSidebar.tsx +++ b/site/src/pages/AgentsPage/AgentsSidebar.tsx @@ -115,12 +115,12 @@ const getPRIconConfig = ( return undefined; } if (state === "merged") { - return { icon: GitMergeIcon, className: "text-purple-500" }; + return { icon: GitMergeIcon, className: "text-git-merged" }; } if (state === "closed") { return { icon: GitPullRequestClosedIcon, - className: "text-content-destructive", + className: "text-git-deleted-bright", }; } // state === "open" @@ -130,7 +130,7 @@ const getPRIconConfig = ( className: "text-content-secondary", }; } - return { icon: GitPullRequestArrowIcon, className: "text-green-500" }; + return { icon: GitPullRequestArrowIcon, className: "text-git-added-bright" }; }; const asNonEmptyString = (value: unknown): string | undefined => { @@ -464,10 +464,10 @@ const ChatTreeNode = memo(({ chat, isChildNode }) => { className="inline-flex shrink-0 items-center gap-0.5 text-[13px] leading-4 tabular-nums" title={`${filesChangedLabel}, +${additions} -${deletions}`} > - + +{additions} - + −{deletions} {" "} diff --git a/site/src/pages/AgentsPage/DiffStats.tsx b/site/src/pages/AgentsPage/DiffStats.tsx index 876fc6f70d..09bad75bfe 100644 --- a/site/src/pages/AgentsPage/DiffStats.tsx +++ b/site/src/pages/AgentsPage/DiffStats.tsx @@ -14,12 +14,12 @@ export const DiffStatBadge: FC<{ additions: number; deletions: number }> = ({ return ( {additions > 0 && ( - + +{additions} )} {deletions > 0 && ( - + −{deletions} )} diff --git a/site/src/pages/AgentsPage/DiffViewer.tsx b/site/src/pages/AgentsPage/DiffViewer.tsx index 90cdc741ed..bc3733851f 100644 --- a/site/src/pages/AgentsPage/DiffViewer.tsx +++ b/site/src/pages/AgentsPage/DiffViewer.tsx @@ -1,5 +1,5 @@ import { useTheme } from "@emotion/react"; -import type { ChangeTypes, FileDiffMetadata } from "@pierre/diffs"; +import type { FileDiffMetadata } from "@pierre/diffs"; import { FileDiff } from "@pierre/diffs/react"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { @@ -21,6 +21,7 @@ import { useState, } from "react"; import { cn } from "utils/cn"; +import { changeColor, changeLabel } from "./diffColors"; // ------------------------------------------------------------------- // Public interface @@ -120,40 +121,6 @@ function estimateDiffHeight(fileDiff: FileDiffMetadata): number { // File tree data model // ------------------------------------------------------------------- -/** Maps a diff change type to a Tailwind text-color class. */ -function changeColor(type?: ChangeTypes): string | undefined { - switch (type) { - case "new": - return "text-green-700 dark:text-green-300"; - case "deleted": - return "text-red-700 dark:text-red-300"; - case "rename-pure": - case "rename-changed": - return "text-orange-700 dark:text-orange-300"; - case "change": - return "text-orange-700 dark:text-orange-300"; - default: - return undefined; - } -} - -/** Short letter shown after the filename, matching VS Code style. */ -function changeLabel(type: ChangeTypes): string { - switch (type) { - case "new": - return "A"; - case "deleted": - return "D"; - case "rename-pure": - case "rename-changed": - return "R"; - case "change": - return "M"; - default: - return ""; - } -} - interface FileTreeNode { name: string; fullPath: string; diff --git a/site/src/pages/AgentsPage/FilesChangedPanel.tsx b/site/src/pages/AgentsPage/FilesChangedPanel.tsx index eb40448f21..c5e71b18bb 100644 --- a/site/src/pages/AgentsPage/FilesChangedPanel.tsx +++ b/site/src/pages/AgentsPage/FilesChangedPanel.tsx @@ -1,9 +1,5 @@ import { useTheme } from "@emotion/react"; -import type { - ChangeTypes, - DiffLineAnnotation, - FileDiffMetadata, -} from "@pierre/diffs"; +import type { DiffLineAnnotation, FileDiffMetadata } from "@pierre/diffs"; import { parsePatchFiles } from "@pierre/diffs"; import { FileDiff } from "@pierre/diffs/react"; import { chatDiffContents, chatDiffStatus } from "api/queries/chats"; @@ -38,6 +34,7 @@ import { import { useQuery } from "react-query"; import { cn } from "utils/cn"; import type { ChatMessageInputRef } from "./AgentChatInput"; +import { changeColor, changeLabel } from "./diffColors"; interface FilesChangedPanelProps { chatId: string; @@ -182,40 +179,6 @@ function parsePullRequestUrl(url: string): { // File tree data model // ------------------------------------------------------------------- -/** Maps a diff change type to a Tailwind text-color class. */ -function changeColor(type?: ChangeTypes): string | undefined { - switch (type) { - case "new": - return "text-green-700 dark:text-green-300"; - case "deleted": - return "text-red-700 dark:text-red-300"; - case "rename-pure": - case "rename-changed": - return "text-orange-700 dark:text-orange-300"; - case "change": - return "text-orange-700 dark:text-orange-300"; - default: - return undefined; - } -} - -/** Short letter shown after the filename, matching VS Code style. */ -function changeLabel(type: ChangeTypes): string { - switch (type) { - case "new": - return "A"; - case "deleted": - return "D"; - case "rename-pure": - case "rename-changed": - return "R"; - case "change": - return "M"; - default: - return ""; - } -} - interface FileTreeNode { name: string; fullPath: string; diff --git a/site/src/pages/AgentsPage/SidebarTabView.stories.tsx b/site/src/pages/AgentsPage/SidebarTabView.stories.tsx index 8a3c0e5707..ea4ae351c4 100644 --- a/site/src/pages/AgentsPage/SidebarTabView.stories.tsx +++ b/site/src/pages/AgentsPage/SidebarTabView.stories.tsx @@ -12,12 +12,12 @@ const makePanelContent = (label: string) => ( const makeBadge = (additions: number, deletions: number) => ( {additions > 0 && ( - + +{additions} )} {deletions > 0 && ( - + −{deletions} )} diff --git a/site/src/pages/AgentsPage/diffColors.ts b/site/src/pages/AgentsPage/diffColors.ts new file mode 100644 index 0000000000..5ec3f02613 --- /dev/null +++ b/site/src/pages/AgentsPage/diffColors.ts @@ -0,0 +1,35 @@ +import type { ChangeTypes } from "@pierre/diffs"; + +/** Maps a diff change type to a Tailwind text-color class. */ +export function changeColor(type?: ChangeTypes): string | undefined { + switch (type) { + case "new": + return "text-git-added"; + case "deleted": + return "text-git-deleted"; + case "rename-pure": + case "rename-changed": + return "text-git-modified"; + case "change": + return "text-git-modified"; + default: + return undefined; + } +} + +/** Short letter shown after the filename, matching VS Code style. */ +export function changeLabel(type: ChangeTypes): string { + switch (type) { + case "new": + return "A"; + case "deleted": + return "D"; + case "rename-pure": + case "rename-changed": + return "R"; + case "change": + return "M"; + default: + return ""; + } +} diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 7b46f228c6..af0a5c5857 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -64,6 +64,8 @@ module.exports = { red: "hsl(var(--surface-red))", purple: "hsl(var(--surface-purple))", magenta: "hsl(var(--surface-magenta))", + "git-added": "hsl(var(--surface-git-added))", + "git-deleted": "hsl(var(--surface-git-deleted))", }, border: { DEFAULT: "hsl(var(--border-default))", @@ -88,6 +90,14 @@ module.exports = { red: "hsl(var(--highlight-red))", magenta: "hsl(var(--highlight-magenta))", }, + git: { + added: "hsl(var(--git-added))", + deleted: "hsl(var(--git-deleted))", + modified: "hsl(var(--git-modified))", + merged: "hsl(var(--git-merged))", + "added-bright": "hsl(var(--git-added-bright))", + "deleted-bright": "hsl(var(--git-deleted-bright))", + }, }, keyframes: { loading: {