fix: use square icon for stop button instead of pause icon (#21386)

The pause icon (`||`) for the Stop button was confusing as it suggests
pause/resume functionality. Changed to a square icon (`□`) which is the
standard icon for stop in media players and interfaces.

### Before
<img width="100" alt="before"
src="https://github.com/user-attachments/assets/77e2fee5-cb66-4b47-9a2a-0dccce5c28ca"
/>

### After
The button will now display a square (⬛) stop icon instead of the pause
(⏸) icon.

---------

Co-authored-by: blink-so[bot] <211532188+blink-so[bot]@users.noreply.github.com>
Co-authored-by: Jaayden Halko <jaayden@coder.com>

site/src/components/BuildIcon/BuildIcon.tsx

@@ -1,5 +1,5 @@
 import type { WorkspaceTransition } from "api/typesGenerated";
-import { PauseIcon, PlayIcon, TrashIcon } from "lucide-react";
+import { PlayIcon, SquareIcon, TrashIcon } from "lucide-react";
 import type { ComponentProps } from "react";
 
 type SVGIcon = typeof PlayIcon;
@@ -8,7 +8,7 @@ type SVGIconProps = ComponentProps<SVGIcon>;
 
 const iconByTransition: Record<WorkspaceTransition, SVGIcon> = {
 	start: PlayIcon,
-	stop: PauseIcon,
+	stop: SquareIcon,
 	delete: TrashIcon,
 };
 

site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx

@@ -8,10 +8,10 @@ import {
 import {
 	BanIcon,
 	CloudIcon,
-	PauseIcon,
 	PlayIcon,
 	PowerIcon,
 	RotateCcwIcon,
+	SquareIcon,
 	StarIcon,
 	StarOffIcon,
 } from "lucide-react";
@@ -130,7 +130,7 @@ export const StopButton: FC<ActionButtonProps> = ({
 			onClick={() => handleAction()}
 			data-testid="workspace-stop-button"
 		>
-			<PauseIcon />
+			<SquareIcon />
 			{loading ? <>Stopping&hellip;</> : "Stop"}
 		</TopbarButton>
 	);

site/src/pages/WorkspacesPage/WorkspacesPageView.tsx

@@ -20,8 +20,8 @@ import { TableToolbar } from "components/TableToolbar/TableToolbar";
 import {
 	ChevronDownIcon,
 	CloudIcon,
-	PauseIcon,
 	PlayIcon,
+	SquareIcon,
 	TrashIcon,
 } from "lucide-react";
 import { WorkspacesTable } from "pages/WorkspacesPage/WorkspacesTable";
@@ -175,7 +175,7 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 									}
 									onClick={onBatchStopTransition}
 								>
-									<PauseIcon /> Stop
+									<SquareIcon /> Stop
 								</DropdownMenuItem>
 								<DropdownMenuSeparator />
 								<DropdownMenuItem onClick={onBatchUpdateTransition}>

site/src/pages/WorkspacesPage/WorkspacesTable.tsx

@@ -51,9 +51,9 @@ import {
 	EllipsisVertical,
 	ExternalLinkIcon,
 	FileIcon,
-	PauseIcon,
 	PlayIcon,
 	RefreshCcwIcon,
+	SquareIcon,
 	SquareTerminalIcon,
 	StarIcon,
 } from "lucide-react";
@@ -491,7 +491,7 @@ const WorkspaceActionsCell: FC<WorkspaceActionsCellProps> = ({
 						isLoading={stopWorkspaceMutation.isPending}
 						label="Stop workspace"
 					>
-						<PauseIcon />
+						<SquareIcon />
 					</PrimaryAction>
 				)}
 
@@ -736,7 +736,7 @@ const WorkspaceApps: FC<WorkspaceAppsProps> = ({ workspace }) => {
 				}}
 				label="Open Terminal"
 			>
-				<SquareTerminalIcon />
+				<SquareTerminalIcon className="!size-7" />
 			</BaseIconLink>,
 		);
 	}

site/src/utils/workspace.tsx

@@ -8,8 +8,8 @@ import utc from "dayjs/plugin/utc";
 import {
 	CircleAlertIcon,
 	HourglassIcon,
-	PauseIcon,
 	PlayIcon,
+	SquareIcon,
 } from "lucide-react";
 import semver from "semver";
 import { getPendingStatusLabel } from "./provisionerJob";
@@ -241,7 +241,7 @@ export const getDisplayWorkspaceStatus = (
 			return {
 				type: "inactive",
 				text: "Stopped",
-				icon: <PauseIcon />,
+				icon: <SquareIcon />,
 			} as const;
 		case "deleting":
 			return {