refactor: Better handling of print CSS styles (#3774)

theopensystemslab · Oct 8, 2024 · dc85fa8 · dc85fa8
1 parent 97f4bf6
commit dc85fa8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -141,16 +141,15 @@ const Logo = styled("img")(() => ({
   maxWidth: 140,
   maxHeight: HEADER_HEIGHT_PUBLIC - 20,
   objectFit: "contain",
+  "@media print": {
+    filter: "invert(1)",
+  },
 }));
 
-const LogoLink = styled(Link)(({ theme }) => ({
+const LogoLink = styled(Link)(() => ({
   display: "flex",
   alignItems: "center",
   "&:focus-visible": borderedFocusStyle,
-  "@media print": {
-    backgroundColor: theme.palette.common.black,
-    padding: "0.25em",
-  },
 }));
 
 const SkipLink = styled("a")(({ theme }) => ({

diff --git a/editor.planx.uk/src/pages/layout/PublicLayout.tsx b/editor.planx.uk/src/pages/layout/PublicLayout.tsx
@@ -29,6 +29,13 @@ const MainContainer = styled(Box)(({ theme }) => ({
   position: "relative",
 }));
 
+const OglLogo = styled("img")(({ theme }) => ({
+  paddingRight: theme.spacing(2),
+  "@media print": {
+    filter: "invert(1)",
+  },
+}));
+
 const PublicFooter: React.FC = () => {
   const { data } = useCurrentRoute();
   const [flowSettings, globalSettings] = useStore((state) => [
@@ -68,19 +75,7 @@ const PublicFooter: React.FC = () => {
       <Feedback />
       <Footer items={[...footerItems]}>
         <Box display="flex" alignItems="center">
-          <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>
+          <OglLogo src={Logo} alt="Open Government License Logo" />
           <Typography variant="body2">
             All content is available under the{" "}
             <Link