chore: fix idle state icon when disabled

code-asher · code-asher · commit 27f64de4a5d5 · 2025-06-24T14:07:01.000-08:00
When the workspace is off, we set a disabled color, but for the idle
icon that also needs a fill, this only changed the border making it look
weird.  Instead, move the disabled logic into the component so we can
apply a matching fill when necessary.
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}
