From b1a8951a8b672fa4cd80fcab0107cdd3315af2e1 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Tue, 31 Oct 2023 18:27:14 +0000 Subject: [PATCH 01/22] emotion: `Sidebar` --- .../pages/WorkspaceSettingsPage/Sidebar.tsx | 143 +++++++++--------- 1 file changed, 75 insertions(+), 68 deletions(-) diff --git a/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx b/site/src/pages/WorkspaceSettingsPage/Sidebar.tsx index cffa51c4bf619..d146ea2418d1f 100644 --- 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 ( - combineClasses([ - styles.sidebarNavItem, - isActive ? styles.sidebarNavItemActive : undefined, - ]) + combineClasses([linkStyles, isActive ? activeLinkStyles : undefined]) } > @@ -32,32 +74,32 @@ const SidebarNavItem: FC< ); }; -const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({ - icon: Icon, -}) => { - const styles = useStyles(); - return ; +const SidebarNavItemIcon: FC<{ + icon: ComponentType<{ className?: string }>; +}> = ({ icon: Icon }) => { + return ( + ({ + width: theme.spacing(2), + height: theme.spacing(2), + })} + /> + ); }; export const Sidebar: React.FC<{ username: string; workspace: Workspace }> = ({ username, workspace, }) => { - const styles = useStyles(); - return ( -