fix: remove all mui <IconButton /> instances (#24045)

This pull-request removes all instances of `<IconButton />` being
imported from `@mui/material/IconButton`. This means that we've removed
one whole dependency from MUI and replaced all instances with the local
variant.

site/src/modules/provisioners/ProvisionerTag.tsx

@@ -1,7 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import { CircleCheckIcon, CircleMinusIcon, TagIcon, XIcon } from "lucide-react";
 import type { ComponentProps, FC } from "react";
+import { Button } from "#/components/Button/Button";
 import { Pill } from "#/components/Pill/Pill";
 
 const parseBool = (s: string): { valid: boolean; value: boolean } => {
@@ -41,16 +41,17 @@ export const ProvisionerTag: FC<ProvisionerTagProps> = ({
 	const content = onDelete ? (
 		<>
 			{kv}
-			<IconButton
-				size="small"
-				color="secondary"
+			<Button
+				size="icon"
+				variant="subtle"
 				onClick={() => {
 					onDelete(tagName);
 				}}
+				className="size-6"
 			>
 				<XIcon className="size-icon-xs" />
 				<span className="sr-only">Delete {tagName}</span>
-			</IconButton>
+			</Button>
 		</>
 	) : (
 		kv

site/src/modules/resources/ResourceCard.tsx

@@ -1,8 +1,8 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import IconButton from "@mui/material/IconButton";
 import { Children, type FC, type JSX, useState } from "react";
 import type { WorkspaceAgent, WorkspaceResource } from "#/api/typesGenerated";
 import { ChevronDownIcon } from "#/components/AnimatedIcons/ChevronDown";
+import { Button } from "#/components/Button/Button";
 import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
 import { MemoizedInlineMarkdown } from "#/components/Markdown/Markdown";
 import { Stack } from "#/components/Stack/Stack";
@@ -165,14 +165,15 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 				{mLength > 4 && (
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<IconButton
+							<Button
 								onClick={() => {
 									setShouldDisplayAllMetadata((value) => !value);
 								}}
-								size="large"
+								size="icon-lg"
+								variant="subtle"
 							>
 								<ChevronDownIcon open={shouldDisplayAllMetadata} />
-							</IconButton>
+							</Button>
 						</TooltipTrigger>
 						<TooltipContent side="bottom">
 							{shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"}

site/src/modules/resources/SensitiveValue.tsx

@@ -1,6 +1,6 @@
-import IconButton from "@mui/material/IconButton";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type FC, useState } from "react";
+import { Button } from "#/components/Button/Button";
 import { CopyableValue } from "#/components/CopyableValue/CopyableValue";
 import {
 	Tooltip,
@@ -32,16 +32,17 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
 			</CopyableValue>
 			<Tooltip>
 				<TooltipTrigger asChild>
-					<IconButton
-						className="text-inherit"
+					<Button
 						onClick={() => {
 							setShouldDisplay((value) => !value);
 						}}
-						size="small"
+						size="icon"
+						variant="subtle"
+						className="size-6"
 						aria-label={buttonLabel}
 					>
 						{icon}
-					</IconButton>
+					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">{buttonLabel}</TooltipContent>
 			</Tooltip>