emotion: BorderedMenu

aslilac · aslilac · commit 4d6803387372 · 2023-09-29T20:19:57.000Z
diff --git a/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx b/site/src/components/Dashboard/Navbar/UserDropdown/BorderedMenu.tsx
@@ -1,6 +1,7 @@
+import { css } from "@emotion/css";
+import { useTheme } from "@emotion/react";
 import Popover, { PopoverProps } from "@mui/material/Popover";
-import { makeStyles } from "@mui/styles";
-import { FC, PropsWithChildren } from "react";
+import type { FC, PropsWithChildren } from "react";
 
 type BorderedMenuVariant = "user-dropdown";
 
@@ -13,23 +14,17 @@ export const BorderedMenu: FC<PropsWithChildren<BorderedMenuProps>> = ({
   variant,
   ...rest
 }) => {
-  const styles = useStyles();
+  const theme = useTheme();
+
+  const paper = css`
+    width: 260px;
+    border-radius: ${theme.shape.borderRadius};
+    box-shadow: ${theme.shadows[6]};
+  `;
 
   return (
-    <Popover
-      classes={{ paper: styles.paperRoot }}
-      data-variant={variant}
-      {...rest}
-    >
+    <Popover classes={{ paper }} data-variant={variant} {...rest}>
       {children}
     </Popover>
   );
 };
-
-const useStyles = makeStyles((theme) => ({
-  paperRoot: {
-    width: 260,
-    borderRadius: theme.shape.borderRadius,
-    boxShadow: theme.shadows[6],
-  },
-}));
