Skip to content

Commit 20b1b73

Browse files
aslilacaslilac
committed
emotion + refactor: DropdownArrow 
1 parent 781b73f commit 20b1b73

File tree

9 files changed

+47
-94
lines changed

9 files changed

+47
-94
lines changed

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

Lines changed: 2 additions & 9 deletions
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

Lines changed: 28 additions & 0 deletions
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

Lines changed: 0 additions & 42 deletions
This file was deleted.

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

Lines changed: 5 additions & 8 deletions
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
)}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Button from "@mui/material/Button";
22
import InputAdornment from "@mui/material/InputAdornment";
33
import Popover from "@mui/material/Popover";
44
import TextField, { TextFieldProps } from "@mui/material/TextField";
5-
import { OpenDropdown } from "components/DropdownArrows/DropdownArrows";
5+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
66
import { useRef, FC, useState } from "react";
77
import Picker from "@emoji-mart/react";
88
import { makeStyles } from "@mui/styles";
@@ -52,7 +52,7 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
5252
<Button
5353
fullWidth
5454
ref={emojiButtonRef}
55-
endIcon={<OpenDropdown />}
55+
endIcon={<DropdownArrow />}
5656
onClick={() => {
5757
setIsEmojiPickerOpen((v) => !v);
5858
}}

‎site/src/components/Resources/AgentRow.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,7 @@ import {
99
WorkspaceAgentLogSource,
1010
WorkspaceAgentMetadata,
1111
} from "api/typesGenerated";
12-
import {
13-
CloseDropdown,
14-
OpenDropdown,
15-
} from "components/DropdownArrows/DropdownArrows";
12+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
1613
import { displayError } from "components/GlobalSnackbar/utils";
1714
import { VSCodeDesktopButton } from "components/Resources/VSCodeDesktopButton/VSCodeDesktopButton";
1815
import {
@@ -443,7 +440,7 @@ export const AgentRow: FC<AgentRowProps> = ({
443440
setShowLogs((v) => !v);
444441
}}
445442
>
446-
<CloseDropdown />
443+
<DropdownArrow close />
447444
Hide logs
448445
</button>
449446
) : (
@@ -456,7 +453,7 @@ export const AgentRow: FC<AgentRowProps> = ({
456453
setShowLogs((v) => !v);
457454
}}
458455
>
459-
<OpenDropdown />
456+
<DropdownArrow />
460457
Show logs
461458
</button>
462459
)}

‎site/src/components/Resources/ResourceCard.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
44
import { Stack } from "../Stack/Stack";
55
import { ResourceAvatar } from "./ResourceAvatar";
66
import { SensitiveValue } from "./SensitiveValue";
7-
import {
8-
OpenDropdown,
9-
CloseDropdown,
10-
} from "components/DropdownArrows/DropdownArrows";
7+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
118
import IconButton from "@mui/material/IconButton";
129
import Tooltip from "@mui/material/Tooltip";
1310
import { CopyableValue } from "components/CopyableValue/CopyableValue";
@@ -95,11 +92,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
9592
}}
9693
size="large"
9794
>
98-
{shouldDisplayAllMetadata ? (
99-
<CloseDropdown margin={false} />
100-
) : (
101-
<OpenDropdown margin={false} />
102-
)}
95+
<DropdownArrow margin={false} close={shouldDisplayAllMetadata} />
10396
</IconButton>
10497
</Tooltip>
10598
)}

‎site/src/components/Resources/Resources.tsx

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import Button from "@mui/material/Button";
22
import { makeStyles } from "@mui/styles";
3-
import {
4-
CloseDropdown,
5-
OpenDropdown,
6-
} from "components/DropdownArrows/DropdownArrows";
3+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
74
import { FC, useState } from "react";
85
import { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
96
import { Stack } from "../Stack/Stack";
@@ -49,15 +46,8 @@ export const Resources: FC<React.PropsWithChildren<ResourcesProps>> = ({
4946
size="small"
5047
onClick={() => setShouldDisplayHideResources((v) => !v)}
5148
>
52-
{shouldDisplayHideResources ? (
53-
<>
54-
Hide resources <CloseDropdown />
55-
</>
56-
) : (
57-
<>
58-
Show hidden resources <OpenDropdown />
59-
</>
60-
)}
49+
{shouldDisplayHideResources ? "Hide" : "Show hidden"} resources
50+
<DropdownArrow close={shouldDisplayHideResources} />
6151
</Button>
6252
</div>
6353
)}

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import Collapse from "@mui/material/Collapse";
22
import { makeStyles } from "@mui/styles";
33
import TableCell from "@mui/material/TableCell";
44
import { AuditLog } from "api/typesGenerated";
5-
import {
6-
CloseDropdown,
7-
OpenDropdown,
8-
} from "components/DropdownArrows/DropdownArrows";
5+
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
96
import { Pill, type PillType } from "components/Pill/Pill";
107
import { Stack } from "components/Stack/Stack";
118
import { TimelineEntry } from "components/Timeline/TimelineEntry";
@@ -154,7 +151,7 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
154151
</Stack>
155152

156153
{shouldDisplayDiff ? (
157-
<div> {isDiffOpen ? <CloseDropdown /> : <OpenDropdown />}</div>
154+
<div> {<DropdownArrow close={isDiffOpen} />}</div>
158155
) : (
159156
<div className={styles.columnWithoutDiff}></div>
160157
)}

0 commit comments

Comments
 (0)