From ee0e7f83fdc1d6d56fa62436a86492cba501532b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 20:00:47 +0000
Subject: [PATCH 1/3] chore: replace MUI Button - 2

---
 site/src/components/IconField/IconField.tsx   | 19 ++---
 .../RichParameterInput/RichParameterInput.tsx |  6 +-
 site/src/components/SelectMenu/SelectMenu.tsx | 76 +++++++++----------
 site/src/pages/LoginPage/LoginPageView.tsx    | 10 ++-
 .../MissingTemplateVariablesDialog.tsx        | 11 ++-
 5 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index b55ed59445dc6..5a272d44bfd80 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -1,17 +1,16 @@
 import { Global, css, useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
-import { Stack } from "components/Stack/Stack";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, Suspense, lazy, useState } from "react";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
@@ -40,7 +39,7 @@ export const IconField: FC<IconFieldProps> = ({
 	const [open, setOpen] = useState(false);
 
 	return (
-		<Stack spacing={1}>
+		<div className="flex items-center gap-2">
 			<TextField
 				fullWidth
 				label="Icon"
@@ -93,14 +92,12 @@ export const IconField: FC<IconFieldProps> = ({
 			/>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger>
-					<Button fullWidth endIcon={<DropdownArrow />}>
-						Select emoji
+					<Button variant="outline" size="lg" className="flex-shrink-0">
+						Emoji
+						<ChevronDownIcon />
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent
-					id="emoji"
-					css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
-				>
+				<PopoverContent id="emoji" horizontal="right">
 					<Suspense fallback={<Loader />}>
 						<EmojiPicker
 							onEmojiSelect={(emoji) => {
@@ -128,6 +125,6 @@ export const IconField: FC<IconFieldProps> = ({
 					</Suspense>
 				</div>
 			)}
-		</Stack>
+		</div>
 	);
 };
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
index c9a5c895e5825..1af3245b98c7b 100644
--- a/site/src/components/RichParameterInput/RichParameterInput.tsx
+++ b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import type { InputBaseComponentProps } from "@mui/material/InputBase";
@@ -8,6 +7,7 @@ import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import type { TemplateVersionParameter } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Pill } from "components/Pill/Pill";
@@ -240,7 +240,9 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
 					!hideSuggestion && (
 						<FormHelperText>
 							<Button
-								variant="text"
+								variant="subtle"
+								size="xs"
+								className="p-1 min-w-0"
 								css={styles.suggestion}
 								onClick={() => {
 									onChange(autofillValue);
diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index 57164c0c3dbe6..dd439882ee9f5 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -1,7 +1,6 @@
-import Button, { type ButtonProps } from "@mui/material/Button";
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	SearchField,
 	type SearchFieldProps,
@@ -11,7 +10,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import {
 	Children,
 	type FC,
@@ -30,46 +29,39 @@ export const SelectMenuTrigger = PopoverTrigger;
 
 export const SelectMenuContent = PopoverContent;
 
-export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
-	(props, ref) => {
-		return (
-			<Button
-				css={{
-					// Icon and text should be aligned to the left
-					justifyContent: "flex-start",
-					flexShrink: 0,
-					"& .MuiButton-startIcon": {
-						marginLeft: 0,
-						marginRight: SIDE_PADDING,
-					},
-					// Dropdown arrow should be at the end of the button
-					"& .MuiButton-endIcon": {
-						marginLeft: "auto",
-					},
-				}}
-				endIcon={<DropdownArrow />}
-				ref={ref}
-				{...props}
-				// MUI applies a style that affects the sizes of start icons.
-				// .MuiButton-startIcon > *:nth-of-type(1) { font-size: 20px }. To
-				// prevent this from breaking the inner components of startIcon, we wrap
-				// it in a div.
-				startIcon={props.startIcon && <div>{props.startIcon}</div>}
+export type SelectMenuButtonProps = ButtonProps & {
+	startIcon?: React.ReactNode;
+};
+
+export const SelectMenuButton = forwardRef<
+	HTMLButtonElement,
+	SelectMenuButtonProps
+>((props, ref) => {
+	const { startIcon, ...restProps } = props;
+	return (
+		<Button
+			css={{
+				// Icon and text should be aligned to the left
+				justifyContent: "flex-start",
+				flexShrink: 0,
+			}}
+			variant="outline"
+			size="lg"
+			className="flex items-center gap-2"
+			ref={ref}
+			{...restProps}
+		>
+			{startIcon && <div>{startIcon}</div>}
+			<span
+				// Make sure long text does not break the button layout
+				className="text-left block overflow-hidden text-ellipsis flex-grow"
 			>
-				<span
-					// Make sure long text does not break the button layout
-					css={{
-						display: "block",
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-					}}
-				>
-					{props.children}
-				</span>
-			</Button>
-		);
-	},
-);
+				{props.children}
+			</span>
+			<ChevronDownIcon />
+		</Button>
+	);
+});
 
 export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
 	return (
diff --git a/site/src/pages/LoginPage/LoginPageView.tsx b/site/src/pages/LoginPage/LoginPageView.tsx
index 0c9b54e273963..bfa6424e276d8 100644
--- a/site/src/pages/LoginPage/LoginPageView.tsx
+++ b/site/src/pages/LoginPage/LoginPageView.tsx
@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { CustomLogo } from "components/CustomLogo/CustomLogo";
 import { Loader } from "components/Loader/Loader";
 import { type FC, useState } from "react";
@@ -44,7 +44,13 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 				) : tosAcceptanceRequired ? (
 					<>
 						<TermsOfServiceLink url={authMethods.terms_of_service_url} />
-						<Button onClick={() => setTosAccepted(true)}>I agree</Button>
+						<Button
+							size="lg"
+							className="w-full"
+							onClick={() => setTosAccepted(true)}
+						>
+							I agree
+						</Button>
 					</>
 				) : (
 					<SignInForm
diff --git a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx
index 3f9f0ae8cb0da..6b781ca962b1b 100644
--- a/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx
+++ b/site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.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 {
 	TemplateVersionVariable,
 	VariableValue,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
@@ -93,10 +93,15 @@ export const MissingTemplateVariablesDialog: FC<
 				</VerticalForm>
 			</DialogContent>
 			<DialogActions disableSpacing css={styles.dialogActions}>
-				<Button color="primary" fullWidth type="submit" form="updateVariables">
+				<Button className="w-full" type="submit" form="updateVariables">
 					Submit
 				</Button>
-				<Button fullWidth type="button" onClick={dialogProps.onClose}>
+				<Button
+					variant="outline"
+					className="w-full"
+					type="button"
+					onClick={dialogProps.onClose}
+				>
 					Cancel
 				</Button>
 			</DialogActions>

From e312584e5f2fd4bbe738829e10df216c9a9d6c2a Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 20 May 2025 20:03:19 +0000
Subject: [PATCH 2/3] Clean up styles

---
 site/src/components/SelectMenu/SelectMenu.tsx | 20 +++----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/site/src/components/SelectMenu/SelectMenu.tsx b/site/src/components/SelectMenu/SelectMenu.tsx
index dd439882ee9f5..c56be65460d90 100644
--- a/site/src/components/SelectMenu/SelectMenu.tsx
+++ b/site/src/components/SelectMenu/SelectMenu.tsx
@@ -39,23 +39,9 @@ export const SelectMenuButton = forwardRef<
 >((props, ref) => {
 	const { startIcon, ...restProps } = props;
 	return (
-		<Button
-			css={{
-				// Icon and text should be aligned to the left
-				justifyContent: "flex-start",
-				flexShrink: 0,
-			}}
-			variant="outline"
-			size="lg"
-			className="flex items-center gap-2"
-			ref={ref}
-			{...restProps}
-		>
-			{startIcon && <div>{startIcon}</div>}
-			<span
-				// Make sure long text does not break the button layout
-				className="text-left block overflow-hidden text-ellipsis flex-grow"
-			>
+		<Button variant="outline" size="lg" ref={ref} {...restProps}>
+			{startIcon}
+			<span className="text-left block overflow-hidden text-ellipsis flex-grow">
 				{props.children}
 			</span>
 			<ChevronDownIcon />

From 4ba449f7529eb3263606072855bc77f6f81d1b0c Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 23 May 2025 12:00:27 +0000
Subject: [PATCH 3/3] Fix shrink

---
 site/src/components/Filter/SelectFilter.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
index 1b8993a9713d3..09aac251cec8b 100644
--- a/site/src/components/Filter/SelectFilter.tsx
+++ b/site/src/components/Filter/SelectFilter.tsx
@@ -53,6 +53,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 				<SelectMenuButton
 					startIcon={selectedOption?.startIcon}
 					css={{ flexBasis: width, flexGrow: 1 }}
+					className="shrink-0"
 					aria-label={label}
 				>
 					{selectedOption?.label ?? placeholder}