Skip to content

Commit 7f70a23

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 8) (#10447)
1 parent b3e6a46 commit 7f70a23

File tree

22 files changed

+512
-599
lines changed

22 files changed

+512
-599
lines changed

‎site/src/components/Stats/Stats.tsx

+21-33
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,28 @@
1-
import Box from "@mui/material/Box"
2-
import { makeStyles } from "@mui/styles"
3-
import { ComponentProps, FC, PropsWithChildren } from "react"
4-
import { combineClasses } from "utils/combineClasses"
1+
import { type CSSObject, type Interpolation, type Theme } from "@emotion/react";
2+
import Box from "@mui/material/Box";
3+
import { type ComponentProps, type FC } from "react";
54

65
export const Stats: FC<ComponentProps<typeof Box>> = (props) => {
7-
const styles = useStyles()
8-
return (
9-
<Box
10-
{...props}
11-
className={combineClasses([styles.stats, props.className])}
12-
/>
13-
)
14-
}
6+
return <Box {...props} css={styles.stats} />;
7+
};
158

169
export const StatsItem: FC<
1710
{
18-
label: string
19-
value: string | number | JSX.Element
11+
label: string;
12+
value: string | number | JSX.Element;
2013
} & ComponentProps<typeof Box>
2114
> = ({ label, value, ...divProps }) => {
22-
const styles = useStyles()
23-
2415
return (
25-
<Box
26-
{...divProps}
27-
className={combineClasses([styles.statItem, divProps.className])}
28-
>
29-
<span className={styles.statsLabel}>{label}:</span>
30-
<span className={styles.statsValue}>{value}</span>
16+
<Box {...divProps} css={styles.statItem}>
17+
<span css={styles.statsLabel}>{label}:</span>
18+
<span css={styles.statsValue}>{value}</span>
3119
</Box>
32-
)
33-
}
20+
);
21+
};
3422

35-
const useStyles = makeStyles((theme) => ({
36-
stats: {
37-
...theme.typography.body2,
23+
const styles = {
24+
stats: (theme) => ({
25+
...(theme.typography.body2 as CSSObject),
3826
paddingLeft: theme.spacing(2),
3927
paddingRight: theme.spacing(2),
4028
borderRadius: theme.shape.borderRadius,
@@ -49,9 +37,9 @@ const useStyles = makeStyles((theme) => ({
4937
display: "block",
5038
padding: theme.spacing(2),
5139
},
52-
},
40+
}),
5341

54-
statItem: {
42+
statItem: (theme) => ({
5543
padding: theme.spacing(1.75),
5644
paddingLeft: theme.spacing(2),
5745
paddingRight: theme.spacing(2),
@@ -62,14 +50,14 @@ const useStyles = makeStyles((theme) => ({
6250
[theme.breakpoints.down("md")]: {
6351
padding: theme.spacing(1),
6452
},
65-
},
53+
}),
6654

6755
statsLabel: {
6856
display: "block",
6957
wordWrap: "break-word",
7058
},
7159

72-
statsValue: {
60+
statsValue: (theme) => ({
7361
marginTop: theme.spacing(0.25),
7462
display: "flex",
7563
wordWrap: "break-word",
@@ -85,5 +73,5 @@ const useStyles = makeStyles((theme) => ({
8573
textDecoration: "underline",
8674
},
8775
},
88-
},
89-
}))
76+
}),
77+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/WorkspaceBuildLogs/Logs.tsx

+28-38
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { LogLevel } from "api/typesGenerated";
1+
import { type Interpolation, type Theme } from "@emotion/react";
2+
import type { LogLevel } from "api/typesGenerated";
33
import dayjs from "dayjs";
4-
import { FC, useMemo } from "react";
5-
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
6-
import { combineClasses } from "utils/combineClasses";
4+
import { type FC, type ReactNode, useMemo } from "react";
75
import AnsiToHTML from "ansi-to-html";
6+
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
87

98
export interface Line {
109
time: string;
@@ -24,19 +23,17 @@ export const Logs: FC<React.PropsWithChildren<LogsProps>> = ({
2423
lines,
2524
className = "",
2625
}) => {
27-
const styles = useStyles();
28-
2926
return (
30-
<div className={combineClasses([className, styles.root])}>
31-
<div className={styles.scrollWrapper}>
27+
<div css={styles.root} className={className}>
28+
<div css={styles.scrollWrapper}>
3229
{lines.map((line, idx) => (
33-
<div className={combineClasses([styles.line, line.level])} key={idx}>
30+
<div css={styles.line} className={line.level} key={idx}>
3431
{!hideTimestamps && (
3532
<>
36-
<span className={styles.time}>
33+
<span css={styles.time}>
3734
{dayjs(line.time).format(`HH:mm:ss.SSS`)}
3835
</span>
39-
<span className={styles.space} />
36+
<span css={styles.space} />
4037
</>
4138
)}
4239
<span>{line.output}</span>
@@ -56,39 +53,32 @@ export const LogLine: FC<{
5653
hideTimestamp?: boolean;
5754
number?: number;
5855
style?: React.CSSProperties;
59-
sourceIcon?: JSX.Element;
56+
sourceIcon?: ReactNode;
6057
maxNumber?: number;
6158
}> = ({ line, hideTimestamp, number, maxNumber, sourceIcon, style }) => {
62-
const styles = useStyles();
6359
const output = useMemo(() => {
6460
return convert.toHtml(line.output.split(/\r/g).pop() as string);
6561
}, [line.output]);
6662
const isUsingLineNumber = number !== undefined;
6763

6864
return (
6965
<div
70-
className={combineClasses([
71-
styles.line,
72-
line.level,
73-
isUsingLineNumber && styles.lineNumber,
74-
])}
66+
css={[styles.line, isUsingLineNumber && styles.lineNumber]}
67+
className={line.level}
7568
style={style}
7669
>
7770
{sourceIcon}
7871
{!hideTimestamp && (
7972
<>
8073
<span
81-
className={combineClasses([
82-
styles.time,
83-
isUsingLineNumber && styles.number,
84-
])}
74+
css={[styles.time, isUsingLineNumber && styles.number]}
8575
style={{
8676
minWidth: `${maxNumber ? maxNumber.toString().length - 1 : 0}em`,
8777
}}
8878
>
8979
{number ? number : dayjs(line.time).format(`HH:mm:ss.SSS`)}
9080
</span>
91-
<span className={styles.space} />
81+
<span css={styles.space} />
9282
</>
9383
)}
9484
<span
@@ -100,8 +90,8 @@ export const LogLine: FC<{
10090
);
10191
};
10292

103-
const useStyles = makeStyles((theme) => ({
104-
root: {
93+
const styles = {
94+
root: (theme) => ({
10595
minHeight: 156,
10696
padding: theme.spacing(1, 0),
10797
borderRadius: theme.shape.borderRadius,
@@ -112,11 +102,11 @@ const useStyles = makeStyles((theme) => ({
112102
borderBottom: `1px solid ${theme.palette.divider}`,
113103
borderRadius: 0,
114104
},
115-
},
105+
}),
116106
scrollWrapper: {
117107
minWidth: "fit-content",
118108
},
119-
line: {
109+
line: (theme) => ({
120110
wordBreak: "break-all",
121111
display: "flex",
122112
alignItems: "center",
@@ -139,24 +129,24 @@ const useStyles = makeStyles((theme) => ({
139129
"&.warn": {
140130
backgroundColor: theme.palette.warning.dark,
141131
},
142-
},
143-
lineNumber: {
132+
}),
133+
lineNumber: (theme) => ({
144134
paddingLeft: theme.spacing(2),
145-
},
146-
space: {
135+
}),
136+
space: (theme) => ({
147137
userSelect: "none",
148138
width: theme.spacing(3),
149139
display: "block",
150140
flexShrink: 0,
151-
},
152-
time: {
141+
}),
142+
time: (theme) => ({
153143
userSelect: "none",
154144
whiteSpace: "pre",
155145
display: "inline-block",
156146
color: theme.palette.text.secondary,
157-
},
158-
number: {
147+
}),
148+
number: (theme) => ({
159149
width: theme.spacing(4),
160150
textAlign: "right",
161-
},
162-
}));
151+
}),
152+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/pages/404Page/404Page.tsx

+18-22
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,30 @@
1-
import { makeStyles } from "@mui/styles";
21
import Typography from "@mui/material/Typography";
3-
import { FC } from "react";
2+
import { type FC } from "react";
43

54
export const NotFoundPage: FC = () => {
6-
const styles = useStyles();
7-
85
return (
9-
<div className={styles.root}>
10-
<div className={styles.headingContainer}>
6+
<div
7+
css={{
8+
width: "100%",
9+
height: "100%",
10+
display: "flex",
11+
flexDirection: "row",
12+
justifyContent: "center",
13+
alignItems: "center",
14+
}}
15+
>
16+
<div
17+
css={(theme) => ({
18+
margin: theme.spacing(1),
19+
padding: theme.spacing(1),
20+
borderRight: theme.palette.divider,
21+
})}
22+
>
1123
<Typography variant="h4">404</Typography>
1224
</div>
1325
<Typography variant="body2">This page could not be found.</Typography>
1426
</div>
1527
);
1628
};
1729

18-
const useStyles = makeStyles((theme) => ({
19-
root: {
20-
width: "100%",
21-
height: "100%",
22-
display: "flex",
23-
flexDirection: "row",
24-
justifyContent: "center",
25-
alignItems: "center",
26-
},
27-
headingContainer: {
28-
margin: theme.spacing(1),
29-
padding: theme.spacing(1),
30-
borderRight: theme.palette.divider,
31-
},
32-
}));
33-
3430
export default NotFoundPage;

0 commit comments

Comments
 (0)