Merge pull request #635 from bluewave-labs/feat/fallback-grid

Added background pattern to fallback pages

Client/src/Components/Fallback/index.jsx

@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
-import { Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography } from "@mui/material";
 import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import background from "../../assets/Images/background_pattern_decorative.png";
 import Button from "../Button";
 import Check from "../Check/Check";
 import { useNavigate } from "react-router-dom";
@@ -28,8 +29,12 @@ const Fallback = ({ title, checks, link = "/" }) => {
       alignItems="center"
       gap={theme.gap.xl}
     >
-      <Skeleton />
-      <Stack gap={theme.gap.small} maxWidth={"275px"}>
+      <Skeleton style={{ zIndex: 1 }} />
+      <Box
+        className="background-pattern-svg"
+        sx={{ backgroundImage: `url(${background})` }}
+      />
+      <Stack gap={theme.gap.small} maxWidth={"275px"} zIndex={1}>
         <Typography component="h1" marginY={theme.gap.medium}>
           A {title} is used to:
         </Typography>

Client/src/Layouts/HomeLayout/index.css

@@ -32,3 +32,28 @@
   min-height: calc(100vh - var(--env-var-spacing-2) * 2);
   flex: 1;
 }
+
+.home-layout > div:has(> [class*="fallback__"]) {
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+  border-style: dashed;
+  background-color: var(--env-var-color-8);
+  overflow: hidden;
+  position: relative;
+}
+.home-layout > div:has(> [class*="fallback__"]) .background-pattern-svg {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -33%);
+  z-index: 0;
+
+  width: 100%;
+  max-width: 800px;
+  height: 100%;
+  max-height: 800px;
+
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}