From 82ce2ba0ad9c4b323b0e48ae0a3116170c0c5a65 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 14 Aug 2024 17:47:19 -0400
Subject: [PATCH] Added background pattern to fallback pages

---
 Client/src/Components/Fallback/index.jsx | 11 ++++++++---
 Client/src/Layouts/HomeLayout/index.css  | 25 ++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index 164753104..976440f7d 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/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>
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index a62016a60..2798bd292 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/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;
+}