wip: Editor layout and style updates

e2e/tests/ui-driven/src/login.spec.ts

@@ -67,7 +67,7 @@ test.describe("Login", () => {
       route.continue();
     });
     await expect(
-      page.locator("h1").filter({ hasText: "My services" }),
+      page.locator("h1").filter({ hasText: "Services" }),
     ).toBeVisible();
     await expect(page.getByText(toastText)).toBeHidden();
   });

editor.planx.uk/src/components/Header.tsx

@@ -48,8 +48,8 @@ import TestEnvironmentBanner from "./TestEnvironmentBanner";
 
 export const HEADER_HEIGHT = 74;
 
-const Root = styled(AppBar)(() => ({
-  color: "#fff",
+const Root = styled(AppBar)(({ theme }) => ({
+  color: theme.palette.common.white,
 }));
 
 const BreadcrumbsRoot = styled(Box)(() => ({
@@ -60,6 +60,12 @@ const BreadcrumbsRoot = styled(Box)(() => ({
   alignItems: "center",
 }));
 
+const BreadcrumbsLink = styled(Link)(({ theme }) => ({
+  color: theme.palette.common.white,
+  textDecoration: "none",
+  borderBottom: "1px solid currentColor",
+})) as typeof Link;
+
 const StyledToolbar = styled(MuiToolbar)(() => ({
   height: HEADER_HEIGHT,
 }));
@@ -103,7 +109,7 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
   backgroundColor: theme.palette.background.dark,
-  color: "#fff",
+  color: theme.palette.common.white,
   borderRadius: 0,
   boxShadow: "none",
   minWidth: 180,
@@ -131,7 +137,7 @@ const SkipLink = styled("a")(({ theme }) => ({
   width: "100vw",
   height: HEADER_HEIGHT / 2,
   backgroundColor: theme.palette.background.dark,
-  color: "#fff",
+  color: theme.palette.common.white,
   textDecoration: "underline",
   padding: theme.spacing(1),
   paddingLeft: theme.spacing(3),
@@ -203,33 +209,25 @@ const Breadcrumbs: React.FC = () => {
 
   return (
     <BreadcrumbsRoot>
-      <Link
-        style={{
-          color: "#fff",
-          textDecoration: "none",
-        }}
+      <BreadcrumbsLink
         component={ReactNaviLink}
         href={"/"}
         prefetch={false}
         {...(isStandalone && { target: "_blank" })}
       >
         Plan✕
-      </Link>
+      </BreadcrumbsLink>
       {team.slug && (
         <>
           {" / "}
-          <Link
-            style={{
-              color: "#fff",
-              textDecoration: "none",
-            }}
+          <BreadcrumbsLink
             component={ReactNaviLink}
             href={`/${team.slug}`}
             prefetch={false}
             {...(isStandalone && { target: "_blank" })}
           >
             {team.slug}
-          </Link>
+          </BreadcrumbsLink>
         </>
       )}
       {route.data.flow && (
@@ -467,26 +465,32 @@ const EditorToolbar: React.FC<{
                       <MenuOpenIcon />
                     </IconButton>
                   )}
-                  <Box mr={1}>
+                  <Box mr={1}></Box>
+                  <IconButton
+                    edge="end"
+                    color="inherit"
+                    aria-label="Toggle Menu"
+                    onClick={handleMenuToggle}
+                    size="large"
+                  >
                     <Avatar
+                      component="span"
                       sx={{
                         bgcolor: grey[200],
                         color: "text.primary",
-                        fontSize: "1em",
+                        fontSize: "1rem",
                         fontWeight: "600",
+                        width: 33,
+                        height: 33,
+                        marginRight: "0.5rem",
                       }}
                     >
                       {user.firstName[0]}
                       {user.lastName[0]}
                     </Avatar>
-                  </Box>
-                  <IconButton
-                    edge="end"
-                    color="inherit"
-                    aria-label="Toggle Menu"
-                    onClick={handleMenuToggle}
-                    size="large"
-                  >
+                    <Typography variant="body2" fontSize="small">
+                      Account
+                    </Typography>
                     <KeyboardArrowDown />
                   </IconButton>
                 </ProfileSection>

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}`,
   }),
 }));
 

editor.planx.uk/src/pages/FlowEditor/components/GlobalMenu.tsx

@@ -0,0 +1,106 @@
+import AdminPanelSettingsIcon from "@mui/icons-material/AdminPanelSettings";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import TuneIcon from "@mui/icons-material/Tune";
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { useCurrentRoute, useNavigation } from "react-navi";
+import { rootFlowPath } from "routes/utils";
+import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+
+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.light}`,
+}));
+
+const MenuWrap = styled("ul")(({ theme }) => ({
+  listStyle: "none",
+  margin: 0,
+  padding: theme.spacing(2.5, 0.5, 0, 0.5),
+  position: "sticky",
+  top: 0,
+}));
+
+const MenuItem = styled("li")(({ theme }) => ({
+  margin: theme.spacing(0.75, 0),
+  padding: 0,
+}));
+
+const MenuTitle = styled(Typography)(({ theme }) => ({
+  fontWeight: FONT_WEIGHT_SEMI_BOLD,
+  paddingLeft: theme.spacing(0.75),
+  textAlign: "left",
+})) as typeof Typography;
+
+const MenuButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "isActive",
+})<{ isActive: boolean }>(({ theme, isActive }) => ({
+  color: theme.palette.text.primary,
+  width: "100%",
+  border: "1px solid transparent",
+  justifyContent: "flex-start",
+  borderRadius: "3px",
+  "&:hover": {
+    background: "white",
+    borderColor: theme.palette.border.light,
+  },
+  ...(isActive && {
+    background: theme.palette.common.white,
+    color: theme.palette.text.primary,
+    border: `1px solid ${theme.palette.border.light}`,
+  }),
+  "& > svg": {
+    width: "20px",
+  },
+}));
+
+function GlobalMenu() {
+  const { navigate } = useNavigation();
+  const { url } = useCurrentRoute();
+  const rootPath = rootFlowPath();
+
+  const isActive = (route: string) => url.pathname.endsWith(route);
+  const handleClick = (route: string) =>
+    !isActive(route) && navigate(rootPath + route);
+
+  const routes = [
+    {
+      title: "Select a team",
+      Icon: FormatListBulletedIcon,
+      route: "/",
+    },
+    {
+      title: "Admin panel",
+      Icon: AdminPanelSettingsIcon,
+      route: "admin-panel",
+    },
+    {
+      title: "Global settings",
+      Icon: TuneIcon,
+      route: "global-settings",
+    },
+  ];
+
+  return (
+    <Root>
+      <MenuWrap>
+        {routes.map(({ title, Icon, route }) => (
+          <MenuItem onClick={() => handleClick(route)} key={title}>
+            <MenuButton isActive={isActive(route)} disableRipple>
+              <Icon />
+              <MenuTitle variant="body2">{title}</MenuTitle>
+            </MenuButton>
+          </MenuItem>
+        ))}
+      </MenuWrap>
+    </Root>
+  );
+}
+
+export default GlobalMenu;

editor.planx.uk/src/pages/FlowEditor/components/Team/TeamMembers.tsx

@@ -11,10 +11,13 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
 import { Role, User } from "@opensystemslab/planx-core/types";
+import { Dashboard, DashboardWrap } from "pages/Teams";
 import React from "react";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
 import EditorRow from "ui/editor/EditorRow";
 
+import TeamMenu from "../TeamMenu";
+
 const StyledAvatar = styled(Avatar)(({ theme }) => ({
   background: theme.palette.background.dark,
   color: theme.palette.common.white,
@@ -127,39 +130,44 @@ export const TeamMembers: React.FC<Props> = ({ teamMembersByRole }) => {
   );
 
   return (
-    <Container maxWidth="contentWrap">
-      <Box py={7}>
-        <EditorRow>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Team editors
-          </Typography>
-          <Typography variant="body1">
-            Editors have access to edit your services.
-          </Typography>
-          <MembersTable members={activeMembers} />
-        </EditorRow>
-        <EditorRow>
-          <Typography variant="h2" component="h3" gutterBottom>
-            Admins
-          </Typography>
-          <Typography variant="body1">
-            Admins have editor access across all teams.
-          </Typography>
-          <MembersTable members={platformAdmins} />
-        </EditorRow>
-        {archivedMembers.length > 0 && (
-          <EditorRow>
-            <Typography variant="h2" component="h3" gutterBottom>
-              Archived team editors
-            </Typography>
-            <Typography variant="body1">
-              Past team members who no longer have access to the Editor, but may
-              be part of the edit history of your services.
-            </Typography>
-            <MembersTable members={archivedMembers} />
-          </EditorRow>
-        )}
-      </Box>
-    </Container>
+    <DashboardWrap>
+      <Dashboard>
+        <TeamMenu />
+        <Container maxWidth="contentWrap">
+          <Box py={3}>
+            <EditorRow>
+              <Typography variant="h2" component="h3" gutterBottom>
+                Team editors
+              </Typography>
+              <Typography variant="body1">
+                Editors have access to edit your services.
+              </Typography>
+              <MembersTable members={activeMembers} />
+            </EditorRow>
+            <EditorRow>
+              <Typography variant="h2" component="h3" gutterBottom>
+                Admins
+              </Typography>
+              <Typography variant="body1">
+                Admins have editor access across all teams.
+              </Typography>
+              <MembersTable members={platformAdmins} />
+            </EditorRow>
+            {archivedMembers.length > 0 && (
+              <EditorRow>
+                <Typography variant="h2" component="h3" gutterBottom>
+                  Archived team editors
+                </Typography>
+                <Typography variant="body1">
+                  Past team members who no longer have access to the Editor, but
+                  may be part of the edit history of your services.
+                </Typography>
+                <MembersTable members={archivedMembers} />
+              </EditorRow>
+            )}
+          </Box>
+        </Container>
+      </Dashboard>
+    </DashboardWrap>
   );
 };