update bg

packages/web-wallet/src/App.tsx

@@ -1,13 +1,20 @@
 import { useInterval } from 'usehooks-ts';
 import { useWebZjsActions } from '@hooks/useWebzjsActions.ts';
 import Layout from '@components/Layout/Layout.tsx';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { RESCAN_INTERVAL } from './config/constants.ts';
+import { useEffect } from 'react';
 
 function App() {
   const { triggerRescan } = useWebZjsActions();
+  const location = useLocation();
+
+  useEffect(() => {
+    // Add custom background to home page
+    document.body.classList.remove('home-page-bg');
+    if (location.pathname === '/') document.body.classList.add('home-page-bg');
+  }, [location]);
 
-  // rescan the wallet periodically
   useInterval(() => {
     triggerRescan();
   }, RESCAN_INTERVAL);

packages/web-wallet/src/styles/index.css

@@ -27,32 +27,36 @@
 
 body {
   position: relative;
-  background: linear-gradient(180deg, #fff 0%, #bcefef 187.66%);
   overflow: hidden;
+  background: #FAFAFA url('../assets/diamond-bg.png') no-repeat center center fixed;
 
-  /* Noise background */
-  &:before {
-    content: '';
-    position: absolute;
-    width: 100vw;
-    height: 100vh;
-    z-index: -1;
-    opacity: 0.25;
-    background: url('../assets/noise.png') lightgray 0 0 / 15px 15px repeat;
-    mix-blend-mode: color-burn;
-  }
+  &.home-page-bg {
+    background: linear-gradient(180deg, #fff 0%, #bcefef 187.66%);
+
+    /* Noise background */
+    &:before {
+      content: '';
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
+      z-index: -1;
+      opacity: 0.25;
+      background: url('../assets/noise.png') lightgray 0 0 / 15px 15px repeat;
+      mix-blend-mode: color-burn;
+    }
 
-  /* Yellow oval shape background */
-  &:after {
-    content: '';
-    position: absolute;
-    width: 75.5vw;
-    height: 88.1875rem;
-    top: 20rem;
-    left: 2.5rem;
-    z-index: -1;
-    border-radius: 88.1875rem;
-    background: rgba(187, 160, 17, 0.5);
-    filter: blur(274px);
+    /* Yellow oval shape background */
+    &:after {
+      content: '';
+      position: absolute;
+      width: 75.5vw;
+      height: 88.1875rem;
+      top: 20rem;
+      left: 2.5rem;
+      z-index: -1;
+      border-radius: 88.1875rem;
+      background: rgba(187, 160, 17, 0.5);
+      filter: blur(274px);
+    }
   }
 }