style: Tighten editor interface layout (#3455)

theopensystemslab · Jul 25, 2024 · 1703feb · 1703feb
1 parent fbfcf9f
commit 1703feb
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 27 deletions.
diff --git a/editor.planx.uk/src/components/EditorNavMenu.tsx b/editor.planx.uk/src/components/EditorNavMenu.tsx
@@ -24,8 +24,8 @@ interface Route {
   accessibleBy: Role[];
 }
 
-const MENU_WIDTH_COMPACT = "52px";
-const MENU_WIDTH_FULL = "178px";
+const MENU_WIDTH_COMPACT = "51px";
+const MENU_WIDTH_FULL = "164px";
 
 const Root = styled(Box, {
   shouldForwardProp: (prop) => prop !== "compact",
@@ -218,8 +218,8 @@ function EditorNavMenu() {
               </TooltipWrap>
             ) : (
               <MenuButton isActive={isActive(route)} disableRipple>
-                <Icon />
-                <MenuTitle variant="body2">{title}</MenuTitle>
+                <Icon fontSize="small" />
+                <MenuTitle variant="body3">{title}</MenuTitle>
               </MenuButton>
             )}
           </MenuItem>

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -37,7 +37,6 @@ import {
   LINE_HEIGHT_BASE,
 } from "theme";
 import { ApplicationPath } from "types";
-import Permission from "ui/editor/Permission";
 import Reset from "ui/icons/Reset";
 
 import { useStore } from "../pages/FlowEditor/lib/store";
@@ -46,7 +45,8 @@ import AnalyticsDisabledBanner from "./AnalyticsDisabledBanner";
 import { ConfirmationDialog } from "./ConfirmationDialog";
 import TestEnvironmentBanner from "./TestEnvironmentBanner";
 
-export const HEADER_HEIGHT = 74;
+const HEADER_HEIGHT_PUBLIC = 74;
+export const HEADER_HEIGHT_EDITOR = 56;
 
 const Root = styled(AppBar)(({ theme }) => ({
   color: theme.palette.common.white,
@@ -66,8 +66,19 @@ const BreadcrumbsLink = styled(Link)(({ theme }) => ({
   borderBottom: "1px solid rgba(255, 255, 255, 0.75)",
 })) as typeof Link;
 
-const StyledToolbar = styled(MuiToolbar)(() => ({
-  height: HEADER_HEIGHT,
+const PublicHeader = styled(MuiToolbar)(() => ({
+  height: HEADER_HEIGHT_PUBLIC,
+}));
+
+const EditorHeader = styled(MuiToolbar)(({ theme }) => ({
+  [theme.breakpoints.up("md")]: {
+    minHeight: HEADER_HEIGHT_EDITOR,
+  },
+}));
+
+const EditorHeaderContainer = styled(Box)(({ theme }) => ({
+  width: "100%",
+  padding: theme.spacing(0, 2),
 }));
 
 const InnerContainer = styled(Box)(() => ({
@@ -97,6 +108,9 @@ const ProfileSection = styled(MuiToolbar)(({ theme }) => ({
   justifyContent: "space-between",
   alignItems: "center",
   marginRight: theme.spacing(1),
+  [theme.breakpoints.up("md")]: {
+    minHeight: HEADER_HEIGHT_EDITOR,
+  },
 }));
 
 const StyledPopover = styled(Popover)(({ theme }) => ({
@@ -119,10 +133,10 @@ const StyledPaper = styled(Paper)(({ theme }) => ({
 }));
 
 const Logo = styled("img")(() => ({
-  height: HEADER_HEIGHT - 5,
+  height: HEADER_HEIGHT_PUBLIC - 5,
   width: "100%",
   maxWidth: 140,
-  maxHeight: HEADER_HEIGHT - 20,
+  maxHeight: HEADER_HEIGHT_PUBLIC - 20,
   objectFit: "contain",
 }));
 
@@ -135,7 +149,7 @@ const LogoLink = styled(Link)(() => ({
 const SkipLink = styled("a")(({ theme }) => ({
   tabIndex: 0,
   width: "100vw",
-  height: HEADER_HEIGHT / 2,
+  height: HEADER_HEIGHT_PUBLIC / 2,
   backgroundColor: theme.palette.background.dark,
   color: theme.palette.common.white,
   textDecoration: "underline",
@@ -214,6 +228,7 @@ const Breadcrumbs: React.FC = () => {
         href={"/"}
         prefetch={false}
         {...(isStandalone && { target: "_blank" })}
+        variant="body1"
       >
         Plan✕
       </BreadcrumbsLink>
@@ -225,6 +240,7 @@ const Breadcrumbs: React.FC = () => {
             href={`/${team.slug}`}
             prefetch={false}
             {...(isStandalone && { target: "_blank" })}
+            variant="body1"
           >
             {team.slug}
           </BreadcrumbsLink>
@@ -241,6 +257,7 @@ const Breadcrumbs: React.FC = () => {
             component={ReactNaviLink}
             href={rootFlowPath(false)}
             prefetch={false}
+            variant="body1"
           >
             {route.data.flow}
           </Link>
@@ -249,9 +266,9 @@ const Breadcrumbs: React.FC = () => {
       {route.data.flow && (
         <>
           {useStore.getState().canUserEditTeam(team.slug) ? (
-            <Edit />
+            <Edit fontSize="small" />
           ) : (
-            <Visibility />
+            <Visibility fontSize="small" />
           )}
         </>
       )}
@@ -290,7 +307,6 @@ const NavBar: React.FC = () => {
               display: "flex",
               flexDirection: "column",
               justifyContent: "center",
-              minHeight: HEADER_HEIGHT,
             }}
           >
             <SectionCount>{`Section ${index} of ${sectionCount}`}</SectionCount>
@@ -347,7 +363,7 @@ const PublicToolbar: React.FC<{
   return (
     <>
       <SkipLink href="#main-content">Skip to main content</SkipLink>
-      <StyledToolbar disableGutters>
+      <PublicHeader disableGutters>
         <Container maxWidth={false}>
           <InnerContainer>
             <LeftBox>
@@ -378,7 +394,7 @@ const PublicToolbar: React.FC<{
             </RightBox>
           </InnerContainer>
         </Container>
-      </StyledToolbar>
+      </PublicHeader>
       {!showCentredServiceTitle && (
         <Container maxWidth={false}>
           <ServiceTitle />
@@ -438,8 +454,8 @@ const EditorToolbar: React.FC<{
 
   return (
     <>
-      <StyledToolbar disableGutters>
-        <Container maxWidth={false}>
+      <EditorHeader disableGutters>
+        <EditorHeaderContainer>
           <InnerContainer>
             <LeftBox>
               <Breadcrumbs />
@@ -464,6 +480,7 @@ const EditorToolbar: React.FC<{
                     aria-label="Toggle Menu"
                     onClick={handleMenuToggle}
                     size="large"
+                    sx={{ padding: "0.25em" }}
                   >
                     <Avatar
                       component="span"
@@ -480,7 +497,7 @@ const EditorToolbar: React.FC<{
                       {user.firstName[0]}
                       {user.lastName[0]}
                     </Avatar>
-                    <Typography variant="body2" fontSize="small">
+                    <Typography variant="body3">
                       Account
                     </Typography>
                     <KeyboardArrowDown />
@@ -489,8 +506,8 @@ const EditorToolbar: React.FC<{
               )}
             </RightBox>
           </InnerContainer>
-        </Container>
-      </StyledToolbar>
+        </EditorHeaderContainer>
+      </EditorHeader>
       <TestEnvironmentBanner />
       {user && (
         <StyledPopover

diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -2,7 +2,7 @@ import "./floweditor.scss";
 
 import Box from "@mui/material/Box";
 import { styled } from "@mui/material/styles";
-import { HEADER_HEIGHT } from "components/Header";
+import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import React, { useRef } from "react";
 
 import { rootFlowPath } from "../../routes/utils";
@@ -16,7 +16,7 @@ const EditorContainer = styled(Box)(() => ({
   alignItems: "stretch",
   overflow: "hidden",
   flexGrow: 1,
-  maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  maxHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
 const FlowEditor: React.FC<any> = ({ flow, breadcrumbs }) => {

diff --git a/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx b/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx
@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import { containerClasses } from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import EditorNavMenu from "components/EditorNavMenu";
-import { HEADER_HEIGHT } from "components/Header";
+import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import React, { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -22,11 +22,15 @@ const DashboardContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: "100%",
-  minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
+  minHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
   overflow: "hidden",
   [`& > .${containerClasses.root}`]: {
-    paddingTop: theme.spacing(5),
-    paddingBottom: theme.spacing(5),
+    paddingTop: theme.spacing(3),
+    paddingBottom: theme.spacing(3),
+    [theme.breakpoints.up("lg")]: {
+      paddingTop: theme.spacing(5),
+      paddingBottom: theme.spacing(5),
+    },
   },
 }));
 

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -188,6 +188,9 @@ const getThemeOptions = ({
       body2: {
         fontSize: "1rem",
       },
+      body3: {
+        fontSize: "0.913rem",
+      }
     },
     palette,
     breakpoints: {

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -1,6 +1,8 @@
 import "@mui/material/Chip";
 // eslint-disable-next-line no-restricted-imports
 import "@mui/material/styles/createPalette";
+import "@mui/material/styles";
+import "@mui/material/Typography";
 
 import { RadioProps } from "@mui/material/Radio";
 
@@ -92,3 +94,20 @@ declare module "@mui/material" {
     variant?: keyof RadioPropsVariantOverrides;
   }
 }
+
+
+// Add a new typography variant "body3" for use in the editor
+declare module "@mui/material/styles" {
+  interface TypographyVariants {
+    body3: React.CSSProperties;
+  }
+  interface TypographyVariantsOptions {
+    body3?: React.CSSProperties;
+  }
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    body3: true;
+  }
+}