Skip to content

Commit f35a1bc

Browse files
BrunoQuaresmaBrunoQuaresma
authored
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
1 parent cbfe975 commit f35a1bc

File tree

5 files changed

+26
-50
lines changed

5 files changed

+26
-50
lines changed

‎site/src/components/Filter/Filter.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import Divider from "@mui/material/Divider";
43
import Menu from "@mui/material/Menu";
54
import MenuItem from "@mui/material/MenuItem";
@@ -10,6 +9,7 @@ import {
109
hasError,
1110
isApiValidationError,
1211
} from "api/errors";
12+
import { Button } from "components/Button/Button";
1313
import { InputGroup } from "components/InputGroup/InputGroup";
1414
import { SearchField } from "components/SearchField/SearchField";
1515
import { useDebouncedFunction } from "hooks/debounce";
@@ -267,9 +267,11 @@ const PresetMenu: FC<PresetMenuProps> = ({
267267
<Button
268268
onClick={() => setIsOpen(true)}
269269
ref={anchorRef}
270-
endIcon={<ChevronDownIcon className="size-4" />}
270+
variant="outline"
271+
className="h-9"
271272
>
272273
Filters
274+
<ChevronDownIcon />
273275
</Button>
274276
<Menu
275277
id="filter-menu"

‎site/src/pages/ChatPage/ChatLayout.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import List from "@mui/material/List";
43
import ListItem from "@mui/material/ListItem";
54
import ListItemButton from "@mui/material/ListItemButton";
@@ -9,6 +8,7 @@ import { createChat, getChats } from "api/queries/chats";
98
import { deploymentLanguageModels } from "api/queries/deployment";
109
import type { LanguageModelConfig } from "api/typesGenerated";
1110
import { ErrorAlert } from "components/Alert/ErrorAlert";
11+
import { Button } from "components/Button/Button";
1212
import { Loader } from "components/Loader/Loader";
1313
import { Margins } from "components/Margins/Margins";
1414
import { useAgenticChat } from "contexts/useAgenticChat";
@@ -167,16 +167,12 @@ export const ChatLayout: FC = () => {
167167
Chats
168168
</div>
169169
<Button
170-
variant="outlined"
171-
size="small"
172-
startIcon={<PlusIcon className="size-icon-sm" />}
170+
variant="outline"
171+
size="sm"
173172
onClick={handleNewChat}
174173
disabled={createChatMutation.isLoading}
175-
css={{
176-
lineHeight: 1.5,
177-
padding: theme.spacing(0.5, 1.5),
178-
}}
179174
>
175+
<PlusIcon />
180176
New Chat
181177
</Button>
182178
</div>

‎site/src/pages/StarterTemplatePage/StarterTemplatePageView.tsx

Lines changed: 11 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import type { TemplateExample } from "api/typesGenerated";
43
import { ErrorAlert } from "components/Alert/ErrorAlert";
4+
import { Button } from "components/Button/Button";
55
import { ExternalImage } from "components/ExternalImage/ExternalImage";
66
import { Loader } from "components/Loader/Loader";
77
import { Margins } from "components/Margins/Margins";
@@ -44,22 +44,17 @@ export const StarterTemplatePageView: FC<StarterTemplatePageViewProps> = ({
4444
<PageHeader
4545
actions={
4646
<>
47-
<Button
48-
component="a"
49-
target="_blank"
50-
href={starterTemplate.url}
51-
rel="noreferrer"
52-
startIcon={<ExternalLinkIcon className="size-icon-sm" />}
53-
>
54-
View source code
47+
<Button asChild variant="outline" size="sm">
48+
<a target="_blank" href={starterTemplate.url} rel="noreferrer">
49+
<ExternalLinkIcon />
50+
View source code
51+
</a>
5552
</Button>
56-
<Button
57-
variant="contained"
58-
component={Link}
59-
to={`/templates/new?exampleId=${starterTemplate.id}`}
60-
startIcon={<PlusIcon className="size-icon-sm" />}
61-
>
62-
Use template
53+
<Button asChild size="sm">
54+
<Link to={`/templates/new?exampleId=${starterTemplate.id}`}>
55+
<PlusIcon />
56+
Use template
57+
</Link>
6358
</Button>
6459
</>
6560
}

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

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import "react-date-range/dist/styles.css";
22
import "react-date-range/dist/theme/default.css";
33
import type { Interpolation, Theme } from "@emotion/react";
4-
import ArrowRightAltOutlined from "@mui/icons-material/ArrowRightAltOutlined";
5-
import Button from "@mui/material/Button";
4+
import { Button } from "components/Button/Button";
65
import {
76
Popover,
87
PopoverContent,
@@ -17,6 +16,7 @@ import {
1716
startOfHour,
1817
subDays,
1918
} from "date-fns";
19+
import { MoveRightIcon } from "lucide-react";
2020
import { type ComponentProps, type FC, useRef, useState } from "react";
2121
import { DateRangePicker, createStaticRanges } from "react-date-range";
2222

@@ -54,11 +54,9 @@ export const DateRange: FC<DateRangeProps> = ({ value, onChange }) => {
5454
return (
5555
<Popover open={open} onOpenChange={setOpen}>
5656
<PopoverTrigger>
57-
<Button>
57+
<Button variant="outline">
5858
<span>{format(value.startDate, "MMM d, Y")}</span>
59-
<ArrowRightAltOutlined
60-
css={{ width: 16, height: 16, marginLeft: 8, marginRight: 8 }}
61-
/>
59+
<MoveRightIcon />
6260
<span>{format(value.endDate, "MMM d, Y")}</span>
6361
</Button>
6462
</PopoverTrigger>

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

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { type Interpolation, type Theme, useTheme } from "@emotion/react";
2-
import Button, { type ButtonProps } from "@mui/material/Button";
32
import type { AlertProps } from "components/Alert/Alert";
3+
import { Button, type ButtonProps } from "components/Button/Button";
44
import { Pill } from "components/Pill/Pill";
55
import {
66
Popover,
@@ -89,28 +89,13 @@ const NotificationItem: FC<NotificationItemProps> = ({ notification }) => {
8989
{notification.detail && (
9090
<p css={styles.notificationDetail}>{notification.detail}</p>
9191
)}
92-
<div css={{ marginTop: 8 }}>{notification.actions}</div>
92+
<div className="mt-2 flex items-center gap-1">{notification.actions}</div>
9393
</article>
9494
);
9595
};
9696

9797
export const NotificationActionButton: FC<ButtonProps> = (props) => {
98-
return (
99-
<Button
100-
variant="text"
101-
css={{
102-
textDecoration: "underline",
103-
paddingLeft: 0,
104-
paddingRight: 8,
105-
paddingTop: 0,
106-
paddingBottom: 0,
107-
height: "auto",
108-
minWidth: "auto",
109-
"&:hover": { background: "none", textDecoration: "underline" },
110-
}}
111-
{...props}
112-
/>
113-
);
98+
return <Button variant="outline" size="sm" {...props} />;
11499
};
115100

116101
const styles = {

0 commit comments

Comments
 (0)