feat: Environment dependant header chip styling (#3717)

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

@@ -1,11 +1,14 @@
 import Edit from "@mui/icons-material/Edit";
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import OpenInNewOffIcon from "@mui/icons-material/OpenInNewOff";
 import Person from "@mui/icons-material/Person";
 import Visibility from "@mui/icons-material/Visibility";
 import AppBar from "@mui/material/AppBar";
 import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
 import { grey } from "@mui/material/colors";
 import Container from "@mui/material/Container";
 import IconButton from "@mui/material/IconButton";
@@ -172,6 +175,8 @@ const SkipLink = styled("a")(({ theme }) => ({
 
 const ServiceTitleRoot = styled("span")(({ theme }) => ({
   display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(1),
   flexGrow: 1,
   flexShrink: 1,
   lineHeight: LINE_HEIGHT_BASE,
@@ -428,9 +433,24 @@ const PublicToolbar: React.FC<{
 
 const ServiceTitle: React.FC = () => {
   const flowName = useStore((state) => state.flowName);
+  const route = useCurrentRoute();
+  const path = route.url.pathname.split("/").slice(-1)[0];
 
   return (
     <ServiceTitleRoot data-testid="service-title">
+      {(path === "preview" || path === "draft") && (
+        <Chip
+          label={capitalize(path)}
+          variant="notApplicableTag"
+          size="medium"
+          icon={
+            {
+              preview: <OpenInNewIcon fontSize="small" />,
+              draft: <OpenInNewOffIcon fontSize="small" />,
+            }[path]
+          }
+        />
+      )}
       <Typography component="span" variant="h4">
         {flowName}
       </Typography>