Skip to content

Commit eaea918

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 5) (#10261)
1 parent 4240200 commit eaea918

File tree

28 files changed

+656
-839
lines changed

28 files changed

+656
-839
lines changed

‎site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { css } from "@emotion/css";
22
import { useTheme } from "@emotion/react";
3-
import Popover, { PopoverProps } from "@mui/material/Popover";
3+
import Popover, { type PopoverProps } from "@mui/material/Popover";
44
import type { FC, PropsWithChildren } from "react";
55

66
type BorderedMenuVariant = "user-dropdown";
@@ -18,7 +18,7 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
1818

1919
const paper = css`
2020
width: 260px;
21-
border-radius: ${theme.shape.borderRadius};
21+
border-radius: ${theme.shape.borderRadius}px;
2222
box-shadow: ${theme.shadows[6]};
2323
`;
2424

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SidebarNavItem: FC<
4747
font-size: 14px;
4848
text-decoration: none;
4949
padding: ${theme.spacing(1.5, 1.5, 1.5, 2)};
50-
border-radius: ${theme.shape.borderRadius / 2};
50+
border-radius: ${theme.shape.borderRadius / 2}px;
5151
transition: background-color 0.15s ease-in-out;
5252
margin-bottom: 1;
5353
position: relative;

‎site/src/components/ErrorBoundary/RuntimeErrorState.tsx

+48-51
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import Button from "@mui/material/Button";
22
import Link from "@mui/material/Link";
3-
import { makeStyles } from "@mui/styles";
43
import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
5-
import { BuildInfoResponse } from "api/typesGenerated";
4+
import { type FC, useEffect, useState } from "react";
5+
import { Helmet } from "react-helmet-async";
6+
import { css } from "@emotion/css";
7+
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
8+
import type { BuildInfoResponse } from "api/typesGenerated";
69
import { CopyButton } from "components/CopyButton/CopyButton";
710
import { CoderIcon } from "components/Icons/CoderIcon";
811
import { FullScreenLoader } from "components/Loader/FullScreenLoader";
912
import { Stack } from "components/Stack/Stack";
10-
import { FC, useEffect, useState } from "react";
11-
import { Helmet } from "react-helmet-async";
1213
import { Margins } from "components/Margins/Margins";
1314

1415
const fetchDynamicallyImportedModuleError =
@@ -17,7 +18,7 @@ const fetchDynamicallyImportedModuleError =
1718
export type RuntimeErrorStateProps = { error: Error };
1819

1920
export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
20-
const styles = useStyles();
21+
const theme = useTheme();
2122
const [checkingError, setCheckingError] = useState(true);
2223
const [staticBuildInfo, setStaticBuildInfo] = useState<BuildInfoResponse>();
2324
const coderVersion = staticBuildInfo?.version;
@@ -52,11 +53,11 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
5253
<title>Something went wrong...</title>
5354
</Helmet>
5455
{!checkingError ? (
55-
<Margins className={styles.root}>
56-
<div className={styles.innerRoot}>
57-
<CoderIcon className={styles.logo} />
58-
<h1 className={styles.title}>Something went wrong...</h1>
59-
<p className={styles.text}>
56+
<Margins css={styles.root}>
57+
<div css={{ width: "100%" }}>
58+
<CoderIcon css={styles.logo} />
59+
<h1 css={styles.title}>Something went wrong...</h1>
60+
<p css={styles.text}>
6061
Please try reloading the page, if that doesn&lsquo;t work, you can
6162
ask for help in the{" "}
6263
<Link href="https://discord.gg/coder">
@@ -93,20 +94,33 @@ export const RuntimeErrorState: FC<RuntimeErrorStateProps> = ({ error }) => {
9394
</Button>
9495
</Stack>
9596
{error.stack && (
96-
<div className={styles.stack}>
97-
<div className={styles.stackHeader}>
97+
<div css={styles.stack}>
98+
<div css={styles.stackHeader}>
9899
Stacktrace
99100
<CopyButton
100-
buttonClassName={styles.copyButton}
101+
buttonClassName={css`
102+
background-color: transparent;
103+
border: 0;
104+
border-radius: 999px;
105+
min-height: ${theme.spacing(4)};
106+
min-width: ${theme.spacing(4)};
107+
height: ${theme.spacing(4)};
108+
width: ${theme.spacing(4)};
109+
110+
& svg {
111+
width: 16px;
112+
height: 16px;
113+
}
114+
`}
101115
text={error.stack}
102116
tooltipTitle="Copy stacktrace"
103117
/>
104118
</div>
105-
<pre className={styles.stackCode}>{error.stack}</pre>
119+
<pre css={styles.stackCode}>{error.stack}</pre>
106120
</div>
107121
)}
108122
{coderVersion && (
109-
<div className={styles.version}>Version: {coderVersion}</div>
123+
<div css={styles.version}>Version: {coderVersion}</div>
110124
)}
111125
</div>
112126
</Margins>
@@ -132,8 +146,8 @@ const getStaticBuildInfo = () => {
132146
}
133147
};
134148

135-
const useStyles = makeStyles((theme) => ({
136-
root: {
149+
const styles = {
150+
root: (theme) => ({
137151
paddingTop: theme.spacing(4),
138152
paddingBottom: theme.spacing(4),
139153
textAlign: "center",
@@ -142,36 +156,34 @@ const useStyles = makeStyles((theme) => ({
142156
justifyContent: "center",
143157
minHeight: "100%",
144158
maxWidth: theme.spacing(75),
145-
},
159+
}),
146160

147-
innerRoot: { width: "100%" },
148-
149-
logo: {
161+
logo: (theme) => ({
150162
fontSize: theme.spacing(8),
151-
},
163+
}),
152164

153-
title: {
165+
title: (theme) => ({
154166
fontSize: theme.spacing(4),
155167
fontWeight: 400,
156-
},
168+
}),
157169

158-
text: {
170+
text: (theme) => ({
159171
fontSize: 16,
160172
color: theme.palette.text.secondary,
161173
lineHeight: "160%",
162174
marginBottom: theme.spacing(4),
163-
},
175+
}),
164176

165-
stack: {
177+
stack: (theme) => ({
166178
backgroundColor: theme.palette.background.paper,
167179
border: `1px solid ${theme.palette.divider}`,
168180
borderRadius: 4,
169181
marginTop: theme.spacing(8),
170182
display: "block",
171183
textAlign: "left",
172-
},
184+
}),
173185

174-
stackHeader: {
186+
stackHeader: (theme) => ({
175187
fontSize: 10,
176188
textTransform: "uppercase",
177189
fontWeight: 600,
@@ -184,33 +196,18 @@ const useStyles = makeStyles((theme) => ({
184196
flexAlign: "center",
185197
justifyContent: "space-between",
186198
alignItems: "center",
187-
},
199+
}),
188200

189-
stackCode: {
201+
stackCode: (theme) => ({
190202
padding: theme.spacing(2),
191203
margin: 0,
192204
wordWrap: "break-word",
193205
whiteSpace: "break-spaces",
194-
},
195-
196-
copyButton: {
197-
backgroundColor: "transparent",
198-
border: 0,
199-
borderRadius: 999,
200-
minHeight: theme.spacing(4),
201-
minWidth: theme.spacing(4),
202-
height: theme.spacing(4),
203-
width: theme.spacing(4),
204-
205-
"& svg": {
206-
width: 16,
207-
height: 16,
208-
},
209-
},
210-
211-
version: {
206+
}),
207+
208+
version: (theme) => ({
212209
marginTop: theme.spacing(4),
213210
fontSize: 12,
214211
color: theme.palette.text.secondary,
215-
},
216-
}));
212+
}),
213+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/FileUpload/FileUpload.tsx

+31-36
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { makeStyles } from "@mui/styles";
21
import { Stack } from "components/Stack/Stack";
3-
import { FC, DragEvent, useRef, ReactNode } from "react";
2+
import { type FC, type DragEvent, useRef, type ReactNode } from "react";
43
import UploadIcon from "@mui/icons-material/CloudUploadOutlined";
54
import { useClickable } from "hooks/useClickable";
65
import CircularProgress from "@mui/material/CircularProgress";
7-
import { combineClasses } from "utils/combineClasses";
86
import IconButton from "@mui/material/IconButton";
97
import RemoveIcon from "@mui/icons-material/DeleteOutline";
108
import FileIcon from "@mui/icons-material/FolderOutlined";
9+
import { css, type Interpolation, type Theme } from "@emotion/react";
1110

1211
const useFileDrop = (
1312
callback: (file: File) => void,
@@ -62,7 +61,6 @@ export const FileUpload: FC<FileUploadProps> = ({
6261
extension,
6362
fileTypeRequired,
6463
}) => {
65-
const styles = useStyles();
6664
const inputRef = useRef<HTMLInputElement>(null);
6765
const tarDrop = useFileDrop(onUpload, fileTypeRequired);
6866

@@ -75,7 +73,7 @@ export const FileUpload: FC<FileUploadProps> = ({
7573
if (!isUploading && file) {
7674
return (
7775
<Stack
78-
className={styles.file}
76+
css={styles.file}
7977
direction="row"
8078
justifyContent="space-between"
8179
alignItems="center"
@@ -95,23 +93,20 @@ export const FileUpload: FC<FileUploadProps> = ({
9593
return (
9694
<>
9795
<div
98-
className={combineClasses({
99-
[styles.root]: true,
100-
[styles.disabled]: isUploading,
101-
})}
96+
css={[styles.root, isUploading && styles.disabled]}
10297
{...clickable}
10398
{...tarDrop}
10499
>
105100
<Stack alignItems="center" spacing={1}>
106101
{isUploading ? (
107102
<CircularProgress size={32} />
108103
) : (
109-
<UploadIcon className={styles.icon} />
104+
<UploadIcon css={styles.icon} />
110105
)}
111106

112107
<Stack alignItems="center" spacing={0.5}>
113-
<span className={styles.title}>{title}</span>
114-
<span className={styles.description}>{description}</span>
108+
<span css={styles.title}>{title}</span>
109+
<span css={styles.description}>{description}</span>
115110
</Stack>
116111
</Stack>
117112
</div>
@@ -120,7 +115,7 @@ export const FileUpload: FC<FileUploadProps> = ({
120115
type="file"
121116
data-testid="file-upload"
122117
ref={inputRef}
123-
className={styles.input}
118+
css={styles.input}
124119
accept={extension}
125120
onChange={(event) => {
126121
const file = event.currentTarget.files?.[0];
@@ -133,48 +128,48 @@ export const FileUpload: FC<FileUploadProps> = ({
133128
);
134129
};
135130

136-
const useStyles = makeStyles((theme) => ({
137-
root: {
138-
display: "flex",
139-
alignItems: "center",
140-
justifyContent: "center",
141-
borderRadius: theme.shape.borderRadius,
142-
border: `2px dashed ${theme.palette.divider}`,
143-
padding: theme.spacing(6),
144-
cursor: "pointer",
145-
146-
"&:hover": {
147-
backgroundColor: theme.palette.background.paper,
148-
},
149-
},
131+
const styles = {
132+
root: (theme) => css`
133+
display: flex;
134+
align-items: center;
135+
justify-content: center;
136+
border-radius: ${theme.shape.borderRadius}px;
137+
border: 2px dashed ${theme.palette.divider};
138+
padding: ${theme.spacing(6)};
139+
cursor: pointer;
140+
141+
&:hover {
142+
background-color: ${theme.palette.background.paper};
143+
}
144+
`,
150145

151146
disabled: {
152147
pointerEvents: "none",
153148
opacity: 0.75,
154149
},
155150

156-
icon: {
151+
icon: (theme) => ({
157152
fontSize: theme.spacing(8),
158-
},
153+
}),
159154

160-
title: {
155+
title: (theme) => ({
161156
fontSize: theme.spacing(2),
162-
},
157+
}),
163158

164-
description: {
159+
description: (theme) => ({
165160
color: theme.palette.text.secondary,
166161
textAlign: "center",
167162
maxWidth: theme.spacing(50),
168-
},
163+
}),
169164

170165
input: {
171166
display: "none",
172167
},
173168

174-
file: {
169+
file: (theme) => ({
175170
borderRadius: theme.shape.borderRadius,
176171
border: `1px solid ${theme.palette.divider}`,
177172
padding: theme.spacing(2),
178173
background: theme.palette.background.paper,
179-
},
180-
}));
174+
}),
175+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/FullPageForm/FullPageForm.tsx

+4-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Margins } from "components/Margins/Margins";
2-
import { FC, ReactNode } from "react";
2+
import { type FC, type ReactNode } from "react";
33
import {
44
PageHeader,
55
PageHeaderTitle,
66
PageHeaderSubtitle,
77
} from "components/PageHeader/PageHeader";
8-
import { makeStyles } from "@mui/styles";
8+
import { useTheme } from "@emotion/react";
99

1010
export interface FullPageFormProps {
1111
title: string;
@@ -17,11 +17,11 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
1717
detail,
1818
children,
1919
}) => {
20-
const styles = useStyles();
20+
const theme = useTheme();
2121

2222
return (
2323
<Margins size="small">
24-
<PageHeader className={styles.pageHeader}>
24+
<PageHeader css={{ paddingBottom: theme.spacing(3) }}>
2525
<PageHeaderTitle>{title}</PageHeaderTitle>
2626
{detail && <PageHeaderSubtitle>{detail}</PageHeaderSubtitle>}
2727
</PageHeader>
@@ -30,9 +30,3 @@ export const FullPageForm: FC<React.PropsWithChildren<FullPageFormProps>> = ({
3030
</Margins>
3131
);
3232
};
33-
34-
const useStyles = makeStyles((theme) => ({
35-
pageHeader: {
36-
paddingBottom: theme.spacing(3),
37-
},
38-
}));

0 commit comments

Comments
 (0)