emotion: UserDropdownContent

coder · aslilac · Oct 2, 2023 · Sep 29, 2023 · Sep 29, 2023 · Sep 29, 2023
commit f254256af9eae72ef4f39967a3b2df67df995fae
@@ -1,6 +1,5 @@
 import Divider from "@mui/material/Divider";
 import MenuItem from "@mui/material/MenuItem";
-import { makeStyles } from "@mui/styles";
 import AccountIcon from "@mui/icons-material/AccountCircleOutlined";
 import BugIcon from "@mui/icons-material/BugReportOutlined";
 import ChatIcon from "@mui/icons-material/ChatOutlined";
@@ -11,14 +10,85 @@ import { Link } from "react-router-dom";
 import * as TypesGen from "api/typesGenerated";
 import DocsIcon from "@mui/icons-material/MenuBook";
 import LogoutIcon from "@mui/icons-material/ExitToAppOutlined";
-import { combineClasses } from "utils/combineClasses";
+import {
+  css,
+  type CSSObject,
+  type Interpolation,
+  type Theme,
+} from "@emotion/react";
 
 export const Language = {
   accountLabel: "Account",
   signOutLabel: "Sign Out",
   copyrightText: `\u00a9 ${new Date().getFullYear()} Coder Technologies, Inc.`,
 };
 
+const styles = {
+  info: (theme) => [
+    theme.typography.body2 as CSSObject,
+    {
+      padding: theme.spacing(2.5),
+    },
+  ],
+  userName: {
+    fontWeight: 600,
+  },
+  userEmail: (theme) => ({
+    color: theme.palette.text.secondary,
+    width: "100%",
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+  }),
+  link: {
+    textDecoration: "none",
+    color: "inherit",
+  },
+  menuItem: (theme) => css`
+    gap: ${theme.spacing(2.5)};
+    padding: ${theme.spacing(1, 2.5)};
+
+    &:hover {
+      background-color: ${theme.palette.action.hover};
+      transition: background-color 0.3s ease;
+    }
+  `,
+  menuItemIcon: (theme) => ({
+    color: theme.palette.text.secondary,
+    width: theme.spacing(2.5),
+    height: theme.spacing(2.5),
+  }),
+  menuItemText: {
+    fontSize: 14,
+  },
+  divider: (theme) => css`
+    margin: ${theme.spacing(1, 0)};
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  `,
+  footerText: (theme) => css`
+    font-size: 12px;
+    text-decoration: none;
+    color: ${theme.palette.text.secondary};
+    display: flex;
+    alignitems: center;
+    gap: 4px;
+
+    & svg {
+      width: 12px;
+      height: 12px;
+    }
+  `,
+  buildInfo: (theme) => ({
+    color: theme.palette.text.primary,
+  }),
+} satisfies Record<string, Interpolation<Theme>>;
+
 export interface UserDropdownContentProps {
   user: TypesGen.User;
   buildInfo?: TypesGen.BuildInfoResponse;
@@ -34,30 +104,28 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
   onPopoverClose,
   onSignOut,
 }) => {
-  const styles = useStyles();
-
   return (
     <div>
-      <Stack className={styles.info} spacing={0}>
-        <span className={styles.userName}>{user.username}</span>
-        <span className={styles.userEmail}>{user.email}</span>
+      <Stack css={styles.info} spacing={0}>
+        <span css={styles.userName}>{user.username}</span>
+        <span css={styles.userEmail}>{user.email}</span>
       </Stack>
 
-      <Divider className={styles.divider} />
+      <Divider css={styles.divider} />
 
-      <Link to="/settings/account" className={styles.link}>
-        <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
-          <AccountIcon className={styles.menuItemIcon} />
-          <span className={styles.menuItemText}>{Language.accountLabel}</span>
+      <Link to="/settings/account" css={styles.link}>
+        <MenuItem css={styles.menuItem} onClick={onPopoverClose}>
+          <AccountIcon css={styles.menuItemIcon} />
+          <span css={styles.menuItemText}>{Language.accountLabel}</span>
         </MenuItem>
       </Link>
 
-      <MenuItem className={styles.menuItem} onClick={onSignOut}>
-        <LogoutIcon className={styles.menuItemIcon} />
-        <span className={styles.menuItemText}>{Language.signOutLabel}</span>
+      <MenuItem css={styles.menuItem} onClick={onSignOut}>
+        <LogoutIcon css={styles.menuItemIcon} />
+        <span css={styles.menuItemText}>{Language.signOutLabel}</span>
       </MenuItem>
 
-      <Divider className={styles.divider} />
+      <Divider css={styles.divider} />
 
       <>
         {supportLinks &&
@@ -67,107 +135,37 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
               key={link.name}
               target="_blank"
               rel="noreferrer"
-              className={styles.link}
+              css={styles.link}
             >
-              <MenuItem className={styles.menuItem} onClick={onPopoverClose}>
-                {link.icon === "bug" && (
-                  <BugIcon className={styles.menuItemIcon} />
-                )}
-                {link.icon === "chat" && (
-                  <ChatIcon className={styles.menuItemIcon} />
-                )}
-                {link.icon === "docs" && (
-                  <DocsIcon className={styles.menuItemIcon} />
-                )}
-                <span className={styles.menuItemText}>{link.name}</span>
+              <MenuItem css={styles.menuItem} onClick={onPopoverClose}>
+                {link.icon === "bug" && <BugIcon css={styles.menuItemIcon} />}
+                {link.icon === "chat" && <ChatIcon css={styles.menuItemIcon} />}
+                {link.icon === "docs" && <DocsIcon css={styles.menuItemIcon} />}
+                <span css={styles.menuItemText}>{link.name}</span>
               </MenuItem>
             </a>
           ))}
       </>
 
-      {supportLinks && <Divider className={styles.divider} />}
+      {supportLinks && <Divider css={styles.divider} />}
 
-      <Stack className={styles.info} spacing={0}>
+      <Stack css={styles.info} spacing={0}>
         <a
           title="Browse Source Code"
-          className={combineClasses([styles.footerText, styles.buildInfo])}
+          css={[styles.footerText, styles.buildInfo]}
           href={buildInfo?.external_url}
           target="_blank"
           rel="noreferrer"
         >
           {buildInfo?.version} <LaunchIcon />
         </a>
 
-        <div className={styles.footerText}>{Language.copyrightText}</div>
+        <div css={styles.footerText}>{Language.copyrightText}</div>
       </Stack>
     </div>
   );
 };
 
-const useStyles = makeStyles((theme) => ({
-  info: {
-    padding: theme.spacing(2.5),
-    ...theme.typography.body2,
-  },
-  userName: {
-    fontWeight: 600,
-  },
-  userEmail: {
-    color: theme.palette.text.secondary,
-    width: "100%",
-    textOverflow: "ellipsis",
-    overflow: "hidden",
-  },
-  link: {
-    textDecoration: "none",
-    color: "inherit",
-  },
-  menuItem: {
-    gap: theme.spacing(2.5),
-    padding: theme.spacing(1, 2.5),
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-      transition: "background-color 0.3s ease",
-    },
-  },
-  menuItemIcon: {
-    color: theme.palette.text.secondary,
-    width: theme.spacing(2.5),
-    height: theme.spacing(2.5),
-  },
-  menuItemText: {
-    fontSize: 14,
-  },
-  divider: {
-    margin: theme.spacing(1, 0),
-
-    "&:first-of-type": {
-      marginTop: 0,
-    },
-
-    "&:last-of-type": {
-      marginBottom: 0,
-    },
-  },
-  footerText: {
-    fontSize: 12,
-    textDecoration: "none",
-    color: theme.palette.text.secondary,
-    display: "flex",
-    alignItems: "center",
-    gap: 4,
-
-    "& svg": {
-      width: 12,
-      height: 12,
-    },
-  },
-  buildInfo: {
-    color: theme.palette.text.primary,
-  },
-}));
-
 const includeBuildInfo = (
   href: string,
   buildInfo?: TypesGen.BuildInfoResponse,