Skip to content

Commit 2f4ca0f

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 6) (#10298)
1 parent a49e6b8 commit 2f4ca0f

File tree

4 files changed

+68
-106
lines changed

4 files changed

+68
-106
lines changed

‎site/src/components/Resources/AgentOutdatedTooltip.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ComponentProps, FC } from "react";
2-
import { makeStyles } from "@mui/styles";
1+
import { type ComponentProps, type FC } from "react";
2+
import { useTheme } from "@emotion/react";
33
import RefreshIcon from "@mui/icons-material/RefreshOutlined";
44
import {
55
HelpTooltipText,
@@ -9,7 +9,7 @@ import {
99
HelpTooltipLinksGroup,
1010
HelpTooltipContext,
1111
} from "components/HelpTooltip/HelpTooltip";
12-
import { WorkspaceAgent } from "api/typesGenerated";
12+
import type { WorkspaceAgent } from "api/typesGenerated";
1313
import { Stack } from "components/Stack/Stack";
1414

1515
type AgentOutdatedTooltipProps = ComponentProps<typeof HelpPopover> & {
@@ -28,7 +28,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
2828
onClose,
2929
anchorEl,
3030
}) => {
31-
const styles = useStyles();
31+
const theme = useTheme();
32+
const versionLabelStyles = {
33+
fontWeight: 600,
34+
color: theme.palette.text.primary,
35+
};
3236

3337
return (
3438
<HelpPopover
@@ -50,12 +54,12 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
5054
</div>
5155

5256
<Stack spacing={0.5}>
53-
<span className={styles.versionLabel}>Agent version</span>
57+
<span css={versionLabelStyles}>Agent version</span>
5458
<span>{agent.version}</span>
5559
</Stack>
5660

5761
<Stack spacing={0.5}>
58-
<span className={styles.versionLabel}>Server version</span>
62+
<span css={versionLabelStyles}>Server version</span>
5963
<span>{serverVersion}</span>
6064
</Stack>
6165

@@ -73,10 +77,3 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
7377
</HelpPopover>
7478
);
7579
};
76-
77-
const useStyles = makeStyles((theme) => ({
78-
versionLabel: {
79-
fontWeight: 600,
80-
color: theme.palette.text.primary,
81-
},
82-
}));

‎site/src/components/Resources/AppLink/AppLink.tsx

Lines changed: 26 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
import CircularProgress from "@mui/material/CircularProgress";
22
import Link from "@mui/material/Link";
3-
import { makeStyles } from "@mui/styles";
43
import Tooltip from "@mui/material/Tooltip";
54
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
5+
import { type FC, useState } from "react";
6+
import { useTheme } from "@emotion/react";
7+
import { getApiKey } from "api/api";
8+
import type * as TypesGen from "api/typesGenerated";
9+
import { useProxy } from "contexts/ProxyContext";
610
import { PrimaryAgentButton } from "components/Resources/AgentButton";
7-
import { FC, useState } from "react";
8-
import { combineClasses } from "utils/combineClasses";
9-
import * as TypesGen from "api/typesGenerated";
11+
import { createAppLinkHref } from "utils/apps";
1012
import { generateRandomString } from "utils/random";
1113
import { BaseIcon } from "./BaseIcon";
1214
import { ShareIcon } from "./ShareIcon";
13-
import { useProxy } from "contexts/ProxyContext";
14-
import { createAppLinkHref } from "utils/apps";
15-
import { getApiKey } from "api/api";
1615

1716
const Language = {
1817
appTitle: (appName: string, identifier: string): string =>
@@ -31,7 +30,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
3130
const appsHost = proxy.preferredWildcardHostname;
3231
const [fetchingSessionToken, setFetchingSessionToken] = useState(false);
3332

34-
const styles = useStyles();
33+
const theme = useTheme();
3534
const username = workspace.owner_name;
3635

3736
let appSlug = app.slug;
@@ -65,12 +64,18 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
6564
}
6665
if (app.health === "unhealthy") {
6766
canClick = false;
68-
icon = <ErrorOutlineIcon className={styles.unhealthyIcon} />;
67+
icon = <ErrorOutlineIcon css={{ color: theme.palette.warning.light }} />;
6968
primaryTooltip = "Unhealthy";
7069
}
7170
if (!appsHost && app.subdomain) {
7271
canClick = false;
73-
icon = <ErrorOutlineIcon className={styles.notConfiguredIcon} />;
72+
icon = (
73+
<ErrorOutlineIcon
74+
css={{
75+
color: theme.palette.grey[300],
76+
}}
77+
/>
78+
);
7479
primaryTooltip =
7580
"Your admin has not configured subdomain application access";
7681
}
@@ -86,7 +91,13 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
8691
endIcon={isPrivateApp ? undefined : <ShareIcon app={app} />}
8792
disabled={!canClick}
8893
>
89-
<span className={combineClasses({ [styles.appName]: !isPrivateApp })}>
94+
<span
95+
css={
96+
!isPrivateApp && {
97+
marginRight: theme.spacing(1),
98+
}
99+
}
100+
>
90101
{appDisplayName}
91102
</span>
92103
</PrimaryAgentButton>
@@ -98,7 +109,10 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
98109
<Link
99110
href={href}
100111
target="_blank"
101-
className={canClick ? styles.link : styles.disabledLink}
112+
css={{
113+
pointerEvents: canClick ? undefined : "none",
114+
textDecoration: "none !important",
115+
}}
102116
onClick={
103117
canClick
104118
? async (event) => {
@@ -143,26 +157,3 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
143157
</Tooltip>
144158
);
145159
};
146-
147-
const useStyles = makeStyles((theme) => ({
148-
link: {
149-
textDecoration: "none !important",
150-
},
151-
152-
disabledLink: {
153-
pointerEvents: "none",
154-
textDecoration: "none !important",
155-
},
156-
157-
unhealthyIcon: {
158-
color: theme.palette.warning.light,
159-
},
160-
161-
notConfiguredIcon: {
162-
color: theme.palette.grey[300],
163-
},
164-
165-
appName: {
166-
marginRight: theme.spacing(1),
167-
},
168-
}));

‎site/src/components/Resources/PortForwardButton.tsx

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1+
import Box from "@mui/material/Box";
12
import Link from "@mui/material/Link";
23
import Popover from "@mui/material/Popover";
3-
import { makeStyles } from "@mui/styles";
4+
import CircularProgress from "@mui/material/CircularProgress";
5+
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
6+
import { css } from "@emotion/css";
7+
import { useTheme } from "@emotion/react";
48
import { useRef, useState } from "react";
9+
import { useQuery } from "react-query";
510
import { colors } from "theme/colors";
611
import {
712
HelpTooltipLink,
@@ -11,16 +16,12 @@ import {
1116
} from "components/HelpTooltip/HelpTooltip";
1217
import { SecondaryAgentButton } from "components/Resources/AgentButton";
1318
import { docs } from "utils/docs";
14-
import Box from "@mui/material/Box";
15-
import { useQuery } from "react-query";
1619
import { getAgentListeningPorts } from "api/api";
17-
import {
20+
import type {
1821
WorkspaceAgent,
1922
WorkspaceAgentListeningPort,
2023
} from "api/typesGenerated";
21-
import CircularProgress from "@mui/material/CircularProgress";
2224
import { portForwardURL } from "utils/portForward";
23-
import OpenInNewOutlined from "@mui/icons-material/OpenInNewOutlined";
2425

2526
export interface PortForwardButtonProps {
2627
host: string;
@@ -30,10 +31,10 @@ export interface PortForwardButtonProps {
3031
}
3132

3233
export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
34+
const theme = useTheme();
3335
const anchorRef = useRef<HTMLButtonElement>(null);
3436
const [isOpen, setIsOpen] = useState(false);
3537
const id = isOpen ? "schedule-popover" : undefined;
36-
const styles = useStyles();
3738
const portsQuery = useQuery({
3839
queryKey: ["portForward", props.agent.id],
3940
queryFn: () => getAgentListeningPorts(props.agent.id),
@@ -78,7 +79,14 @@ export const PortForwardButton: React.FC<PortForwardButtonProps> = (props) => {
7879
)}
7980
</SecondaryAgentButton>
8081
<Popover
81-
classes={{ paper: styles.popoverPaper }}
82+
classes={{
83+
paper: css`
84+
padding: 0;
85+
width: ${theme.spacing(38)};
86+
color: ${theme.palette.text.secondary};
87+
margin-top: ${theme.spacing(0.5)};
88+
`,
89+
}}
8290
id={id}
8391
open={isOpen}
8492
anchorEl={anchorRef.current}
@@ -245,31 +253,3 @@ export const PortForwardPopoverView: React.FC<
245253
</>
246254
);
247255
};
248-
249-
const useStyles = makeStyles((theme) => ({
250-
popoverPaper: {
251-
padding: 0,
252-
width: theme.spacing(38),
253-
color: theme.palette.text.secondary,
254-
marginTop: theme.spacing(0.5),
255-
},
256-
257-
openUrlButton: {
258-
flexShrink: 0,
259-
},
260-
261-
portField: {
262-
// The default border don't contrast well with the popover
263-
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
264-
borderColor: colors.gray[10],
265-
},
266-
},
267-
268-
code: {
269-
margin: theme.spacing(2, 0),
270-
},
271-
272-
form: {
273-
margin: theme.spacing(2, 0),
274-
},
275-
}));

‎site/src/components/SettingsLayout/Section.tsx

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { makeStyles } from "@mui/styles";
1+
import { useTheme } from "@emotion/react";
22
import Typography from "@mui/material/Typography";
3-
import { FC, ReactNode, PropsWithChildren } from "react";
3+
import { type FC, type ReactNode, type PropsWithChildren } from "react";
44
import { SectionAction } from "./SectionAction";
5+
import { type Interpolation, type Theme } from "@emotion/react";
56

67
type SectionLayout = "fixed" | "fluid";
78

@@ -31,31 +32,30 @@ export const Section: SectionFC = ({
3132
children,
3233
layout = "fixed",
3334
}) => {
34-
const styles = useStyles({ layout });
35+
const theme = useTheme();
36+
3537
return (
3638
<section className={className} id={id} data-testid={id}>
37-
<div className={styles.inner}>
39+
<div css={{ maxWidth: layout === "fluid" ? "100%" : 500 }}>
3840
{(title || description) && (
39-
<div className={styles.header}>
41+
<div css={styles.header}>
4042
<div>
4143
{title && (
4244
<Typography variant="h4" sx={{ fontSize: 24 }}>
4345
{title}
4446
</Typography>
4547
)}
4648
{description && typeof description === "string" && (
47-
<Typography className={styles.description}>
48-
{description}
49-
</Typography>
49+
<Typography css={styles.description}>{description}</Typography>
5050
)}
5151
{description && typeof description !== "string" && (
52-
<div className={styles.description}>{description}</div>
52+
<div css={styles.description}>{description}</div>
5353
)}
5454
</div>
5555
{toolbar && <div>{toolbar}</div>}
5656
</div>
5757
)}
58-
{alert && <div className={styles.alert}>{alert}</div>}
58+
{alert && <div css={{ marginBottom: theme.spacing(1) }}>{alert}</div>}
5959
{children}
6060
</div>
6161
</section>
@@ -65,23 +65,17 @@ export const Section: SectionFC = ({
6565
// Sub-components
6666
Section.Action = SectionAction;
6767

68-
const useStyles = makeStyles((theme) => ({
69-
inner: ({ layout }: { layout: SectionLayout }) => ({
70-
maxWidth: layout === "fluid" ? "100%" : 500,
71-
}),
72-
alert: {
73-
marginBottom: theme.spacing(1),
74-
},
75-
header: {
68+
const styles = {
69+
header: (theme) => ({
7670
marginBottom: theme.spacing(3),
7771
display: "flex",
7872
flexDirection: "row",
7973
justifyContent: "space-between",
80-
},
81-
description: {
74+
}),
75+
description: (theme) => ({
8276
color: theme.palette.text.secondary,
8377
fontSize: 16,
8478
marginTop: theme.spacing(0.5),
8579
lineHeight: "140%",
86-
},
87-
}));
80+
}),
81+
} satisfies Record<string, Interpolation<Theme>>;

0 commit comments

Comments
 (0)