Merge pull request #420 from BigBen-7/feat/update-background-image

feat: centralize background image handling and clean up assets

frontend/src/App.jsx

@@ -28,7 +28,7 @@ function App() {
   const navigate = useNavigate();
   const [isMobileRestrictionModalOpen, setisMobileRestrictionModalOpen] = useState(true);
   const isMobile = useCheckMobile();
-  
+
   const disableDesktopOnMobile = process.env.REACT_APP_DISABLE_DESKTOP_ON_MOBILE !== 'false';
 
   const connectWalletMutation = useConnectWallet(setWalletId);
@@ -52,7 +52,6 @@ function App() {
     setShowModal(false);
   };
 
-
   const handleisMobileRestrictionModalClose = () => {
     setisMobileRestrictionModalOpen(false);
   };
@@ -70,15 +69,14 @@ function App() {
         })
         .catch((error) => {
           console.error('Error getting Telegram user wallet ID:', error);
-          notify('Error loading wallet', "error");
+          notify('Error loading wallet', 'error');
           window.Telegram.WebApp.ready();
         });
     }
   }, [window.Telegram?.WebApp?.initDataUnsafe]);
 
-
   return (
-    <div className="App">
+    <div className={`${location.pathname === '/' ? 'home' : 'App'}`}>
       <Notifier />
       {showModal &&
         createPortal(
@@ -124,4 +122,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

frontend/src/components/home/home/Home.jsx

@@ -9,17 +9,16 @@ import './home.css';
 import { useWalletStore } from '../../../stores/useWalletStore';
 import { notify } from '../../layout/notifier/Notifier';
 
-
 function Home() {
-      const { walletId } = useWalletStore();
+  const { walletId } = useWalletStore();
 
   const navigate = useNavigate();
 
   const handleLaunchApp = async () => {
     if (walletId) {
       navigate('/form');
     } else {
-      notify('Please connect to your wallet', "warning");
+      notify('Please connect to your wallet', 'warning');
     }
   };
 

frontend/src/components/home/home/home.css

@@ -19,7 +19,7 @@ body {
   text-align: center;
   margin-top: 10px;
   width: 100%;
-  pointer-events: none;
+  pointer-events: auto;
 }
 
 .center-text-container {

frontend/src/components/ui/Button/index.js

@@ -1 +1 @@
-export {default as Button} from './Button';
+export { default as Button } from './Button';

frontend/src/globals.css

@@ -67,9 +67,9 @@
   --light-dark-background: #130713;
   --text-gray: #798795;
   --modal-border: #170f2e;
-  --warning-colour:#BDC000;
-  --warning-colour-alt: #272A0A;
-  --warning-text-colour: #F0F0F0;
+  --warning-colour: #bdc000;
+  --warning-colour-alt: #272a0a;
+  --warning-text-colour: #f0f0f0;
 }
 
 body {
@@ -98,3 +98,19 @@ li {
 a.svelte-1mtuslq.svelte-1mtuslq {
   display: none;
 }
+
+.App {
+  background: url('../public/desktop-background.png') no-repeat;
+  background-size: cover;
+  min-height: 100vh;
+  box-sizing: border-box;
+}
+
+@media (max-width: 550px) {
+  .App {
+    background: url('../public/mobile-background.png') no-repeat;
+    background-size: cover;
+    background-position: 50% 40%;
+    height: 100%;
+  }
+}

frontend/src/pages/dashboard/dashboard.css

@@ -9,9 +9,6 @@ body {
 
 .dashboard-wrapper {
   position: relative;
-  background: url('../../../public/Form-bg.png') no-repeat;
-  background-size: cover;
-  background-position: center left;
   min-height: 100vh;
   display: flex;
   justify-content: center;
@@ -342,9 +339,6 @@ body {
 
 @media (max-width: 550px) {
   .dashboard-wrapper {
-    background: url('../../../public/dashboardmobile.png') no-repeat;
-    background-size: cover;
-    background-position: 50% 40%;
     height: 100%;
   }
   .dashboard-title {

frontend/src/pages/documentation/documentation.css

@@ -24,9 +24,6 @@
 .main-content {
   margin-left: 370px;
   flex: 1;
-  background: url('../../../public/background.png') no-repeat;
-  background-size: cover;
-  background-position: center 39%;
   position: relative;
   min-height: 100vh;
 }

frontend/src/pages/form/form.css

@@ -1,7 +1,4 @@
 .form-content-wrapper {
-  background: url('/public/background.png') no-repeat;
-  background-size: cover;
-  background-position: center 50%;
   display: flex;
   flex-direction: column;
   gap: 30px;

frontend/src/pages/overview/overview.css

@@ -1,7 +1,4 @@
 .overview-container {
-  background: url('../../../public/background.png') no-repeat;
-  background-size: cover;
-  background-position: center 39%;
   min-height: 100vh;
   min-width: 100vw;
   max-width: 1440px;

frontend/src/pages/position-history/positionHistory.css

@@ -1,6 +1,4 @@
 .position-wrapper {
-  background: url('../../../public/background.png') no-repeat center center;
-  background-size: cover;
   min-height: 100vh;
   padding: 1rem;
   box-sizing: border-box;