Skip to content

Commit 148fa81

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 2) (#9951)
1 parent fabcc41 commit 148fa81

File tree

13 files changed

+636
-699
lines changed

13 files changed

+636
-699
lines changed

‎site/src/@types/emotion.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Theme as MuiTheme } from "@mui/system";
1+
import type { DefaultTheme as MuiTheme } from "@mui/system";
22

33
declare module "@emotion/react" {
44
interface Theme extends MuiTheme {}

‎site/src/components/Avatar/Avatar.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// eslint-disable-next-line no-restricted-imports -- Read above
33
import MuiAvatar, { AvatarProps as MuiAvatarProps } from "@mui/material/Avatar";
44
import { FC } from "react";
5-
import { css, type Theme } from "@emotion/react";
5+
import { css, type Interpolation, type Theme } from "@emotion/react";
66

77
export type AvatarProps = MuiAvatarProps & {
88
size?: "sm" | "md" | "xl";
@@ -11,26 +11,26 @@ export type AvatarProps = MuiAvatarProps & {
1111
};
1212

1313
const sizeStyles = {
14-
sm: (theme: Theme) => ({
14+
sm: (theme) => ({
1515
width: theme.spacing(3),
1616
height: theme.spacing(3),
1717
fontSize: theme.spacing(1.5),
1818
}),
1919
md: {},
20-
xl: (theme: Theme) => ({
20+
xl: (theme) => ({
2121
width: theme.spacing(6),
2222
height: theme.spacing(6),
2323
fontSize: theme.spacing(3),
2424
}),
25-
};
25+
} satisfies Record<string, Interpolation<Theme>>;
2626

2727
const colorStyles = {
2828
light: {},
29-
darken: (theme: Theme) => ({
29+
darken: (theme) => ({
3030
background: theme.palette.divider,
3131
color: theme.palette.text.primary,
3232
}),
33-
};
33+
} satisfies Record<string, Interpolation<Theme>>;
3434

3535
const fitImageStyles = css`
3636
& .MuiAvatar-img {

‎site/src/components/AvatarData/AvatarData.tsx

+34-31
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import type { FC } from "react";
2+
import { useTheme } from "@emotion/react";
13
import { Avatar } from "components/Avatar/Avatar";
2-
import { FC } from "react";
34
import { Stack } from "components/Stack/Stack";
4-
import { makeStyles } from "@mui/styles";
55

66
export interface AvatarDataProps {
77
title: string | JSX.Element;
@@ -16,7 +16,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
1616
src,
1717
avatar,
1818
}) => {
19-
const styles = useStyles();
19+
const theme = useTheme();
2020

2121
if (!avatar) {
2222
avatar = <Avatar src={src}>{title}</Avatar>;
@@ -27,38 +27,41 @@ export const AvatarData: FC<AvatarDataProps> = ({
2727
spacing={1.5}
2828
direction="row"
2929
alignItems="center"
30-
className={styles.root}
30+
css={{
31+
minHeight: theme.spacing(5), // Make it predictable for the skeleton
32+
width: "100%",
33+
lineHeight: "150%",
34+
}}
3135
>
3236
{avatar}
3337

34-
<Stack spacing={0} className={styles.info}>
35-
<span className={styles.title}>{title}</span>
36-
{subtitle && <span className={styles.subtitle}>{subtitle}</span>}
38+
<Stack
39+
spacing={0}
40+
css={{
41+
width: "100%",
42+
}}
43+
>
44+
<span
45+
css={{
46+
color: theme.palette.text.primary,
47+
fontWeight: 600,
48+
}}
49+
>
50+
{title}
51+
</span>
52+
{subtitle && (
53+
<span
54+
css={{
55+
fontSize: 12,
56+
color: theme.palette.text.secondary,
57+
lineHeight: "150%",
58+
maxWidth: 540,
59+
}}
60+
>
61+
{subtitle}
62+
</span>
63+
)}
3764
</Stack>
3865
</Stack>
3966
);
4067
};
41-
42-
const useStyles = makeStyles((theme) => ({
43-
root: {
44-
minHeight: theme.spacing(5), // Make it predictable for the skeleton
45-
width: "100%",
46-
lineHeight: "150%",
47-
},
48-
49-
info: {
50-
width: "100%",
51-
},
52-
53-
title: {
54-
color: theme.palette.text.primary,
55-
fontWeight: 600,
56-
},
57-
58-
subtitle: {
59-
fontSize: 12,
60-
color: theme.palette.text.secondary,
61-
lineHeight: "150%",
62-
maxWidth: 540,
63-
},
64-
}));

‎site/src/components/CopyButton/CopyButton.tsx

+31-30
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import IconButton from "@mui/material/Button";
2-
import { makeStyles } from "@mui/styles";
32
import Tooltip from "@mui/material/Tooltip";
43
import Check from "@mui/icons-material/Check";
54
import { useClipboard } from "hooks/useClipboard";
6-
import { combineClasses } from "utils/combineClasses";
5+
import { css } from "@emotion/react";
76
import { FileCopyIcon } from "../Icons/FileCopyIcon";
87

98
interface CopyButtonProps {
@@ -29,51 +28,53 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
2928
buttonClassName = "",
3029
tooltipTitle = Language.tooltipTitle,
3130
}) => {
32-
const styles = useStyles();
3331
const { isCopied, copy: copyToClipboard } = useClipboard(text);
3432

33+
const fileCopyIconStyles = css`
34+
width: 20px;
35+
height: 20px;
36+
`;
37+
3538
return (
3639
<Tooltip title={tooltipTitle} placement="top">
3740
<div
38-
className={combineClasses([styles.copyButtonWrapper, wrapperClassName])}
41+
className={wrapperClassName}
42+
css={{
43+
display: "flex",
44+
}}
3945
>
4046
<IconButton
41-
className={combineClasses([styles.copyButton, buttonClassName])}
47+
className={buttonClassName}
48+
css={(theme) => css`
49+
border-radius: ${theme.shape.borderRadius}px;
50+
padding: ${theme.spacing(0.85)};
51+
min-width: 32px;
52+
53+
&:hover {
54+
background: ${theme.palette.background.paper};
55+
}
56+
`}
4257
onClick={copyToClipboard}
4358
size="small"
4459
aria-label={Language.ariaLabel}
4560
variant="text"
4661
>
4762
{isCopied ? (
48-
<Check className={styles.fileCopyIcon} />
63+
<Check css={fileCopyIconStyles} />
4964
) : (
50-
<FileCopyIcon className={styles.fileCopyIcon} />
65+
<FileCopyIcon css={fileCopyIconStyles} />
66+
)}
67+
{ctaCopy && (
68+
<div
69+
css={(theme) => ({
70+
marginLeft: theme.spacing(1),
71+
})}
72+
>
73+
{ctaCopy}
74+
</div>
5175
)}
52-
{ctaCopy && <div className={styles.buttonCopy}>{ctaCopy}</div>}
5376
</IconButton>
5477
</div>
5578
</Tooltip>
5679
);
5780
};
58-
59-
const useStyles = makeStyles((theme) => ({
60-
copyButtonWrapper: {
61-
display: "flex",
62-
},
63-
copyButton: {
64-
borderRadius: theme.shape.borderRadius,
65-
padding: theme.spacing(0.85),
66-
minWidth: 32,
67-
68-
"&:hover": {
69-
background: theme.palette.background.paper,
70-
},
71-
},
72-
fileCopyIcon: {
73-
width: 20,
74-
height: 20,
75-
},
76-
buttonCopy: {
77-
marginLeft: theme.spacing(1),
78-
},
79-
}));

0 commit comments

Comments
 (0)