emotion: Sidebar

coder · aslilac · Nov 1, 2023 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023
commit b1a8951a8b672fa4cd80fcab0107cdd3315af2e1
diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx
@@ -1,8 +1,19 @@
-import { makeStyles } from "@mui/styles";
+import { css } from "@emotion/css";
+import {
+  useTheme,
+  type CSSObject,
+  type Interpolation,
+  type Theme,
+} from "@emotion/react";
 import ScheduleIcon from "@mui/icons-material/TimerOutlined";
-import { Workspace } from "api/typesGenerated";
+import type { Workspace } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
-import { FC, ElementType, PropsWithChildren, ReactNode } from "react";
+import {
+  type FC,
+  type ComponentType,
+  type PropsWithChildren,
+  type ReactNode,
+} from "react";
 import { Link, NavLink } from "react-router-dom";
 import { combineClasses } from "utils/combineClasses";
 import GeneralIcon from "@mui/icons-material/SettingsOutlined";
@@ -12,16 +23,47 @@ import { Avatar } from "components/Avatar/Avatar";
 const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>
 > = ({ children, href, icon }) => {
-  const styles = useStyles();
+  const theme = useTheme();
+
+  const linkStyles = css({
+    color: "inherit",
+    display: "block",
+    fontSize: 14,
+    textDecoration: "none",
+    padding: theme.spacing(1.5, 1.5, 1.5, 2),
+    borderRadius: theme.shape.borderRadius / 2,
+    transition: "background-color 0.15s ease-in-out",
+    marginBottom: 1,
+    position: "relative",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  });
+
+  const activeLinkStyles = css({
+    backgroundColor: theme.palette.action.hover,
+
+    "&:before": {
+      content: '""',
+      display: "block",
+      width: 3,
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      borderTopLeftRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: theme.shape.borderRadius,
+    },
+  });
+
   return (
     <NavLink
       end
       to={href}
       className={({ isActive }) =>
-        combineClasses([
-          styles.sidebarNavItem,
-          isActive ? styles.sidebarNavItemActive : undefined,
-        ])
+        combineClasses([linkStyles, isActive ? activeLinkStyles : undefined])
       }
     >
       <Stack alignItems="center" spacing={1.5} direction="row">
@@ -32,32 +74,32 @@ const SidebarNavItem: FC<
   );
 };
 
-const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
-  icon: Icon,
-}) => {
-  const styles = useStyles();
-  return <Icon className={styles.sidebarNavItemIcon} />;
+const SidebarNavItemIcon: FC<{
+  icon: ComponentType<{ className?: string }>;
+}> = ({ icon: Icon }) => {
+  return (
+    <Icon
+      css={(theme) => ({
+        width: theme.spacing(2),
+        height: theme.spacing(2),
+      })}
+    />
+  );
 };
 
 export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
   username,
   workspace,
 }) => {
-  const styles = useStyles();
-
   return (
-    <nav className={styles.sidebar}>
-      <Stack
-        direction="row"
-        alignItems="center"
-        className={styles.workspaceInfo}
-      >
+    <nav css={styles.sidebar}>
+      <Stack direction="row" alignItems="center" css={styles.workspaceInfo}>
         <Avatar src={workspace.template_icon} variant="square" fitImage />
-        <Stack spacing={0} className={styles.workspaceData}>
-          <Link className={styles.name} to={`/@${username}/${workspace.name}`}>
+        <Stack spacing={0} css={styles.workspaceData}>
+          <Link css={styles.name} to={`/@${username}/${workspace.name}`}>
             {workspace.name}
           </Link>
-          <span className={styles.secondary}>
+          <span css={styles.secondary}>
             {workspace.template_display_name ?? workspace.template_name}
           </span>
         </Stack>
@@ -82,65 +124,30 @@ export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({
   );
 };
 
-const useStyles = makeStyles((theme) => ({
+const styles = {
   sidebar: {
     width: 245,
     flexShrink: 0,
   },
-  sidebarNavItem: {
-    color: "inherit",
-    display: "block",
-    fontSize: 14,
-    textDecoration: "none",
-    padding: theme.spacing(1.5, 1.5, 1.5, 2),
-    borderRadius: theme.shape.borderRadius / 2,
-    transition: "background-color 0.15s ease-in-out",
-    marginBottom: 1,
-    position: "relative",
-
-    "&:hover": {
-      backgroundColor: theme.palette.action.hover,
-    },
-  },
-  sidebarNavItemActive: {
-    backgroundColor: theme.palette.action.hover,
-
-    "&:before": {
-      content: '""',
-      display: "block",
-      width: 3,
-      height: "100%",
-      position: "absolute",
-      left: 0,
-      top: 0,
-      backgroundColor: theme.palette.secondary.dark,
-      borderTopLeftRadius: theme.shape.borderRadius,
-      borderBottomLeftRadius: theme.shape.borderRadius,
-    },
-  },
-  sidebarNavItemIcon: {
-    width: theme.spacing(2),
-    height: theme.spacing(2),
-  },
-  workspaceInfo: {
-    ...theme.typography.body2,
+  workspaceInfo: (theme) => ({
+    ...(theme.typography.body2 as CSSObject),
     marginBottom: theme.spacing(2),
-  },
+  }),
   workspaceData: {
     overflow: "hidden",
   },
-  name: {
+  name: (theme) => ({
     fontWeight: 600,
     overflow: "hidden",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     color: theme.palette.text.primary,
     textDecoration: "none",
-  },
-  secondary: {
+  }),
+  secondary: (theme) => ({
     color: theme.palette.text.secondary,
     fontSize: 12,
     overflow: "hidden",
     textOverflow: "ellipsis",
-  },
-}));
+  }),
+} satisfies Record<string, Interpolation<Theme>>;