Skip to content

Commit 246dae0

Browse files
aslilacaslilac
authored
chore: use emotion for styling (pt. 3) (#10026)
1 parent f001a57 commit 246dae0

File tree

21 files changed

+535
-689
lines changed

21 files changed

+535
-689
lines changed

‎site/src/components/CodeExample/CodeExample.tsx

+33-41
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { makeStyles } from "@mui/styles";
2-
import { FC } from "react";
1+
import { type FC } from "react";
2+
import { useTheme } from "@emotion/react";
33
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
4-
import { combineClasses } from "utils/combineClasses";
54
import { CopyButton } from "../CopyButton/CopyButton";
6-
import { Theme } from "@mui/material/styles";
75

86
export interface CodeExampleProps {
97
code: string;
@@ -14,46 +12,40 @@ export interface CodeExampleProps {
1412
/**
1513
* Component to show single-line code examples, with a copy button
1614
*/
17-
export const CodeExample: FC<CodeExampleProps> = ({
18-
code,
19-
password,
20-
className,
21-
}) => {
22-
const styles = useStyles({ password });
15+
export const CodeExample: FC<CodeExampleProps> = (props) => {
16+
const { code, password, className } = props;
17+
const theme = useTheme();
2318

2419
return (
25-
<div className={combineClasses([styles.root, className])}>
26-
<code className={styles.code}>{code}</code>
20+
<div
21+
css={{
22+
display: "flex",
23+
flexDirection: "row",
24+
alignItems: "center",
25+
background: "rgb(0 0 0 / 30%)",
26+
color: theme.palette.primary.contrastText,
27+
fontFamily: MONOSPACE_FONT_FAMILY,
28+
fontSize: 14,
29+
borderRadius: theme.shape.borderRadius,
30+
padding: theme.spacing(1),
31+
lineHeight: "150%",
32+
border: `1px solid ${theme.palette.divider}`,
33+
}}
34+
className={className}
35+
>
36+
<code
37+
css={{
38+
padding: theme.spacing(0, 1),
39+
width: "100%",
40+
display: "flex",
41+
alignItems: "center",
42+
wordBreak: "break-all",
43+
"-webkit-text-security": password ? "disc" : undefined,
44+
}}
45+
>
46+
{code}
47+
</code>
2748
<CopyButton text={code} />
2849
</div>
2950
);
3051
};
31-
32-
interface styleProps {
33-
inline?: boolean;
34-
password?: boolean;
35-
}
36-
37-
const useStyles = makeStyles<Theme, styleProps>((theme) => ({
38-
root: (props) => ({
39-
display: props.inline ? "inline-flex" : "flex",
40-
flexDirection: "row",
41-
alignItems: "center",
42-
background: "rgb(0 0 0 / 30%)",
43-
color: theme.palette.primary.contrastText,
44-
fontFamily: MONOSPACE_FONT_FAMILY,
45-
fontSize: 14,
46-
borderRadius: theme.shape.borderRadius,
47-
padding: theme.spacing(1),
48-
lineHeight: "150%",
49-
border: `1px solid ${theme.palette.divider}`,
50-
}),
51-
code: {
52-
padding: theme.spacing(0, 1),
53-
width: "100%",
54-
display: "flex",
55-
alignItems: "center",
56-
wordBreak: "break-all",
57-
"-webkit-text-security": (props) => (props.password ? "disc" : undefined),
58-
},
59-
}));

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

+2-9
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
55
import * as TypesGen from "api/typesGenerated";
66
import { navHeight } from "theme/constants";
77
import { BorderedMenu } from "./BorderedMenu";
8-
import {
9-
CloseDropdown,
10-
OpenDropdown,
11-
} from "components/DropdownArrows/DropdownArrows";
8+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
129
import { UserAvatar } from "components/UserAvatar/UserAvatar";
1310
import { UserDropdownContent } from "./UserDropdownContent";
1411
import { BUTTON_SM_HEIGHT } from "theme/theme";
@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
6966
avatarURL={user.avatar_url}
7067
/>
7168
</Badge>
72-
{anchorEl ? (
73-
<CloseDropdown color={colors.gray[6]} />
74-
) : (
75-
<OpenDropdown color={colors.gray[6]} />
76-
)}
69+
<DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
7770
</div>
7871
</MenuItem>
7972

‎site/src/components/DropdownArrow/DropdownArrow.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
2+
import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
3+
import { type FC } from "react";
4+
import { type Theme } from "@emotion/react";
5+
6+
interface ArrowProps {
7+
margin?: boolean;
8+
color?: string;
9+
close?: boolean;
10+
}
11+
12+
export const DropdownArrow: FC<ArrowProps> = (props) => {
13+
const { margin = true, color, close } = props;
14+
15+
const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
16+
17+
return (
18+
<Arrow
19+
aria-label={close ? "close-dropdown" : "open-dropdown"}
20+
css={(theme: Theme) => ({
21+
color: color ?? theme.palette.primary.contrastText,
22+
marginLeft: margin ? theme.spacing(1) : 0,
23+
width: 16,
24+
height: 16,
25+
})}
26+
/>
27+
);
28+
};

‎site/src/components/DropdownArrows/DropdownArrows.tsx

-42
This file was deleted.

‎site/src/components/Expander/Expander.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1+
import Collapse from "@mui/material/Collapse";
12
import Link from "@mui/material/Link";
23
import makeStyles from "@mui/styles/makeStyles";
3-
import {
4-
CloseDropdown,
5-
OpenDropdown,
6-
} from "components/DropdownArrows/DropdownArrows";
7-
import { PropsWithChildren, FC } from "react";
8-
import Collapse from "@mui/material/Collapse";
4+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
5+
import { type FC, type PropsWithChildren } from "react";
96
import { combineClasses } from "utils/combineClasses";
107

118
export interface ExpanderProps {
@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
2825
<Link onClick={toggleExpanded} className={styles.expandLink}>
2926
<span className={styles.text}>
3027
Click here to learn more
31-
<OpenDropdown margin={false} />
28+
<DropdownArrow margin={false} />
3229
</span>
3330
</Link>
3431
)}
@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
4239
>
4340
<span className={styles.text}>
4441
Click here to hide
45-
<CloseDropdown margin={false} />
42+
<DropdownArrow margin={false} close />
4643
</span>
4744
</Link>
4845
)}

0 commit comments

Comments
 (0)