From 1574624f690031c50efa705bcdccc8657882d2ad Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 12 Jun 2025 09:37:51 +0800
Subject: [PATCH] add a background component

---
 client/src/App.jsx                            | 16 ++----
 .../Components/Layouts/AppLayout/index.jsx    | 30 ++++++++++++
 client/src/Components/Sidebar/index.jsx       |  1 -
 client/src/Components/StarPrompt/index.jsx    |  1 -
 client/src/Utils/Theme/constants.js           |  7 +++
 client/src/assets/Images/background.svg       | 49 +++++++++++++++++++
 6 files changed, 91 insertions(+), 13 deletions(-)
 create mode 100644 client/src/Components/Layouts/AppLayout/index.jsx
 create mode 100644 client/src/assets/Images/background.svg

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 7fb63ee61..b599890f1 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -10,6 +10,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
 import WalletProvider from "./Components/WalletProvider";
+import AppLayout from "./Components/Layouts/AppLayout";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
@@ -27,17 +28,10 @@ function App() {
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
 			<WalletProvider>
 				<CssBaseline />
-				<GlobalStyles
-					styles={({ palette }) => {
-						return {
-							body: {
-								backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`,
-								color: palette.primary.contrastText,
-							},
-						};
-					}}
-				/>
-				<Routes />
+
+				<AppLayout>
+					<Routes />
+				</AppLayout>
 				<ToastContainer />
 			</WalletProvider>
 		</ThemeProvider>
diff --git a/client/src/Components/Layouts/AppLayout/index.jsx b/client/src/Components/Layouts/AppLayout/index.jsx
new file mode 100644
index 000000000..564012d72
--- /dev/null
+++ b/client/src/Components/Layouts/AppLayout/index.jsx
@@ -0,0 +1,30 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import BackgroundSVG from "../../../assets/Images/background.svg";
+
+const AppLayout = ({ children }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			sx={{
+				minHeight: "100vh",
+				backgroundColor: theme.palette.primaryBackground.main,
+				backgroundImage: `url("${BackgroundSVG}")`,
+				backgroundSize: "100% 100%",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+				color: theme.palette.primary.contrastText,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+AppLayout.propTypes = {
+	children: PropTypes.node,
+};
+
+export default AppLayout;
diff --git a/client/src/Components/Sidebar/index.jsx b/client/src/Components/Sidebar/index.jsx
index 6be67a43d..f487148f5 100644
--- a/client/src/Components/Sidebar/index.jsx
+++ b/client/src/Components/Sidebar/index.jsx
@@ -231,7 +231,6 @@ function Sidebar() {
 				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
 				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 0,
-				backgroundColor: theme.palette.primary.main,
 				"& :is(p, span, .MuiListSubheader-root)": {
 					/* 
 					Text color for unselected menu items and menu headings
diff --git a/client/src/Components/StarPrompt/index.jsx b/client/src/Components/StarPrompt/index.jsx
index 8bf434085..64fce1d3f 100644
--- a/client/src/Components/StarPrompt/index.jsx
+++ b/client/src/Components/StarPrompt/index.jsx
@@ -33,7 +33,6 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 				borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
 				borderRadius: 0,
 				gap: theme.spacing(1.5),
-				backgroundColor: theme.palette.primary.main,
 			}}
 		>
 			<Stack
diff --git a/client/src/Utils/Theme/constants.js b/client/src/Utils/Theme/constants.js
index 920a55f69..48dcdfd85 100644
--- a/client/src/Utils/Theme/constants.js
+++ b/client/src/Utils/Theme/constants.js
@@ -85,6 +85,7 @@ const semanticColors = {
 const newColors = {
 	offWhite: "#FEFEFE",
 	offBlack: "#131315",
+	gray10: "#F4F4FF",
 	gray100: "#F3F3F3",
 	gray200: "#EFEFEF",
 	gray500: "#A2A3A3",
@@ -175,6 +176,12 @@ const newSemanticColors = {
 			dark: newColors.blueGray600,
 		},
 	},
+	primaryBackground: {
+		main: {
+			light: newColors.gray10,
+			dark: "#000000",
+		},
+	},
 	secondary: {
 		main: {
 			light: newColors.gray200,
diff --git a/client/src/assets/Images/background.svg b/client/src/assets/Images/background.svg
new file mode 100644
index 000000000..728597e95
--- /dev/null
+++ b/client/src/assets/Images/background.svg
@@ -0,0 +1,49 @@
+<svg width="1440" height="1025" viewBox="0 0 1440 1025" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_f_563_20635)">
+        <ellipse cx="971.521" cy="1024.07" rx="278.644" ry="273.684" fill="#7054FF" fill-opacity="0.2" />
+    </g>
+    <g filter="url(#filter1_f_563_20635)">
+        <ellipse cx="44.3184" cy="1161.28" rx="513.227" ry="529.699" fill="#7282FF" fill-opacity="0.12" />
+    </g>
+    <g filter="url(#filter2_f_563_20635)">
+        <ellipse cx="1484.89" cy="1016.24" rx="376.575" ry="404.555" fill="#4C7FFF" fill-opacity="0.2" />
+    </g>
+    <g filter="url(#filter3_f_563_20635)">
+        <ellipse cx="505.276" cy="-87.3996" rx="339.168" ry="238.417" fill="#7054FF" fill-opacity="0.2" />
+    </g>
+    <g filter="url(#filter4_f_563_20635)">
+        <ellipse cx="915.714" cy="-111.32" rx="358.17" ry="325.578" fill="#4C7FFF" fill-opacity="0.16" />
+    </g>
+    <defs>
+        <filter id="filter0_f_563_20635" x="212.877" y="270.389" width="1517.29" height="1507.37"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="240" result="effect1_foregroundBlur_563_20635" />
+        </filter>
+        <filter id="filter1_f_563_20635" x="-948.908" y="151.583" width="1986.45" height="2019.4"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="240" result="effect1_foregroundBlur_563_20635" />
+        </filter>
+        <filter id="filter2_f_563_20635" x="628.316" y="131.683" width="1713.15" height="1769.11"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="240" result="effect1_foregroundBlur_563_20635" />
+        </filter>
+        <filter id="filter3_f_563_20635" x="-313.893" y="-805.816" width="1638.34" height="1436.83"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="240" result="effect1_foregroundBlur_563_20635" />
+        </filter>
+        <filter id="filter4_f_563_20635" x="77.5449" y="-916.898" width="1676.34" height="1611.16"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation="240" result="effect1_foregroundBlur_563_20635" />
+        </filter>
+    </defs>
+</svg>
\ No newline at end of file