refactor: replace MUI buttons on Alerts (#16209)

BrunoQuaresma · web-flow · commit 53d83d2da7a7 · 2025-01-21T10:27:02.000-03:00
Related to #14978
diff --git a/site/src/components/Alert/Alert.stories.tsx b/site/src/components/Alert/Alert.stories.tsx
@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "components/Button/Button";
 import { Alert } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
@@ -11,7 +11,7 @@ export default meta;
 type Story = StoryObj<typeof Alert>;
 
 const ExampleAction = (
-	<Button onClick={() => null} size="small" variant="text">
+	<Button onClick={() => null} size="sm" variant="subtle">
 		Button
 	</Button>
 );
diff --git a/site/src/components/Alert/Alert.tsx b/site/src/components/Alert/Alert.tsx
@@ -3,8 +3,8 @@ import MuiAlert, {
 	type AlertProps as MuiAlertProps,
 	// biome-ignore lint/nursery/noRestrictedImports: Used as base component
 } from "@mui/material/Alert";
-import Button from "@mui/material/Button";
 import Collapse from "@mui/material/Collapse";
+import { Button } from "components/Button/Button";
 import {
 	type FC,
 	type PropsWithChildren,
@@ -51,8 +51,8 @@ export const Alert: FC<AlertProps> = ({
 						{/* close CTA */}
 						{dismissible && (
 							<Button
-								variant="text"
-								size="small"
+								variant="subtle"
+								size="sm"
 								onClick={() => {
 									setOpen(false);
 									onDismiss?.();
diff --git a/site/src/components/Alert/ErrorAlert.stories.tsx b/site/src/components/Alert/ErrorAlert.stories.tsx
@@ -1,5 +1,5 @@
-import Button from "@mui/material/Button";
 import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "components/Button/Button";
 import { mockApiError } from "testHelpers/entities";
 import { ErrorAlert } from "./ErrorAlert";
 
@@ -21,7 +21,7 @@ export default meta;
 type Story = StoryObj<typeof ErrorAlert>;
 
 const ExampleAction = (
-	<Button onClick={() => null} size="small" variant="text">
+	<Button onClick={() => null} size="sm" variant="subtle">
 		Button
 	</Button>
 );
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -1,7 +1,7 @@
-import Button from "@mui/material/Button";
 import Link from "@mui/material/Link";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { Alert, type AlertProps } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
 import { type FC, useEffect, useRef, useState } from "react";
 import { docs } from "utils/docs";
 import type { ConnectionStatus } from "./types";
@@ -186,8 +186,8 @@ const RefreshSessionButton: FC = () => {
 	return (
 		<Button
 			disabled={isRefreshing}
-			size="small"
-			variant="text"
+			size="sm"
+			variant="subtle"
 			onClick={() => {
 				setIsRefreshing(true);
 				window.location.reload();
