Replace buton in more components

BrunoQuaresma · BrunoQuaresma · commit 48d65c929290 · 2025-05-15T18:43:35.000Z
diff --git a/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx b/site/src/pages/ResetPasswordPage/RequestOTPPage.tsx
@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import MuiButton from "@mui/material/Button";
 import TextField from "@mui/material/TextField";
 import { requestOneTimePassword } from "api/queries/users";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
@@ -98,15 +97,16 @@ const RequestOTP: FC<RequestOTPProps> = ({
 									<Spinner loading={isRequesting} />
 									Reset password
 								</Button>
-								<MuiButton
-									component={RouterLink}
-									size="large"
-									fullWidth
-									variant="text"
-									to="/login"
+								<Button
+									asChild
+									size="lg"
+									variant="outline"
+									className="w-full"
 								>
-									Cancel
-								</MuiButton>
+									<RouterLink to="/login">
+										Cancel
+									</RouterLink>
+								</Button>
 							</Stack>
 						</Stack>
 					</fieldset>
@@ -151,9 +151,11 @@ const RequestOTPSuccess: FC<{ email: string }> = ({ email }) => {
 					Contact your deployment administrator if you encounter issues.
 				</p>
 
-				<MuiButton component={RouterLink} to="/login">
-					Back to login
-				</MuiButton>
+				<Button asChild variant="default">
+					<RouterLink to="/login">
+						Back to login
+					</RouterLink>
+				</Button>
 			</div>
 		</div>
 	);
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/IntervalMenu.tsx
@@ -1,7 +1,7 @@
 import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
-import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import { Button } from "components/Button/Button";
 import { CheckIcon } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 
@@ -38,9 +38,10 @@ export const IntervalMenu: FC<IntervalMenuProps> = ({ value, onChange }) => {
 				aria-haspopup="true"
 				aria-expanded={open ? "true" : undefined}
 				onClick={() => setOpen(true)}
-				endIcon={<ExpandMoreOutlined />}
+				variant="outline"
 			>
 				{insightsIntervals[value].label}
+				<ExpandMoreOutlined className="size-icon-xs ml-1" />
 			</Button>
 			<Menu
 				id="interval-menu"
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import ArrowForwardOutlined from "@mui/icons-material/ArrowForwardOutlined";
-import MuiButton from "@mui/material/Button";
 import Skeleton from "@mui/material/Skeleton";
 import { hasError, isApiValidationError } from "api/errors";
 import type { Template, TemplateExample } from "api/typesGenerated";
@@ -163,19 +162,19 @@ const TemplateRow: FC<TemplateRowProps> = ({
 					<DeprecatedBadge />
 				) : workspacePermissions?.[template.organization_id]
 						?.createWorkspaceForUserID ? (
-					<MuiButton
-						size="small"
+					<Button
+						size="sm"
 						css={styles.actionButton}
 						className="actionButton"
-						startIcon={<ArrowForwardOutlined />}
 						title={`Create a workspace using the ${template.display_name} template`}
 						onClick={(e) => {
 							e.stopPropagation();
 							navigate(`${templatePageLink}/workspace`);
 						}}
 					>
+						<ArrowForwardOutlined className="size-icon-sm" />
 						Create Workspace
-					</MuiButton>
+					</Button>
 				) : null}
 			</TableCell>
 		</TableRow>
