opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-22 05:05:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(site): standardize PR status icon colors to match diff colors (#22971)

Browse Source
This commit is contained in:
Danielle Maywood
2026-03-11 22:50:29 +00:00
committed by GitHub
parent 58f295059c
commit 45c32d62c5
8 changed files with 74 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/index.css
+16
View File
@@ -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%;
site/src/pages/AgentsPage/AgentsSidebar.tsx
+5 -5
View File
@@ -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<ChatTreeNodeProps>(({ chat, isChildNode }) => {
className="inline-flex shrink-0 items-center gap-0.5 text-[13px] leading-4 tabular-nums"
title={`${filesChangedLabel}, +${additions} -${deletions}`}
>
<span className="text-green-700 dark:text-green-500">
<span className="text-git-added-bright">
+{additions}
</span>
<span className="text-red-700 dark:text-red-400">
<span className="text-git-deleted-bright">
&minus;{deletions}
</span>{" "}
</span>
site/src/pages/AgentsPage/DiffStats.tsx
+2 -2
View File
@@ -14,12 +14,12 @@ export const DiffStatBadge: FC<{ additions: number; deletions: number }> = ({
return (
<span className="inline-flex h-full items-center self-stretch overflow-hidden font-mono text-xs font-medium">
{additions > 0 && (
<span className="flex h-full items-center bg-green-100 dark:bg-green-950 px-1.5 text-green-700 dark:text-green-500">
<span className="flex h-full items-center bg-surface-git-added px-1.5 text-git-added-bright">
+{additions}
</span>
)}
{deletions > 0 && (
<span className="flex h-full items-center bg-red-100 dark:bg-red-950 px-1.5 text-red-700 dark:text-red-400">
<span className="flex h-full items-center bg-surface-git-deleted px-1.5 text-git-deleted-bright">
&minus;{deletions}
</span>
)}
site/src/pages/AgentsPage/DiffViewer.tsx
+2 -35
View File
@@ -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;
site/src/pages/AgentsPage/FilesChangedPanel.tsx
+2 -39
View File
@@ -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;
site/src/pages/AgentsPage/SidebarTabView.stories.tsx
+2 -2
View File
@@ -12,12 +12,12 @@ const makePanelContent = (label: string) => (
const makeBadge = (additions: number, deletions: number) => (
<span className="inline-flex h-full items-center self-stretch overflow-hidden font-mono text-xs font-medium">
{additions > 0 && (
<span className="flex h-full items-center bg-green-100 px-1.5 text-green-700 dark:bg-green-950 dark:text-green-500">
<span className="flex h-full items-center bg-surface-git-added px-1.5 text-git-added-bright">
+{additions}
</span>
)}
{deletions > 0 && (
<span className="flex h-full items-center bg-red-100 px-1.5 text-red-700 dark:bg-red-950 dark:text-red-400">
<span className="flex h-full items-center bg-surface-git-deleted px-1.5 text-git-deleted-bright">
&minus;{deletions}
</span>
)}
site/src/pages/AgentsPage/diffColors.ts
+35
View File
@@ -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 "";
}
}
site/tailwind.config.js
+10
View File
@@ -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: {