From 51c8e4821b2c004f09eb23cf7a513944ab5988bb Mon Sep 17 00:00:00 2001 From: Ian Jones Date: Thu, 30 May 2024 10:37:50 +0100 Subject: [PATCH] feat: Simplify nav menus --- .../FlowEditor/components/EditorMenu.tsx | 20 +++++++++---------- .../FlowEditor/components/GlobalMenu.tsx | 18 ++++++++--------- .../pages/FlowEditor/components/TeamMenu.tsx | 18 ++++++++--------- 3 files changed, 25 insertions(+), 31 deletions(-) diff --git a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx index e99fb24bd9..12e8e58fcc 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/EditorMenu.tsx @@ -11,19 +11,19 @@ import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; import EditorIcon from "ui/icons/Editor"; -const MENU_WIDTH = "46px"; +const MENU_WIDTH = "54px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(4, 0, 0, 0), + padding: theme.spacing(4, 0.5, 0, 0.5), })); const MenuItem = styled("li")(({ theme }) => ({ @@ -49,21 +49,19 @@ const TooltipWrap = styled(({ className, ...props }: TooltipProps) => ( const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, - height: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, + justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), })); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx index d5ee8f1188..59f217ba28 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx @@ -10,19 +10,19 @@ import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -const MENU_WIDTH = "180px"; +const MENU_WIDTH = "185px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(2.5, 0, 0, 0), + padding: theme.spacing(2.5, 0.5, 0, 0.5), position: "sticky", top: 0, })); @@ -41,21 +41,19 @@ const MenuTitle = styled(Typography)(({ theme }) => ({ const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), })); diff --git a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx index 5ef066a09c..b7864161db 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/TeamMenu.tsx @@ -10,19 +10,19 @@ import { useCurrentRoute, useNavigation } from "react-navi"; import { rootFlowPath } from "routes/utils"; import { FONT_WEIGHT_SEMI_BOLD } from "theme"; -const MENU_WIDTH = "180px"; +const MENU_WIDTH = "185px"; const Root = styled(Box)(({ theme }) => ({ width: MENU_WIDTH, flexShrink: 0, background: theme.palette.background.paper, - borderRight: `1px solid ${theme.palette.border.main}`, + borderRight: `1px solid ${theme.palette.border.light}`, })); const MenuWrap = styled("ul")(({ theme }) => ({ listStyle: "none", margin: 0, - padding: theme.spacing(2.5, 0, 0, 0), + padding: theme.spacing(2.5, 0.5, 0, 0.5), position: "sticky", top: 0, })); @@ -41,21 +41,19 @@ const MenuTitle = styled(Typography)(({ theme }) => ({ const MenuButton = styled(IconButton, { shouldForwardProp: (prop) => prop !== "isActive", })<{ isActive: boolean }>(({ theme, isActive }) => ({ - color: theme.palette.primary.main, - width: MENU_WIDTH, + color: theme.palette.text.primary, + width: "100%", border: "1px solid transparent", - borderRightColor: theme.palette.border.main, justifyContent: "flex-start", + borderRadius: "3px", "&:hover": { background: "white", - borderTopColor: theme.palette.border.light, - borderBottomColor: theme.palette.border.light, + borderColor: theme.palette.border.light, }, ...(isActive && { background: theme.palette.common.white, color: theme.palette.text.primary, - border: `1px solid ${theme.palette.border.main}`, - borderRightColor: "transparent", + border: `1px solid ${theme.palette.border.light}`, }), }));