From 1f0744b45511038c94e09e74aa205041122462ce Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Tue, 1 Oct 2024 14:59:58 +0100
Subject: [PATCH] alter ServiceSection to include background boolean

---
 editor.planx.uk/src/ui/editor/SettingsSection.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/editor.planx.uk/src/ui/editor/SettingsSection.tsx b/editor.planx.uk/src/ui/editor/SettingsSection.tsx
index f53393df59..c6497a2bcc 100644
--- a/editor.planx.uk/src/ui/editor/SettingsSection.tsx
+++ b/editor.planx.uk/src/ui/editor/SettingsSection.tsx
@@ -3,7 +3,9 @@ import { styled } from "@mui/material/styles";
 import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
 import React, { ReactNode } from "react";
 
-const Root = styled(Box)(({ bgcolor, theme }) => ({
+const Root = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "background",
+})<BoxProps & { background?: boolean }>(({ background, theme }) => ({
   display: "block",
   width: "100%",
   marginTop: theme.spacing(2),
@@ -14,7 +16,7 @@ const Root = styled(Box)(({ bgcolor, theme }) => ({
   "& > * + *, & > form > * + *": {
     ...contentFlowSpacing(theme),
   },
-  ...(bgcolor && {
+  ...(background && {
     background: theme.palette.background.paper,
     marginTop: theme.spacing(2),
     padding: theme.spacing(2.5),
@@ -23,7 +25,7 @@ const Root = styled(Box)(({ bgcolor, theme }) => ({
 }));
 
 export default function SettingsSection(
-  props: { children: ReactNode } & Partial<BoxProps>,
+  props: { children: ReactNode; background?: boolean } & Partial<BoxProps>,
 ) {
   return <Root {...props}>{props.children}</Root>;
 }