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" } }} > - + { elevation={0} color="transparent" ref={headerRef} - style={{ backgroundColor: theme?.primaryColour || "#2c2c2c" }} + sx={{ + backgroundColor: theme?.primaryColour || "#2c2c2c", + "@media print": { backgroundColor: "white", color: "black" }, + }} > 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 = () => {