chore: Dark background colour as variable

theopensystemslab · Apr 25, 2024 · 64ecc0c · 64ecc0c
1 parent 040d257
commit 64ecc0c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
@@ -93,16 +93,16 @@ const ProfileSection = styled(MuiToolbar)(({ theme }) => ({
   marginRight: theme.spacing(1),
 }));
 
-const StyledPopover = styled(Popover)(() => ({
+const StyledPopover = styled(Popover)(({ theme }) => ({
   [`& .${popoverClasses.paper}`]: {
     boxShadow: "4px 4px 0px rgba(150, 150, 150, 0.5)",
-    backgroundColor: "#2c2c2c",
+    backgroundColor: theme.palette.background.dark,
     borderRadius: 0,
   },
 }));
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
-  backgroundColor: "#2c2c2c",
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   borderRadius: 0,
   boxShadow: "none",
@@ -130,7 +130,7 @@ const SkipLink = styled("a")(({ theme }) => ({
   tabIndex: 0,
   width: "100vw",
   height: HEADER_HEIGHT / 2,
-  backgroundColor: "#2c2c2c",
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   textDecoration: "underline",
   padding: theme.spacing(1),

diff --git a/editor.planx.uk/src/pages/ErrorPage.tsx b/editor.planx.uk/src/pages/ErrorPage.tsx
@@ -3,9 +3,9 @@ import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import React, { PropsWithChildren } from "react";
 
-const Root = styled(Box)(() => ({
+const Root = styled(Box)(({ theme }) => ({
   backgroundColor: "#fff",
-  color: "#2C2C2C",
+  color: theme.palette.background.dark,
   width: "100%",
   flex: 1,
   justifyContent: "flex-start",
@@ -14,7 +14,7 @@ const Root = styled(Box)(() => ({
 
 const Dashboard = styled(Box)(({ theme }) => ({
   backgroundColor: "#fff",
-  color: "#2C2C2C",
+  color: theme.palette.background.dark,
   width: "100%",
   maxWidth: 600,
   margin: "auto",

diff --git a/editor.planx.uk/src/pages/Team.tsx b/editor.planx.uk/src/pages/Team.tsx
@@ -21,8 +21,8 @@ import { client } from "../lib/graphql";
 import SimpleMenu from "../ui/editor/SimpleMenu";
 import { useStore } from "./FlowEditor/lib/store";
 
-const Root = styled(Box)(() => ({
-  backgroundColor: "#2C2C2C",
+const Root = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   width: "100%",
   flex: 1,
@@ -31,7 +31,7 @@ const Root = styled(Box)(() => ({
 }));
 
 const Dashboard = styled(Box)(({ theme }) => ({
-  backgroundColor: "#2C2C2C",
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   width: "100%",
   maxWidth: 600,

diff --git a/editor.planx.uk/src/pages/Teams.tsx b/editor.planx.uk/src/pages/Teams.tsx
@@ -14,8 +14,8 @@ interface Props {
   teams: Array<Team>;
 }
 
-const Root = styled(Box)(() => ({
-  backgroundColor: "#2C2C2C",
+const Root = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   width: "100%",
   flex: 1,
@@ -24,7 +24,7 @@ const Root = styled(Box)(() => ({
 }));
 
 const Dashboard = styled(Box)(({ theme }) => ({
-  backgroundColor: "#2C2C2C",
+  backgroundColor: theme.palette.background.dark,
   color: "#fff",
   width: "100%",
   maxWidth: 600,

diff --git a/editor.planx.uk/src/theme.ts b/editor.planx.uk/src/theme.ts
@@ -35,6 +35,7 @@ const DEFAULT_PALETTE: Partial<PaletteOptions> = {
   background: {
     default: "#FFFFFF",
     paper: "#F9F8F8",
+    dark: "#2c2c2c",
   },
   secondary: {
     main: "#F3F2F1",

diff --git a/editor.planx.uk/src/themeOverrides.d.ts b/editor.planx.uk/src/themeOverrides.d.ts
@@ -53,6 +53,18 @@ declare module "@mui/material/styles/createPalette" {
     disabled: string;
     placeholder: string;
   }
+
+  interface TypeBackground {
+    main: string;
+    paper: string;
+    dark: string;
+  }
+
+  interface TypeBackgroundOptions {
+    main: string;
+    paper: string;
+    dark: string;
+  }
 }
 
 // Append our custom variants to MUI Button