coder · aslilac · Oct 5, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,9 +1,7 @@
-import { makeStyles } from "@mui/styles";
-import { FC } from "react";
+import { type FC } from "react";
+import { useTheme } from "@emotion/react";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
-import { combineClasses } from "utils/combineClasses";
 import { CopyButton } from "../CopyButton/CopyButton";
-import { Theme } from "@mui/material/styles";
 
 export interface CodeExampleProps {
   code: string;
@@ -14,46 +12,40 @@ export interface CodeExampleProps {
 /**
  * Component to show single-line code examples, with a copy button
  */
-export const CodeExample: FC<CodeExampleProps> = ({
-  code,
-  password,
-  className,
-}) => {
-  const styles = useStyles({ password });
+export const CodeExample: FC<CodeExampleProps> = (props) => {
+  const { code, password, className } = props;
+  const theme = useTheme();
 
   return (
-    <div className={combineClasses([styles.root, className])}>
-      <code className={styles.code}>{code}</code>
+    <div
+      css={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        background: "rgb(0 0 0 / 30%)",
+        color: theme.palette.primary.contrastText,
+        fontFamily: MONOSPACE_FONT_FAMILY,
+        fontSize: 14,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(1),
+        lineHeight: "150%",
+        border: `1px solid ${theme.palette.divider}`,
+      }}
+      className={className}
+    >
+      <code
+        css={{
+          padding: theme.spacing(0, 1),
+          width: "100%",
+          display: "flex",
+          alignItems: "center",
+          wordBreak: "break-all",
+          "-webkit-text-security": password ? "disc" : undefined,
+        }}
+      >
+        {code}
+      </code>
       <CopyButton text={code} />
     </div>
   );
 };
-
-interface styleProps {
-  inline?: boolean;
-  password?: boolean;
-}
-
-const useStyles = makeStyles<Theme, styleProps>((theme) => ({
-  root: (props) => ({
-    display: props.inline ? "inline-flex" : "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    background: "rgb(0 0 0 / 30%)",
-    color: theme.palette.primary.contrastText,
-    fontFamily: MONOSPACE_FONT_FAMILY,
-    fontSize: 14,
-    borderRadius: theme.shape.borderRadius,
-    padding: theme.spacing(1),
-    lineHeight: "150%",
-    border: `1px solid ${theme.palette.divider}`,
-  }),
-  code: {
-    padding: theme.spacing(0, 1),
-    width: "100%",
-    display: "flex",
-    alignItems: "center",
-    wordBreak: "break-all",
-    "-webkit-text-security": (props) => (props.password ? "disc" : undefined),
-  },
-}));
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/UserDropdown.tsx
@@ -5,10 +5,7 @@ import { colors } from "theme/colors";
 import * as TypesGen from "api/typesGenerated";
 import { navHeight } from "theme/constants";
 import { BorderedMenu } from "./BorderedMenu";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { UserDropdownContent } from "./UserDropdownContent";
 import { BUTTON_SM_HEIGHT } from "theme/theme";
@@ -69,11 +66,7 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
               avatarURL={user.avatar_url}
             />
           </Badge>
-          {anchorEl ? (
-            <CloseDropdown color={colors.gray[6]} />
-          ) : (
-            <OpenDropdown color={colors.gray[6]} />
-          )}
+          <DropdownArrow color={colors.gray[6]} close={Boolean(anchorEl)} />
         </div>
       </MenuItem>
 

diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -0,0 +1,28 @@
+import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { type FC } from "react";
+import { type Theme } from "@emotion/react";
+
+interface ArrowProps {
+  margin?: boolean;
+  color?: string;
+  close?: boolean;
+}
+
+export const DropdownArrow: FC<ArrowProps> = (props) => {
+  const { margin = true, color, close } = props;
+
+  const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
+
+  return (
+    <Arrow
+      aria-label={close ? "close-dropdown" : "open-dropdown"}
+      css={(theme: Theme) => ({
+        color: color ?? theme.palette.primary.contrastText,
+        marginLeft: margin ? theme.spacing(1) : 0,
+        width: 16,
+        height: 16,
+      })}
+    />
+  );
+};
diff --git a/site/src/components/DropdownArrows/DropdownArrows.tsx b/site/src/components/DropdownArrows/DropdownArrows.tsx
diff --git a/site/src/components/Expander/Expander.tsx b/site/src/components/Expander/Expander.tsx
@@ -1,11 +1,8 @@
+import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
 import makeStyles from "@mui/styles/makeStyles";
-import {
-  CloseDropdown,
-  OpenDropdown,
-} from "components/DropdownArrows/DropdownArrows";
-import { PropsWithChildren, FC } from "react";
-import Collapse from "@mui/material/Collapse";
+import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { type FC, type PropsWithChildren } from "react";
 import { combineClasses } from "utils/combineClasses";
 
 export interface ExpanderProps {
@@ -28,7 +25,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         <Link onClick={toggleExpanded} className={styles.expandLink}>
           <span className={styles.text}>
             Click here to learn more
-            <OpenDropdown margin={false} />
+            <DropdownArrow margin={false} />
           </span>
         </Link>
       )}
@@ -42,7 +39,7 @@ export const Expander: FC<PropsWithChildren<ExpanderProps>> = ({
         >
           <span className={styles.text}>
             Click here to hide
-            <CloseDropdown margin={false} />
+            <DropdownArrow margin={false} close />
           </span>
         </Link>
       )}