Skip to content

Commit 921b6eb

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 9) (#10474)
1 parent 839a16e commit 921b6eb

File tree

30 files changed

+559
-629
lines changed

30 files changed

+559
-629
lines changed

‎site/src/components/IconField/IconField.tsx

+31-30
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
import { css, Global, useTheme } from "@emotion/react";
12
import Button from "@mui/material/Button";
23
import InputAdornment from "@mui/material/InputAdornment";
3-
import TextField, { TextFieldProps } from "@mui/material/TextField";
4-
import { makeStyles } from "@mui/styles";
4+
import TextField, { type TextFieldProps } from "@mui/material/TextField";
55
import Picker from "@emoji-mart/react";
6-
import { FC } from "react";
6+
import { type FC } from "react";
77
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
88
import { Stack } from "components/Stack/Stack";
99
import { colors } from "theme/colors";
@@ -48,7 +48,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
4848
throw new Error(`Invalid icon value "${typeof textFieldProps.value}"`);
4949
}
5050

51-
const styles = useStyles();
51+
const theme = useTheme();
5252
const hasIcon = textFieldProps.value && textFieldProps.value !== "";
5353

5454
return (
@@ -59,7 +59,21 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
5959
label="Icon"
6060
InputProps={{
6161
endAdornment: hasIcon ? (
62-
<InputAdornment position="end" className={styles.adornment}>
62+
<InputAdornment
63+
position="end"
64+
css={{
65+
width: theme.spacing(3),
66+
height: theme.spacing(3),
67+
display: "flex",
68+
alignItems: "center",
69+
justifyContent: "center",
70+
71+
"& img": {
72+
maxWidth: "100%",
73+
objectFit: "contain",
74+
},
75+
}}
76+
>
6377
<img
6478
alt=""
6579
src={textFieldProps.value}
@@ -85,6 +99,18 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
8599
id="emoji"
86100
css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
87101
>
102+
<Global
103+
styles={css`
104+
em-emoji-picker {
105+
--rgb-background: ${theme.palette.background.paper};
106+
--rgb-input: ${colors.gray[17]};
107+
--rgb-color: ${colors.gray[4]};
108+
109+
// Hack to prevent the right side from being cut off
110+
width: 350px;
111+
}
112+
`}
113+
/>
88114
<Picker
89115
set="twitter"
90116
theme="dark"
@@ -104,29 +130,4 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
104130
);
105131
};
106132

107-
const useStyles = makeStyles((theme) => ({
108-
"@global": {
109-
"em-emoji-picker": {
110-
"--rgb-background": theme.palette.background.paper,
111-
"--rgb-input": colors.gray[17],
112-
"--rgb-color": colors.gray[4],
113-
114-
// Hack to prevent the right side from being cut off
115-
width: 350,
116-
},
117-
},
118-
adornment: {
119-
width: theme.spacing(3),
120-
height: theme.spacing(3),
121-
display: "flex",
122-
alignItems: "center",
123-
justifyContent: "center",
124-
125-
"& img": {
126-
maxWidth: "100%",
127-
objectFit: "contain",
128-
},
129-
},
130-
}));
131-
132133
export default IconField;

‎site/src/components/TableToolbar/TableToolbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Skeleton from "@mui/material/Skeleton";
55
export const TableToolbar = styled(Box)(({ theme }) => ({
66
fontSize: 13,
77
marginBottom: theme.spacing(1),
8-
marginTop: theme.spacing(0),
8+
marginTop: 0,
99
height: 36, // The size of a small button
1010
color: theme.palette.text.secondary,
1111
"& strong": { color: theme.palette.text.primary },

‎site/src/components/UserAutocomplete/UserAutocomplete.tsx

+21-18
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1+
import { css } from "@emotion/css";
2+
import { useTheme } from "@emotion/react";
13
import CircularProgress from "@mui/material/CircularProgress";
2-
import { makeStyles } from "@mui/styles";
34
import TextField from "@mui/material/TextField";
45
import Autocomplete from "@mui/material/Autocomplete";
5-
import { User } from "api/typesGenerated";
6+
import type { User } from "api/typesGenerated";
67
import { Avatar } from "components/Avatar/Avatar";
78
import { AvatarData } from "components/AvatarData/AvatarData";
8-
import { ChangeEvent, ComponentProps, FC, useState } from "react";
9+
import {
10+
type ChangeEvent,
11+
type ComponentProps,
12+
type FC,
13+
useState,
14+
} from "react";
915
import Box from "@mui/material/Box";
1016
import { useDebouncedFunction } from "hooks/debounce";
1117
import { useQuery } from "react-query";
@@ -27,7 +33,7 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
2733
className,
2834
size = "small",
2935
}) => {
30-
const styles = useStyles();
36+
const theme = useTheme();
3137
const [autoComplete, setAutoComplete] = useState<{
3238
value: string;
3339
open: boolean;
@@ -101,7 +107,11 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
101107
size={size}
102108
label={label}
103109
placeholder="User email or username"
104-
className={styles.textField}
110+
css={{
111+
"&:not(:has(label))": {
112+
margin: 0,
113+
},
114+
}}
105115
InputProps={{
106116
...params.InputProps,
107117
onChange: debouncedInputOnChange,
@@ -119,7 +129,12 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
119129
</>
120130
),
121131
classes: {
122-
root: styles.inputRoot,
132+
root: css`
133+
padding-left: ${theme.spacing(
134+
1.75,
135+
)} !important; // Same padding left as input
136+
gap: ${theme.spacing(0.5)};
137+
`,
123138
},
124139
}}
125140
InputLabelProps={{
@@ -130,15 +145,3 @@ export const UserAutocomplete: FC<UserAutocompleteProps> = ({
130145
/>
131146
);
132147
};
133-
134-
export const useStyles = makeStyles((theme) => ({
135-
textField: {
136-
"&:not(:has(label))": {
137-
margin: 0,
138-
},
139-
},
140-
inputRoot: {
141-
paddingLeft: `${theme.spacing(1.75)} !important`, // Same padding left as input
142-
gap: theme.spacing(0.5),
143-
},
144-
}));

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

+11-18
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { makeStyles } from "@mui/styles";
21
import dayjs from "dayjs";
3-
import { ComponentProps, FC, Fragment } from "react";
4-
import { ProvisionerJobLog } from "api/typesGenerated";
2+
import { type ComponentProps, type FC, Fragment } from "react";
3+
import type { ProvisionerJobLog } from "api/typesGenerated";
54
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
65
import { Logs } from "./Logs";
76
import Box from "@mui/material/Box";
8-
import { combineClasses } from "utils/combineClasses";
7+
import { type Interpolation, type Theme } from "@emotion/react";
98

109
const Language = {
1110
seconds: "seconds",
@@ -53,7 +52,6 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
5352
}) => {
5453
const groupedLogsByStage = groupLogsByStage(logs);
5554
const stages = Object.keys(groupedLogsByStage);
56-
const styles = useStyles();
5755

5856
return (
5957
<Box
@@ -79,15 +77,10 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
7977

8078
return (
8179
<Fragment key={stage}>
82-
<div
83-
className={combineClasses([
84-
styles.header,
85-
sticky ? styles.sticky : "",
86-
])}
87-
>
80+
<div css={[styles.header, sticky && styles.sticky]}>
8881
<div>{stage}</div>
8982
{shouldDisplayDuration && (
90-
<div className={styles.duration}>
83+
<div css={styles.duration}>
9184
{duration} {Language.seconds}
9285
</div>
9386
)}
@@ -100,8 +93,8 @@ export const WorkspaceBuildLogs: FC<WorkspaceBuildLogsProps> = ({
10093
);
10194
};
10295

103-
const useStyles = makeStyles((theme) => ({
104-
header: {
96+
const styles = {
97+
header: (theme) => ({
10598
fontSize: 13,
10699
fontWeight: 600,
107100
padding: theme.spacing(0.5, 3),
@@ -119,16 +112,16 @@ const useStyles = makeStyles((theme) => ({
119112
"&:first-child": {
120113
borderRadius: "8px 8px 0 0",
121114
},
122-
},
115+
}),
123116

124117
sticky: {
125118
position: "sticky",
126119
top: 0,
127120
},
128121

129-
duration: {
122+
duration: (theme) => ({
130123
marginLeft: "auto",
131124
color: theme.palette.text.secondary,
132125
fontSize: 12,
133-
},
134-
}));
126+
}),
127+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/components/WorkspaceStatusBadge/WorkspaceStatusBadge.tsx

+22-29
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import { Workspace } from "api/typesGenerated";
1+
import type { Workspace } from "api/typesGenerated";
22
import { Pill } from "components/Pill/Pill";
3-
import { FC, PropsWithChildren } from "react";
4-
import { makeStyles } from "@mui/styles";
5-
import { combineClasses } from "utils/combineClasses";
3+
import { type FC, type PropsWithChildren } from "react";
64
import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
75
import { DormantDeletionText } from "components/WorkspaceDeletion";
86
import { getDisplayWorkspaceStatus } from "utils/workspace";
9-
import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
7+
import Tooltip, {
8+
type TooltipProps,
9+
tooltipClasses,
10+
} from "@mui/material/Tooltip";
1011
import { styled } from "@mui/material/styles";
1112
import Box from "@mui/material/Box";
1213
import ErrorOutline from "@mui/icons-material/ErrorOutline";
14+
import { type Interpolation, type Theme } from "@emotion/react";
1315

1416
export type WorkspaceStatusBadgeProps = {
1517
workspace: Workspace;
@@ -56,7 +58,6 @@ export const WorkspaceStatusBadge: FC<
5658
export const WorkspaceStatusText: FC<
5759
PropsWithChildren<WorkspaceStatusBadgeProps>
5860
> = ({ workspace, className }) => {
59-
const styles = useStyles();
6061
const { text, type } = getDisplayWorkspaceStatus(
6162
workspace.latest_build.status,
6263
);
@@ -71,11 +72,8 @@ export const WorkspaceStatusText: FC<
7172
<span
7273
role="status"
7374
data-testid="build-status"
74-
className={combineClasses([
75-
className,
76-
styles.root,
77-
styles[`type-${type}`],
78-
])}
75+
className={className}
76+
css={[styles.root, styles[`type-${type}`]]}
7977
>
8078
{text}
8179
</span>
@@ -95,27 +93,22 @@ const FailureTooltip = styled(({ className, ...props }: TooltipProps) => (
9593
},
9694
}));
9795

98-
const useStyles = makeStyles((theme) => ({
96+
const styles = {
9997
root: { fontWeight: 600 },
100-
"type-error": {
98+
99+
"type-error": (theme) => ({
101100
color: theme.palette.error.light,
102-
},
103-
"type-warning": {
101+
}),
102+
"type-warning": (theme) => ({
104103
color: theme.palette.warning.light,
105-
},
106-
"type-success": {
104+
}),
105+
"type-success": (theme) => ({
107106
color: theme.palette.success.light,
108-
},
109-
"type-info": {
107+
}),
108+
"type-info": (theme) => ({
110109
color: theme.palette.info.light,
111-
},
112-
"type-undefined": {
110+
}),
111+
"type-undefined": (theme) => ({
113112
color: theme.palette.text.secondary,
114-
},
115-
"type-primary": {
116-
color: theme.palette.text.primary,
117-
},
118-
"type-secondary": {
119-
color: theme.palette.text.secondary,
120-
},
121-
}));
113+
}),
114+
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/hooks/useClickableTableRow.ts

+16-20
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1+
import { useTheme, type CSSObject } from "@emotion/react";
12
import { type MouseEventHandler } from "react";
23
import { type TableRowProps } from "@mui/material/TableRow";
3-
import { makeStyles } from "@mui/styles";
44
import { useClickable, type UseClickableResult } from "./useClickable";
55

66
type UseClickableTableRowResult = UseClickableResult<HTMLTableRowElement> &
77
TableRowProps & {
8-
className: string;
8+
css: CSSObject;
99
hover: true;
1010
onAuxClick: MouseEventHandler<HTMLTableRowElement>;
1111
};
@@ -28,12 +28,24 @@ export const useClickableTableRow = ({
2828
onDoubleClick,
2929
onMiddleClick,
3030
}: UseClickableTableRowConfig): UseClickableTableRowResult => {
31-
const styles = useStyles();
3231
const clickableProps = useClickable(onClick);
32+
const theme = useTheme();
3333

3434
return {
3535
...clickableProps,
36-
className: styles.row,
36+
css: {
37+
cursor: "pointer",
38+
39+
"&:focus": {
40+
outline: `1px solid ${theme.palette.secondary.dark}`,
41+
outlineOffset: -1,
42+
},
43+
44+
"&:last-of-type": {
45+
borderBottomLeftRadius: theme.shape.borderRadius,
46+
borderBottomRightRadius: theme.shape.borderRadius,
47+
},
48+
},
3749
hover: true,
3850
onDoubleClick,
3951
onAuxClick: (event) => {
@@ -46,19 +58,3 @@ export const useClickableTableRow = ({
4658
},
4759
};
4860
};
49-
50-
const useStyles = makeStyles((theme) => ({
51-
row: {
52-
cursor: "pointer",
53-
54-
"&:focus": {
55-
outline: `1px solid ${theme.palette.secondary.dark}`,
56-
outlineOffset: -1,
57-
},
58-
59-
"&:last-of-type": {
60-
borderBottomLeftRadius: theme.shape.borderRadius,
61-
borderBottomRightRadius: theme.shape.borderRadius,
62-
},
63-
},
64-
}));

0 commit comments

Comments
 (0)