mirror/Checkmate
1
0
Fork 0
mirror of https://github.com/bluewave-labs/Checkmate.git synced 2026-01-07 02:09:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

add a background component

Browse Source
This commit is contained in:
Alex Holliday
2025-06-12 09:37:51 +08:00
parent 275f2384c0
commit 1574624f69
6 changed files with 91 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/App.jsx
View File

@@ -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>

30
client/src/Components/Layouts/AppLayout/index.jsx Normal file
View File

@@ -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;

1
client/src/Components/Sidebar/index.jsx
View File

@@ -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

1
client/src/Components/StarPrompt/index.jsx
View File

@@ -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

7
client/src/Utils/Theme/constants.js
View File

@@ -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,

49
client/src/assets/Images/background.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB