chore: fix idle state icon when disabled (#18554)

code-asher · web-flow · commit 48bb534a5106 · 2025-06-25T10:06:57.000-08:00
When the workspace is off, we set a disabled text/stroke color, but for the idle icon that also needs a fill, this only changed the outline making it look weird. Instead, move the disabled logic into the component so we can apply a matching fill. I felt it looked too thick with both the outline and fill, so I also removed the outline. Really I think maybe the workspace status should be a separate column rather than disabling these icons, but this maintains the status quo. Before with mismatching stroke and fill color: ![screenshot](https://github.com/user-attachments/assets/961014b7-1e26-49f0-aa87-834f2f367618) After with disabled fill and stroke removal: ![screenshot](https://github.com/user-attachments/assets/205e4515-dc01-4437-87ec-a0f8a546da3b) Enabled fill and stroke removal: ![screenshot](https://github.com/user-attachments/assets/04f5914e-f96c-4c75-8873-e3fc9c854d95)
diff --git a/site/src/modules/apps/AppStatusStateIcon.tsx b/site/src/modules/apps/AppStatusStateIcon.tsx
@@ -24,16 +24,23 @@ export const AppStatusStateIcon: FC<AppStatusStateIconProps> = ({
 	latest,
 	className: customClassName,
 }) => {
-	const className = cn(["size-4 shrink-0", customClassName]);
+	const className = cn([
+		"size-4 shrink-0",
+		customClassName,
+		disabled && "text-content-disabled",
+	]);
 
 	switch (state) {
 		case "idle":
+			// The pause icon is outlined; add a fill since it is hard to see and
+			// remove the stroke so it is not overly thick.
 			return (
 				<PauseIcon
+					css={{ strokeWidth: 0 }}
 					className={cn([
 						"text-content-secondary",
-						"fill-content-secondary",
 						className,
+						disabled ? "fill-content-disabled" : "fill-content-secondary",
 					])}
 				/>
 			);
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.stories.tsx
@@ -69,9 +69,43 @@ export const LongMessage: Story = {
 	},
 };
 
-export const Disabled: Story = {
+export const DisabledComplete: Story = {
 	args: {
 		status: MockWorkspaceAppStatus,
 		disabled: true,
 	},
 };
+
+export const DisabledFailure: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "failure",
+			message: "Couldn't figure out how to start the dev server",
+		},
+		disabled: true,
+	},
+};
+
+export const DisabledWorking: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "working",
+			message: "Starting dev server...",
+			uri: "",
+		},
+		disabled: true,
+	},
+};
+
+export const DisabledIdle: Story = {
+	args: {
+		status: {
+			...MockWorkspaceAppStatus,
+			state: "idle",
+			message: "Done for now",
+		},
+		disabled: true,
+	},
+};
diff --git a/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx b/site/src/modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus.tsx
@@ -7,7 +7,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import capitalize from "lodash/capitalize";
 import { AppStatusStateIcon } from "modules/apps/AppStatusStateIcon";
-import { cn } from "utils/cn";
 
 type WorkspaceAppStatusProps = {
 	status: APIWorkspaceAppStatus | null;
@@ -37,9 +36,6 @@ export const WorkspaceAppStatus = ({
 								latest
 								disabled={disabled}
 								state={status.state}
-								className={cn({
-									"text-content-disabled": disabled,
-								})}
 							/>
 							<span className="whitespace-nowrap max-w-72 overflow-hidden text-ellipsis text-sm text-content-primary font-medium">
 								{message}
