feat: Reduced colour fill print css (#3459)

theopensystemslab · Jul 26, 2024 · 28a7c4d · 28a7c4d
1 parent 836503b
commit 28a7c4d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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">