From 64ecc0c26d89c40ed9d2f6c214f754555a201358 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 25 Apr 2024 14:44:38 +0100
Subject: [PATCH] chore: Dark background colour as variable

---
 editor.planx.uk/src/components/Header.tsx |  8 ++++----
 editor.planx.uk/src/pages/ErrorPage.tsx   |  6 +++---
 editor.planx.uk/src/pages/Team.tsx        |  6 +++---
 editor.planx.uk/src/pages/Teams.tsx       |  6 +++---
 editor.planx.uk/src/theme.ts              |  1 +
 editor.planx.uk/src/themeOverrides.d.ts   | 12 ++++++++++++
 6 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/editor.planx.uk/src/components/Header.tsx b/editor.planx.uk/src/components/Header.tsx
index 0078c4d336..b5a6acd96d 100644
--- 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
index 26c77da309..3ba3873f18 100644
--- 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
index 50a200ef10..cecc0b0e8f 100644
--- 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
index ebc9a2cdcc..ea11e0d1b1 100644
--- 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
index b053e2b1cc..7dc24af50b 100644
--- 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
index 079fc17abd..a23b94e5a1 100644
--- 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