chore: replace remaining MUI buttons (coder#20200)

Author: BrunoQuaresma

biome.jsonc

@@ -51,6 +51,7 @@
 							"@mui/material/Popover": "Use components/Popover/Popover instead.",
 							"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
 							"@mui/material/Box": "Use a <div> instead.",
+							"@mui/material/Button": "Use a components/Button/Button instead.",
 							"@mui/material/styles": "Import from @emotion/react instead.",
 							"lodash": "Use lodash/<name> instead."
 						}

site/src/@types/mui.d.ts

@@ -13,16 +13,6 @@ declare module "@mui/material/styles" {
 	}
 }
 
-declare module "@mui/material/Button" {
-	interface ButtonPropsColorOverrides {
-		neutral: true;
-	}
-
-	interface ButtonPropsSizeOverrides {
-		xlarge: true;
-	}
-}
-
 declare module "@mui/material/Checkbox" {
 	interface CheckboxPropsSizeOverrides {
 		xsmall: true;

site/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,6 +1,6 @@
-import Button from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "components/Button/Button";
 import { InputGroup } from "./InputGroup";
 
 const meta: Meta<typeof InputGroup> = {
@@ -15,7 +15,9 @@ export const Default: Story = {
 	args: {
 		children: (
 			<>
-				<Button>Menu</Button>
+				<Button variant="outline" className="h-9">
+					Menu
+				</Button>
 				<TextField size="small" placeholder="Search..." />
 			</>
 		),

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -1,12 +1,12 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import Tooltip from "@mui/material/Tooltip";
 import type {
 	DeploymentStats,
 	HealthcheckReport,
 	WorkspaceStatus,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
 import { JetBrainsIcon } from "components/Icons/JetBrainsIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
@@ -323,9 +323,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 								fetchStats();
 							}
 						}}
-						variant="text"
+						variant="subtle"
 					>
-						<RotateCwIcon className="size-icon-xs" />
+						<RotateCwIcon />
 						{timeUntilRefresh}s
 					</Button>
 				</Tooltip>

site/src/modules/resources/Resources.tsx

@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { Stack } from "components/Stack/Stack";
 import { type FC, type JSX, useState } from "react";
@@ -37,8 +37,9 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
 			{hasHideResources && (
 				<div className="flex items-center justify-center mt-4">
 					<Button
+						variant="outline"
 						className="rounded-full w-full max-w-[260px]"
-						size="small"
+						size="sm"
 						onClick={() => setShouldDisplayHideResources((v) => !v)}
 					>
 						{shouldDisplayHideResources ? "Hide" : "Show hidden"} resources

site/src/modules/workspaces/WorkspaceMoreActions/UpdateBuildParametersDialog.tsx

@@ -1,6 +1,5 @@
 import { css } from "@emotion/css";
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -10,6 +9,7 @@ import type {
 	TemplateVersionParameter,
 	WorkspaceBuildParameter,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { RichParameterInput } from "components/RichParameterInput/RichParameterInput";
@@ -97,10 +97,15 @@ export const UpdateBuildParametersDialog: FC<
 				</VerticalForm>
 			</DialogContent>
 			<DialogActions disableSpacing css={styles.dialogActions}>
-				<Button fullWidth type="button" onClick={dialogProps.onClose}>
+				<Button
+					variant="outline"
+					className="w-full"
+					type="button"
+					onClick={dialogProps.onClose}
+				>
 					Cancel
 				</Button>
-				<Button color="primary" fullWidth type="submit" form="updateParameters">
+				<Button className="w-full" type="submit" form="updateParameters">
 					Update parameters
 				</Button>
 			</DialogActions>

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.tsx

@@ -1,12 +1,12 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
 import Skeleton from "@mui/material/Skeleton";
 import type {
 	AgentConnectionTiming,
 	AgentScriptTiming,
 	ProvisionerTiming,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import sortBy from "lodash/sortBy";
 import uniqBy from "lodash/uniqBy";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
@@ -96,7 +96,7 @@ export const WorkspaceTimings: FC<WorkspaceTimingsProps> = ({
 		<div css={styles.collapse}>
 			<Button
 				disabled={isLoading}
-				variant="text"
+				variant="subtle"
 				css={styles.collapseTrigger}
 				onClick={() => setIsOpen((o) => !o)}
 			>

site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx

@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { TriangleAlertIcon, XIcon } from "lucide-react";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -103,8 +103,8 @@ const MissingVariablesBanner: FC<MissingVariablesBannerProps> = ({
 				</p>
 				<Button
 					css={bannerStyles.button}
-					size="small"
-					variant="outlined"
+					size="sm"
+					variant="outline"
 					onClick={onFillVariables}
 				>
 					Fill variables

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import type { GetLicensesResponse } from "api/api";
+import { Button } from "components/Button/Button";
 import { ConfirmDialog } from "components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
@@ -106,9 +106,8 @@ export const LicenseCard: FC<LicenseCardProps> = ({
 					</Stack>
 					<Stack spacing={2}>
 						<Button
-							css={styles.removeButton}
-							variant="contained"
-							size="small"
+							variant="destructive"
+							size="sm"
 							onClick={() => setLicenseIDMarkedForRemoval(license.id)}
 							className="remove-button"
 						>
@@ -150,10 +149,4 @@ const styles = {
 	secondaryMaincolor: (theme) => ({
 		color: theme.palette.text.secondary,
 	}),
-	removeButton: (theme) => ({
-		color: theme.palette.error.main,
-		"&:hover": {
-			backgroundColor: "transparent",
-		},
-	}),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import MuiButton from "@mui/material/Button";
 import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
@@ -75,13 +74,12 @@ const LicensesSettingsPageView: FC<Props> = ({
 				</SettingsHeader>
 
 				<Stack direction="row" spacing={2}>
-					<MuiButton
-						component={Link}
-						to="/deployment/licenses/add"
-						startIcon={<PlusIcon className="size-icon-sm" />}
-					>
-						Add a license
-					</MuiButton>
+					<Button variant="outline" asChild>
+						<Link to="/deployment/licenses/add">
+							<PlusIcon />
+							Add a license
+						</Link>
+					</Button>
 					<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
 						<Button
 							disabled={isRefreshing}