feat: Updated editor header styles (#3301)

theopensystemslab · Jun 20, 2024 · 3e06283 · 3e06283
1 parent dd70f91
commit 3e06283
Showing 1 changed file with 31 additions and 28 deletions.
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -19,7 +19,6 @@ import { styled, Theme } from "@mui/material/styles";
 import MuiToolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { visuallyHidden } from "@mui/utils";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { clearLocalFlow } from "lib/local";
 import { capitalize } from "lodash";
@@ -48,8 +47,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 +59,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 +108,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 +136,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 +208,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 +464,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",
-                        fontWeight: "600",
+                        fontSize: "1rem",
+                        fontWeight: FONT_WEIGHT_SEMI_BOLD,
+                        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">
+                      Menu
+                    </Typography>
                     <KeyboardArrowDown />
                   </IconButton>
                 </ProfileSection>