chore: replace MUI Button - 3 (#17955)

Replaced MUI Button with custom Button in 5 components:
  - Filter.tsx - Changed import and updated Button props
(variant="outline", size="sm")
  - ChatLayout.tsx - Changed import and updated Button
props for the "New Chat" button
  - StarterTemplatePageView.tsx - Changed import and
implemented asChild pattern for links
  - Notifications.tsx - Changed import and updated
NotificationActionButton to use variant="subtle"
  - DateRange.tsx - Changed import and updated Button
styling

site/src/components/Filter/Filter.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
@@ -10,6 +9,7 @@ import {
 	hasError,
 	isApiValidationError,
 } from "api/errors";
+import { Button } from "components/Button/Button";
 import { InputGroup } from "components/InputGroup/InputGroup";
 import { SearchField } from "components/SearchField/SearchField";
 import { useDebouncedFunction } from "hooks/debounce";
@@ -267,9 +267,11 @@ const PresetMenu: FC<PresetMenuProps> = ({
 			<Button
 				onClick={() => setIsOpen(true)}
 				ref={anchorRef}
-				endIcon={<ChevronDownIcon className="size-4" />}
+				variant="outline"
+				className="h-9"
 			>
 				Filters
+				<ChevronDownIcon />
 			</Button>
 			<Menu
 				id="filter-menu"

site/src/pages/ChatPage/ChatLayout.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -9,6 +8,7 @@ import { createChat, getChats } from "api/queries/chats";
 import { deploymentLanguageModels } from "api/queries/deployment";
 import type { LanguageModelConfig } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
 import { useAgenticChat } from "contexts/useAgenticChat";
@@ -167,16 +167,12 @@ export const ChatLayout: FC = () => {
 						Chats
 					</div>
 					<Button
-						variant="outlined"
-						size="small"
-						startIcon={<PlusIcon className="size-icon-sm" />}
+						variant="outline"
+						size="sm"
 						onClick={handleNewChat}
 						disabled={createChatMutation.isLoading}
-						css={{
-							lineHeight: 1.5,
-							padding: theme.spacing(0.5, 1.5),
-						}}
 					>
+						<PlusIcon />
 						New Chat
 					</Button>
 				</div>

site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type { TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
 import { Margins } from "components/Margins/Margins";
@@ -44,22 +44,17 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
 			<PageHeader
 				actions={
 					<>
-						<Button
-							component="a"
-							target="_blank"
-							href={starterTemplate.url}
-							rel="noreferrer"
-							startIcon={<ExternalLinkIcon className="size-icon-sm" />}
-						>
-							View source code
+						<Button asChild variant="outline" size="sm">
+							<a target="_blank" href={starterTemplate.url} rel="noreferrer">
+								<ExternalLinkIcon />
+								View source code
+							</a>
 						</Button>
-						<Button
-							variant="contained"
-							component={Link}
-							to={`/templates/new?exampleId=${starterTemplate.id}`}
-							startIcon={<PlusIcon className="size-icon-sm" />}
-						>
-							Use template
+						<Button asChild size="sm">
+							<Link to={`/templates/new?exampleId=${starterTemplate.id}`}>
+								<PlusIcon />
+								Use template
+							</Link>
 						</Button>
 					</>
 				}

site/src/pages/TemplatePage/TemplateInsightsPage/DateRange.tsx

@@ -1,8 +1,7 @@
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 import type { Interpolation, Theme } from "@emotion/react";
-import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
-import Button from "@mui/material/Button";
+import { Button } from "components/Button/Button";
 import {
 	Popover,
 	PopoverContent,
@@ -17,6 +16,7 @@ import {
 	startOfHour,
 	subDays,
 } from "date-fns";
+import { MoveRightIcon } from "lucide-react";
 import { type ComponentProps, type FC, useRef, useState } from "react";
 import { DateRangePicker, createStaticRanges } from "react-date-range";
 
@@ -54,11 +54,9 @@ export const DateRange: FC<DateRangeProps> = ({ value, onChange }) => {
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger>
-				<Button>
+				<Button variant="outline">
 					<span>{format(value.startDate, "MMM d, Y")}</span>
-					<ArrowRightAltOutlined
-						css={{ width: 16, height: 16, marginLeft: 8, marginRight: 8 }}
-					/>
+					<MoveRightIcon />
 					<span>{format(value.endDate, "MMM d, Y")}</span>
 				</Button>
 			</PopoverTrigger>

site/src/pages/WorkspacePage/WorkspaceNotifications/Notifications.tsx

@@ -1,6 +1,6 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import Button, { type ButtonProps } from "@mui/material/Button";
 import type { AlertProps } from "components/Alert/Alert";
+import { Button, type ButtonProps } from "components/Button/Button";
 import { Pill } from "components/Pill/Pill";
 import {
 	Popover,
@@ -89,28 +89,13 @@ const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
 			{notification.detail && (
 				<p css={styles.notificationDetail}>{notification.detail}</p>
 			)}
-			<div css={{ marginTop: 8 }}>{notification.actions}</div>
+			<div className="mt-2 flex items-center gap-1">{notification.actions}</div>
 		</article>
 	);
 };
 
 export const NotificationActionButton: FC<ButtonProps> = (props) => {
-	return (
-		<Button
-			variant="text"
-			css={{
-				textDecoration: "underline",
-				paddingLeft: 0,
-				paddingRight: 8,
-				paddingTop: 0,
-				paddingBottom: 0,
-				height: "auto",
-				minWidth: "auto",
-				"&:hover": { background: "none", textDecoration: "underline" },
-			}}
-			{...props}
-		/>
-	);
+	return <Button variant="outline" size="sm" {...props} />;
 };
 
 const styles = {