From 28a7c4da57be657d4ad5a8996b5f55254b915b3d Mon Sep 17 00:00:00 2001
From: Ian Jones <51156018+ianjon3s@users.noreply.github.com>
Date: Fri, 26 Jul 2024 11:25:21 +0100
Subject: [PATCH] feat: Reduced colour fill print css (#3459)

---
 editor.planx.uk/src/components/Footer.tsx         |  4 ++++
 editor.planx.uk/src/components/Header.tsx         | 14 +++++++++++---
 editor.planx.uk/src/pages/layout/PublicLayout.tsx | 12 +++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/editor.planx.uk/src/components/Footer.tsx b/editor.planx.uk/src/components/Footer.tsx
index eaee8e64f7..68ab360ced 100644
--- a/editor.planx.uk/src/components/Footer.tsx
+++ b/editor.planx.uk/src/components/Footer.tsx
@@ -14,6 +14,10 @@ const Root = styled("footer")(({ theme }) => ({
   [theme.breakpoints.up("md")]: {
     padding: theme.spacing(3, 0),
   },
+  "@media print": {
+    color: theme.palette.common.black,
+    backgroundColor: theme.palette.common.white,
+  },
 }));
 
 const ButtonGroup = styled(Box)(({ theme }) => ({
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index e3c94fa36c..a71b3ab326 100644
--- a/editor.planx.uk/src/components/Header.tsx
+++ b/editor.planx.uk/src/components/Header.tsx
@@ -140,10 +140,14 @@ const Logo = styled("img")(() => ({
   objectFit: "contain",
 }));
 
-const LogoLink = styled(Link)(() => ({
+const LogoLink = styled(Link)(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   "&:focus-visible": borderedFocusStyle,
+  "@media print": {
+    backgroundColor: theme.palette.common.black,
+    padding: "0.25em",
+  },
 }));
 
 const SkipLink = styled("a")(({ theme }) => ({
@@ -378,8 +382,9 @@ const PublicToolbar: React.FC<{
                   aria-label="Restart Application"
                   size="large"
                   aria-describedby="restart-application-description"
+                  sx={{ "@media print": { color: "black" } }}
                 >
-                  <Reset color="secondary" />
+                  <Reset color="inherit" />
                   <Typography
                     id="restart-application-description"
                     variant="body2"
@@ -580,7 +585,10 @@ const Header: React.FC = () => {
       elevation={0}
       color="transparent"
       ref={headerRef}
-      style={{ backgroundColor: theme?.primaryColour || "#2c2c2c" }}
+      sx={{
+        backgroundColor: theme?.primaryColour || "#2c2c2c",
+        "@media print": { backgroundColor: "white", color: "black" },
+      }}
     >
       <Toolbar headerRef={headerRef}></Toolbar>
     </Root>
diff --git a/editor.planx.uk/src/pages/layout/PublicLayout.tsx b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
index e3c63cd5fb..23df5c9232 100644
--- a/editor.planx.uk/src/pages/layout/PublicLayout.tsx
+++ b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
@@ -68,7 +68,17 @@ const PublicFooter: React.FC = () => {
       <Feedback />
       <Footer items={[...footerItems]}>
         <Box display="flex" alignItems="center">
-          <Box pr={2} display="flex">
+          <Box
+            pr={2}
+            display="flex"
+            sx={{
+              "@media print": {
+                backgroundColor: "black",
+                padding: "0.5em",
+                margin: "0.5em",
+              },
+            }}
+          >
             <img src={Logo} alt="Open Government License Logo" />
           </Box>
           <Typography variant="body2">