feat: centralize background image handling and clean up assets

djeck1432 · Dec 20, 2024 · 1a4cc2e · 1a4cc2e
1 parent a1eebe4
commit 1a4cc2e
Show file tree

Hide file tree

Showing 14 changed files with 25 additions and 27 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Spotnet"]
+}
diff --git a/frontend/public/background.png → frontend/public/desktop-background.png b/frontend/public/background.png → frontend/public/desktop-background.png
diff --git a/frontend/public/dashboardmobile.png → frontend/public/mobile-background.png b/frontend/public/dashboardmobile.png → frontend/public/mobile-background.png
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -22,14 +22,14 @@ import { TELEGRAM_BOT_LINK } from 'utils/constants';
 import { useCheckMobile } from 'hooks/useCheckMobile';
 import PositionHistory from 'pages/spotnet/position_history/PositionHistory';
 
-
 function App() {
   const { walletId, setWalletId, removeWalletId } = useWalletStore();
   const [showModal, setShowModal] = useState(false);
+  // const [currentPage, setCurrentPage] = useState('home');
   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);
@@ -53,7 +53,6 @@ function App() {
     setShowModal(false);
   };
 
-
   const handleisMobileRestrictionModalClose = () => {
     setisMobileRestrictionModalOpen(false);
   };
@@ -71,15 +70,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(
@@ -128,4 +126,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;
diff --git a/frontend/src/globals.css b/frontend/src/globals.css
@@ -95,3 +95,12 @@ 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;
+}
+
+
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css
@@ -1,5 +1,5 @@
 .form-content-wrapper {
-  background: url('/public/background.png') no-repeat;
+  background: url('/public/desktop-background.png') no-repeat;
   background-size: cover;
   background-position: center 50%;
   display: flex;

diff --git a/frontend/src/pages/spotnet/dashboard/dashboard.css b/frontend/src/pages/spotnet/dashboard/dashboard.css
@@ -5,6 +5,7 @@ body {
     Roboto,
     Helvetica,
     sans-serif;
+
 }
 
 .dashboard-wrapper {
@@ -342,7 +343,7 @@ body {
 
 @media (max-width: 550px) {
   .dashboard-wrapper {
-    background: url('../../../../public/dashboardmobile.png') no-repeat;
+    background: url('../../../../public/mobile-background.png') no-repeat;
     background-size: cover;
     background-position: 50% 40%;
     height: 100%;

diff --git a/frontend/src/pages/spotnet/documentation/documentation.css b/frontend/src/pages/spotnet/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;
 }

diff --git a/frontend/src/pages/spotnet/home/Home.jsx b/frontend/src/pages/spotnet/home/Home.jsx
@@ -9,17 +9,17 @@ import './home.css';
 import { useWalletStore } from 'stores/useWalletStore';
 import { notify } from 'components/Notifier/Notifier';
 
-
 function Home() {
-      const { walletId } = useWalletStore();
+  const { walletId } = useWalletStore();
 
   const navigate = useNavigate();
 
   const handleLaunchApp = async () => {
+    console.log('Launch button clicked'); // Debugging
     if (walletId) {
       navigate('/form');
     } else {
-      notify('Please connect to your wallet', "warning");
+      notify('Please connect to your wallet', 'warning');
     }
   };
 

diff --git a/frontend/src/pages/spotnet/home/home.css b/frontend/src/pages/spotnet/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 {

diff --git a/frontend/src/pages/spotnet/overview/overview.css b/frontend/src/pages/spotnet/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;

diff --git a/frontend/src/pages/spotnet/position_history/positionHistory.css b/frontend/src/pages/spotnet/position_history/positionHistory.css
@@ -1,8 +1,5 @@
 .position-wrapper {
-  background: url('../../../../public/background.png') no-repeat center center;
-  background-size: cover;
   min-height: 100vh;
-  padding: 1rem;
   box-sizing: border-box;
 }
 

diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
@@ -1,5 +1,5 @@
 .stake-wrapper {
-  background: url('../../../../public/background.png') no-repeat;
+  background: url('../../../../public/desktop-background.png') no-repeat;
   background-size: cover;
   margin-left:200px;
 }

diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css
@@ -7,10 +7,6 @@ body {
     sans-serif;
 }
 .withdraw-wrapper {
-  background: url('../../../../public/background.png') no-repeat;
-  background-size: cover;
-  background-position: center 39%;
-  min-height: 100vh;
   display: flex;
   justify-content: center;
   align-items: flex-start;