Skip to content

Commit 2fbeb68

Browse files
BrunoQuaresmaBrunoQuaresma
committed
chore: replace MUI Button - 1
1 parent bbceebd commit 2fbeb68

File tree

8 files changed

+82
-88
lines changed

8 files changed

+82
-88
lines changed

‎site/src/components/PaginationWidget/PageButtons.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
2+
import { Button } from "components/Button/Button";
33
import type { FC, ReactNode } from "react";
4+
import { cn } from "utils/cn";
45

56
type NumberedPageButtonProps = {
67
pageNumber: number;
@@ -72,18 +73,22 @@ const BasePageButton: FC<BasePageButtonProps> = ({
7273

7374
return (
7475
<Button
75-
css={
76-
highlighted && {
76+
variant="outline"
77+
size="sm"
78+
style={
79+
highlighted ? {
7780
borderColor: theme.roles.active.outline,
7881
backgroundColor: theme.roles.active.background,
79-
80-
// Override the hover state with active colors, but not hover
81-
// colors because clicking won't do anything.
82-
"&:hover": {
83-
borderColor: theme.roles.active.outline,
84-
backgroundColor: theme.roles.active.background,
85-
},
86-
}
82+
// Define CSS variables to use in hover styles
83+
"--active-border-color": theme.roles.active.outline,
84+
"--active-bg-color": theme.roles.active.background,
85+
} : undefined
86+
}
87+
className={
88+
highlighted ? cn(
89+
// Override default hover styles for highlighted buttons
90+
"hover:!border-[color:var(--active-border-color)] hover:!bg-[color:var(--active-bg-color)]"
91+
) : undefined
8792
}
8893
aria-label={ariaLabel}
8994
name={name}
@@ -113,4 +118,4 @@ function getNumberedButtonLabel(
113118
}
114119

115120
return `Page ${page}`;
116-
}
121+
}

‎site/src/components/PaginationWidget/PaginationNavButton.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
31
import Tooltip from "@mui/material/Tooltip";
2+
import { Button } from "components/Button/Button";
43
import {
54
type ButtonHTMLAttributes,
65
type ReactNode,
@@ -32,7 +31,6 @@ function PaginationNavButtonCore({
3231
disabledMessageTimeout = 3000,
3332
...delegatedProps
3433
}: PaginationNavButtonProps) {
35-
const theme = useTheme();
3634
const [showDisabledMessage, setShowDisabledMessage] = useState(false);
3735

3836
// Inline state sync - this is safe/recommended by the React team in this case
@@ -63,18 +61,10 @@ function PaginationNavButtonCore({
6361
* (mostly for giving direct UI feedback to those actions)
6462
*/}
6563
<Button
64+
variant="outline"
65+
size="sm"
6666
aria-disabled={disabled}
67-
css={
68-
disabled && {
69-
borderColor: theme.palette.divider,
70-
color: theme.palette.text.disabled,
71-
cursor: "default",
72-
"&:hover": {
73-
backgroundColor: theme.palette.background.default,
74-
borderColor: theme.palette.divider,
75-
},
76-
}
77-
}
67+
className={disabled ? "cursor-default" : undefined}
7868
onClick={() => {
7969
if (disabled) {
8070
setShowDisabledMessage(true);

‎site/src/modules/resources/DownloadAgentLogsButton.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import DownloadOutlined from "@mui/icons-material/DownloadOutlined";
2-
import Button from "@mui/material/Button";
2+
import { Button } from "components/Button/Button";
33
import { agentLogs } from "api/queries/workspaces";
44
import type { WorkspaceAgent, WorkspaceAgentLog } from "api/typesGenerated";
55
import { displayError } from "components/GlobalSnackbar/utils";
@@ -35,10 +35,9 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
3535

3636
return (
3737
<Button
38-
startIcon={<DownloadOutlined />}
3938
disabled={!isConnected || isDownloading}
40-
variant="text"
41-
size="small"
39+
variant="subtle"
40+
size="sm"
4241
onClick={async () => {
4342
try {
4443
setIsDownloading(true);
@@ -57,7 +56,8 @@ export const DownloadAgentLogsButton: FC<DownloadAgentLogsButtonProps> = ({
5756
}
5857
}}
5958
>
59+
<DownloadOutlined />
6060
{isDownloading ? "Downloading..." : "Download logs"}
6161
</Button>
6262
);
63-
};
63+
};

‎site/src/modules/resources/PortForwardButton.tsx

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
import LockIcon from "@mui/icons-material/Lock";
33
import LockOpenIcon from "@mui/icons-material/LockOpen";
44
import SensorsIcon from "@mui/icons-material/Sensors";
5-
import MUIButton from "@mui/material/Button";
65
import CircularProgress from "@mui/material/CircularProgress";
76
import FormControl from "@mui/material/FormControl";
87
import Link from "@mui/material/Link";
@@ -77,26 +76,24 @@ export const PortForwardButton: FC<PortForwardButtonProps> = (props) => {
7776
return (
7877
<Popover>
7978
<PopoverTrigger>
80-
<MUIButton
79+
<Button
8180
disabled={!portsQuery.data}
82-
size="small"
83-
variant="text"
84-
endIcon={<ChevronDownIcon className="size-4" />}
81+
size="sm"
82+
variant="subtle"
8583
css={{ fontSize: 13, padding: "8px 12px" }}
86-
startIcon={
87-
portsQuery.data ? (
88-
<div>
89-
<span css={styles.portCount}>
90-
{portsQuery.data.ports.length}
91-
</span>
92-
</div>
93-
) : (
94-
<CircularProgress size={10} />
95-
)
96-
}
9784
>
85+
{portsQuery.data ? (
86+
<div>
87+
<span css={styles.portCount}>
88+
{portsQuery.data.ports.length}
89+
</span>
90+
</div>
91+
) : (
92+
<CircularProgress size={10} />
93+
)}
9894
Open ports
99-
</MUIButton>
95+
<ChevronDownIcon className="size-4" />
96+
</Button>
10097
</PopoverTrigger>
10198
<PopoverContent horizontal="right" classes={{ paper }}>
10299
<PortForwardPopoverView
@@ -297,10 +294,10 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
297294
required
298295
css={styles.newPortInput}
299296
/>
300-
<MUIButton
297+
<Button
301298
type="submit"
302-
size="small"
303-
variant="text"
299+
size="sm"
300+
variant="subtle"
304301
css={{
305302
paddingLeft: 12,
306303
paddingRight: 12,
@@ -314,7 +311,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
314311
color: theme.palette.text.primary,
315312
}}
316313
/>
317-
</MUIButton>
314+
</Button>
318315
</form>
319316
</Stack>
320317
</Stack>
@@ -369,9 +366,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
369366
alignItems="center"
370367
>
371368
{canSharePorts && (
372-
<MUIButton
373-
size="small"
374-
variant="text"
369+
<Button
370+
size="sm"
371+
variant="subtle"
375372
onClick={async () => {
376373
await upsertSharedPortMutation.mutateAsync({
377374
agent_name: agent.name,
@@ -383,7 +380,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
383380
}}
384381
>
385382
Share
386-
</MUIButton>
383+
</Button>
387384
)}
388385
</Stack>
389386
</Stack>
@@ -483,9 +480,9 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
483480
)}
484481
</Select>
485482
</FormControl>
486-
<MUIButton
487-
size="small"
488-
variant="text"
483+
<Button
484+
size="sm"
485+
variant="subtle"
489486
css={styles.deleteButton}
490487
onClick={async () => {
491488
await deleteSharedPortMutation.mutateAsync({
@@ -502,7 +499,7 @@ export const PortForwardPopoverView: FC<PortForwardPopoverViewProps> = ({
502499
color: theme.palette.text.primary,
503500
}}
504501
/>
505-
</MUIButton>
502+
</Button>
506503
</Stack>
507504
</Stack>
508505
);

‎site/src/modules/resources/SSHButton/SSHButton.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
2+
import { Button } from "components/Button/Button";
33
import { CodeExample } from "components/CodeExample/CodeExample";
44
import {
55
HelpTooltipLink,
@@ -34,12 +34,12 @@ export const AgentSSHButton: FC<AgentSSHButtonProps> = ({
3434
<Popover>
3535
<PopoverTrigger>
3636
<Button
37-
size="small"
38-
variant="text"
39-
endIcon={<ChevronDownIcon className="size-4" />}
37+
size="sm"
38+
variant="subtle"
4039
css={{ fontSize: 13, padding: "8px 12px" }}
4140
>
4241
Connect via SSH
42+
<ChevronDownIcon className="size-4 ml-2" />
4343
</Button>
4444
</PopoverTrigger>
4545

@@ -96,12 +96,12 @@ export const AgentDevcontainerSSHButton: FC<
9696
<Popover>
9797
<PopoverTrigger>
9898
<Button
99-
size="small"
100-
variant="text"
101-
endIcon={<ChevronDownIcon className="size-4" />}
99+
size="sm"
100+
variant="subtle"
102101
css={{ fontSize: 13, padding: "8px 12px" }}
103102
>
104103
Connect via SSH
104+
<ChevronDownIcon className="size-4 ml-2" />
105105
</Button>
106106
</PopoverTrigger>
107107

@@ -163,4 +163,4 @@ const styles = {
163163
codeExampleLabel: {
164164
fontSize: 12,
165165
},
166-
} satisfies Record<string, Interpolation<Theme>>;
166+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.tsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
2+
import { Button } from "components/Button/Button";
33
import Link from "@mui/material/Link";
44
import type { TemplateExample } from "api/typesGenerated";
55
import { ExternalImage } from "components/ExternalImage/ExternalImage";
@@ -54,15 +54,16 @@ export const TemplateExampleCard: FC<TemplateExampleCardProps> = ({
5454
</span>
5555
</div>
5656

57-
<div css={styles.useButtonContainer}>
58-
<Button
59-
component={RouterLink}
60-
fullWidth
61-
to={`/templates/new?exampleId=${example.id}`}
62-
>
63-
Use template
64-
</Button>
65-
</div>
57+
<div css={styles.useButtonContainer}>
58+
<Button
59+
asChild
60+
className="w-full"
61+
>
62+
<RouterLink to={`/templates/new?exampleId=${example.id}`}>
63+
Use template
64+
</RouterLink>
65+
</Button>
66+
</div>
6667
</div>
6768
);
6869
};

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTheme } from "@emotion/react";
22
import SendIcon from "@mui/icons-material/Send";
3-
import Button from "@mui/material/Button";
3+
import { Button } from "components/Button/Button";
44
import IconButton from "@mui/material/IconButton";
55
import Paper from "@mui/material/Paper";
66
import Stack from "@mui/material/Stack";
@@ -89,19 +89,19 @@ const ChatLanding: FC = () => {
8989
sx={{ mb: 2 }}
9090
>
9191
<Button
92-
variant="outlined"
92+
variant="outline"
9393
onClick={() => setInput("Help me work on issue #...")}
9494
>
9595
Work on Issue
9696
</Button>
9797
<Button
98-
variant="outlined"
98+
variant="outline"
9999
onClick={() => setInput("Help me build a template for...")}
100100
>
101101
Build a Template
102102
</Button>
103103
<Button
104-
variant="outlined"
104+
variant="outline"
105105
onClick={() => setInput("Help me start a new project using...")}
106106
>
107107
Start a Project
@@ -161,4 +161,4 @@ const ChatLanding: FC = () => {
161161
);
162162
};
163163

164-
export default ChatLanding;
164+
export default ChatLanding;

‎site/src/pages/TemplatesPage/EmptyTemplates.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
2+
import { Button } from "components/Button/Button";
33
import Link from "@mui/material/Link";
44
import type { TemplateExample } from "api/typesGenerated";
55
import { CodeExample } from "components/CodeExample/CodeExample";
@@ -79,12 +79,13 @@ export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
7979
</div>
8080

8181
<Button
82-
size="small"
83-
component={RouterLink}
84-
to="/starter-templates"
82+
size="sm"
83+
asChild
8584
css={{ borderRadius: 9999 }}
8685
>
87-
View all starter templates
86+
<RouterLink to="/starter-templates">
87+
View all starter templates
88+
</RouterLink>
8889
</Button>
8990
</Stack>
9091
}

0 commit comments

Comments
 (0)