From d3ca91a106069d6d6439852316677713c75f0c80 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 20 Sep 2024 11:15:17 +0100
Subject: [PATCH 1/3] feat: Environment dependant header chip styling

---
 editor.planx.uk/src/components/Header.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index e15200994e..b1c72388db 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -1,11 +1,13 @@
 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 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 +174,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,
@@ -431,6 +435,12 @@ const ServiceTitle: React.FC = () => {
 
   return (
     <ServiceTitleRoot data-testid="service-title">
+      <Chip
+        label="Preview"
+        variant="notApplicableTag"
+        size="medium"
+        icon={<OpenInNewIcon />}
+      />
       <Typography component="span" variant="h4">
         {flowName}
       </Typography>

From 4c34a374ec563f7614dd9495b43fe62edb2e5091 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 20 Sep 2024 12:21:44 +0100
Subject: [PATCH 2/3] update chip and icon based on path

---
 editor.planx.uk/src/components/Header.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index b1c72388db..4bf05a9f51 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -2,6 +2,7 @@ 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";
@@ -432,15 +433,25 @@ 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">
-      <Chip
-        label="Preview"
-        variant="notApplicableTag"
-        size="medium"
-        icon={<OpenInNewIcon />}
-      />
+      {(path === "preview" || path === "draft") && (
+        <Chip
+          label={capitalize(path)}
+          variant="notApplicableTag"
+          size="medium"
+          icon={
+            path === "preview" ? (
+              <OpenInNewIcon fontSize="small" />
+            ) : (
+              <OpenInNewOffIcon fontSize="small" />
+            )
+          }
+        />
+      )}
       <Typography component="span" variant="h4">
         {flowName}
       </Typography>

From f8ad28fb8bf8b0684c6d06097cda37ea6fe3c021 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Mon, 23 Sep 2024 10:02:00 +0100
Subject: [PATCH 3/3] clean up code

---
 editor.planx.uk/src/components/Header.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index 4bf05a9f51..622d368bf7 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -444,11 +444,10 @@ const ServiceTitle: React.FC = () => {
           variant="notApplicableTag"
           size="medium"
           icon={
-            path === "preview" ? (
-              <OpenInNewIcon fontSize="small" />
-            ) : (
-              <OpenInNewOffIcon fontSize="small" />
-            )
+            {
+              preview: <OpenInNewIcon fontSize="small" />,
+              draft: <OpenInNewOffIcon fontSize="small" />,
+            }[path]
           }
         />
       )}