From 402c59c8ebd22faa929a27fa79a06c0e98c5ec22 Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Wed, 27 Nov 2024 21:01:22 +0100
Subject: [PATCH 1/8] Added staking page feature

---
 frontend/src/App.jsx                          |   3 +
 frontend/src/components/NavigationLinks.jsx   |   4 +
 frontend/src/pages/vault/VaultLayout.jsx      |  34 +++
 frontend/src/pages/vault/stake/Stake.jsx      | 102 +++++++
 frontend/src/pages/vault/stake/stake.css      | 254 ++++++++++++++++++
 frontend/src/pages/vault/vaultLayout.css      | 138 ++++++++++
 .../src/pages/vault/withdraw/Withdraw.jsx     |   3 +
 7 files changed, 538 insertions(+)
 create mode 100644 frontend/src/pages/vault/VaultLayout.jsx
 create mode 100644 frontend/src/pages/vault/stake/Stake.jsx
 create mode 100644 frontend/src/pages/vault/stake/stake.css
 create mode 100644 frontend/src/pages/vault/vaultLayout.css

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index b0b68c49..95815808 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import Documentation from 'pages/spotnet/documentation/Documentation';
 import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useConnectWallet } from 'hooks/useConnectWallet';
 import { Notifier } from 'components/Notifier/Notifier';
+import Stake from 'pages/vault/stake/Stake';
 
 function App() {
   const [walletId, setWalletId] = useState(localStorage.getItem('wallet_id'));
@@ -98,6 +99,8 @@ function App() {
           <Route path="/withdraw" element={<Withdraw />} />
           <Route path="/form" element={<Form walletId={walletId} setWalletId={setWalletId} />} />
           <Route path="/documentation" element={<Documentation />} />
+
+            <Route path="/stake" element={<Stake />} />
         </Routes>
       </main>
       <Footer />
diff --git a/frontend/src/components/NavigationLinks.jsx b/frontend/src/components/NavigationLinks.jsx
index 83cd1ebc..ec474ed3 100644
--- a/frontend/src/components/NavigationLinks.jsx
+++ b/frontend/src/components/NavigationLinks.jsx
@@ -11,6 +11,10 @@ const NavigationLinks = ({ onNavClick }) => (
     <NavLink to="/dashboard" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
       Dashboard
     </NavLink>
+    <div className="nav-divider"></div>
+    <NavLink to="/stake" className={({ isActive }) => (isActive ? 'active-link' : '')} onClick={onNavClick}>
+      Vault
+    </NavLink>
   </div>
 );
 
diff --git a/frontend/src/pages/vault/VaultLayout.jsx b/frontend/src/pages/vault/VaultLayout.jsx
new file mode 100644
index 00000000..43aed543
--- /dev/null
+++ b/frontend/src/pages/vault/VaultLayout.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Link, Outlet } from 'react-router-dom';
+import './vaultLayout.css';
+
+export function VaultLayout({ children }) {
+  return (
+    <div className="layout">
+      <aside className="sidebar">
+        <div className="sidebar-content">
+          <h2 className="sidebar-title">Vault</h2>
+          <nav className="sidebar-nav">
+            <Link to="/vault" className="nav-item">
+              <span className="nav-bullet">•</span>
+              Home
+            </Link>
+            <Link to="/stake" className="nav-item">
+              <span className="nav-bullet">•</span>
+              Stake
+            </Link>
+            <Link to="/withdraw" className="nav-item">
+              <span className="nav-bullet">•</span>
+              Withdraw
+            </Link>
+          </nav>
+        </div>
+      </aside>
+
+      <main className="main-content">
+        {children}
+        <Outlet />
+      </main>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
new file mode 100644
index 00000000..06689f38
--- /dev/null
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import STRK from '../../../assets/icons/strk.svg';
+import USDC from '../../../assets/icons/borrow_usdc.svg';
+import './stake.css';
+import { VaultLayout } from '../VaultLayout';
+import { CogIcon } from 'lucide-react';
+
+function Stake() {
+  const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
+
+  const networks = [{ name: 'Starknet', image: STRK }];
+
+  const handleChange = (e) => {
+    setSelectedNetwork(e.target.value);
+  };
+  return (
+    <VaultLayout>
+      <div className="staking-container">
+        <div className="balance-row">
+          <div className="balance-card">
+            <div className="balance-card-header">
+              <img src={STRK} alt="STRK" className="currency-icon" />
+              <span className="balance-label">STRK Balance</span>
+            </div>
+            <span className="balance-amount">0.046731</span>
+          </div>
+          <div className="balance-card">
+            <div className="balance-card-header">
+              <img src={USDC} alt="APY" className="currency-icon" />
+              <span className="balance-label">APY Balance</span>
+            </div>
+            <span className="balance-amount">0.046731</span>
+          </div>
+        </div>
+
+        <h2 className="form-title">Please submit your leverage details</h2>
+
+        <div className="staking-card">
+          <div className="network-selector-container">
+            <div className="network-selector">
+              <div className="selected-network">
+                <img
+                  src={networks.find((network) => network.name === selectedNetwork)?.image}
+                  alt={selectedNetwork}
+                  className="network-icon"
+                />
+                <span>{selectedNetwork}</span>
+              </div>
+              <svg
+                className="chevron"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6 9L12 15L18 9"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+
+            <div className="network-dropdown">
+              {networks.map((network) => (
+                <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
+                  <img src={network.image} alt={network.name} className="network-icon" />
+                  <span>{network.name}</span>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="amount-input">
+            <input type="text" defaultValue="0.00" className="amount-field" />
+            <span className="currency">STRK</span>
+          </div>
+
+          <div className="apy-rate">$0.00 APY / year</div>
+          <hr />
+          <div className="gas-fee">
+            <div className="gas-icon">
+              <CogIcon />
+            </div>
+            <div className="gas-fee-info">
+              <span className="gas-text">Gas fee:</span>
+              <span className="gas-amount">0.00 STRK</span>
+            </div>
+          </div>
+        </div>
+
+        <button className="stake-button">Stake</button>
+
+      </div>
+    </VaultLayout>
+  );
+}
+
+export default Stake;
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
new file mode 100644
index 00000000..e2afdcd3
--- /dev/null
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -0,0 +1,254 @@
+.staking-container {
+  max-width: 866px;
+  margin: 0 auto;
+  padding: 2rem;
+  color: white;
+  font-family: 'Inter', sans-serif;
+  position: relative;
+  overflow: hidden;
+}
+
+.balance-row {
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+
+.balance-card-header {
+  display: flex;
+  gap: 14px;
+}
+
+.balance-card {
+  flex: 1;
+  flex-direction: column;
+  background: #120721;
+  backdrop-filter: blur(10px);
+  padding: 15px 30px;
+  border-radius: 48px;
+  border: 1px solid #36294e;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.currency-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.balance-label {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+.balance-amount {
+  font-size: 1rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.form-title {
+  text-align: center;
+  font-size: 1rem;
+  font-weight: normal;
+  margin: 1.5rem 0;
+  opacity: 0.8;
+}
+
+.staking-card {
+  background: #120721;
+  backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #36294e;
+  margin-bottom: 1.5rem;
+}
+
+.network-selector-container {
+  position: relative;
+  width: 100%;
+}
+
+.network-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: white;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  cursor: pointer;
+  font-size: 1rem;
+  width: 100%;
+  position: relative;
+  z-index: 10;
+}
+
+.network-selector .selected-network {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.network-icon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.chevron {
+  margin-left: auto;
+  transition: transform 0.3s ease;
+}
+
+.network-dropdown {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.75rem;
+  z-index: 1;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.network-dropdown .network-option {
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+.network-dropdown .network-option:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.network-selector-container:hover .network-dropdown {
+  display: block;
+}
+
+.network-selector-container:hover .chevron {
+  transform: rotate(180deg);
+}
+
+.amount-input {
+  position: relative;
+  width: 140px;
+  max-width: 140px;
+  margin: 2rem auto 1rem;
+  text-align: center;
+}
+
+.amount-field {
+  background: transparent;
+  border: none;
+  color: #83919f;
+  font-size: 64px;
+  font-weight: 600;
+  outline: none;
+}
+
+.currency {
+  position: absolute;
+  color: #393942;
+  right: -35%;
+  top: 10%;
+  transform: translateY(-50%);
+  opacity: 0.5;
+  font-size: 1.5rem;
+}
+
+.apy-rate {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.875rem;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+/* .gas-fee-info {
+
+  } */
+.gas-fee {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.gas-icon {
+  font-size: 1rem;
+}
+
+.gas-text {
+  margin-right: 10px;
+}
+
+.stake-button {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 43px;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  position: relative;
+  transition: opacity 0.2s;
+
+  background-color: #120721;
+  color: white;
+  padding: 10px 20px;
+  font-size: 16px;
+  font-weight: bold;
+  border: none;
+  border-radius: 43px;
+  position: relative;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.stake-button::before {
+  content: '';
+  position: absolute;
+  top: -1px; 
+  left: -1px; 
+  right: -1px; 
+  bottom: -1px; 
+  border-radius: 43px;
+  z-index: -1;
+}
+
+.stake-button:hover::before {
+  opacity: 0.9;
+}
+
+.stake-button::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid transparent;
+  border-radius: 43px;
+  background: linear-gradient(45deg, #49abd2, #e01dee);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+}
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
new file mode 100644
index 00000000..3367027f
--- /dev/null
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -0,0 +1,138 @@
+.layout {
+    display: flex;
+    min-height: 100vh;
+    background: url('../../../public/background.png') no-repeat;
+    background-size: cover;
+    background-position: center 39%;
+    position: relative;
+  }
+  
+  .sidebar {
+    width: 280px;
+    background-color: rgba(0, 0, 0, 0.3);
+    border-right: 1px solid rgba(139, 92, 246, 0.1);
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    position: absolute;
+    height: 100%;
+  }
+  
+  .sidebar-title {
+    color: white;
+    font-size: 1rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #36294E;
+  }
+  
+  .sidebar-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  
+  .nav-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.2s;
+  }
+  
+  .nav-item:hover {
+    color: white;
+  }
+  
+  .nav-bullet {
+    font-size: 1.25rem;
+    line-height: 1;
+  }
+  
+  .main-content {
+    flex: 1;
+    padding: 0;
+    position: relative;
+    padding-bottom: 4rem; 
+  }
+  
+  .footer {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    width: calc(100% - 240px); /* Adjust for sidebar width */
+    border-top: 1px solid rgba(139, 92, 246, 0.2);
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(8px);
+  }
+  
+  .footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .footer-links {
+    display: flex;
+    gap: 1.5rem;
+  }
+  
+  .footer-link {
+    color: rgba(255, 255, 255, 0.6);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: color 0.2s;
+  }
+  
+  .footer-link:hover {
+    color: white;
+  }
+  
+  .footer-social {
+    display: flex;
+    gap: 1rem;
+  }
+  
+  .social-button {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    cursor: pointer;
+    padding: 0.25rem;
+    transition: color 0.2s;
+  }
+  
+  .social-button:hover {
+    color: white;
+  }
+  
+  @media (max-width: 768px) {
+    .sidebar {
+      width: 200px;
+    }
+  
+    .footer {
+      width: calc(100% - 200px);
+    }
+  
+    .footer-links {
+      display: none;
+    }
+  }
+  
+  @media (max-width: 640px) {
+    .sidebar {
+      width: 160px;
+    }
+  
+    .footer {
+      width: calc(100% - 160px);
+    }
+  }
+  
\ No newline at end of file
diff --git a/frontend/src/pages/vault/withdraw/Withdraw.jsx b/frontend/src/pages/vault/withdraw/Withdraw.jsx
index 83518f0c..89047b26 100644
--- a/frontend/src/pages/vault/withdraw/Withdraw.jsx
+++ b/frontend/src/pages/vault/withdraw/Withdraw.jsx
@@ -4,9 +4,11 @@ import { ReactComponent as DiamondIcon } from 'assets/icons/diamond.svg';
 import { ReactComponent as TimeIcon } from 'assets/icons/time.svg';
 import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
 import MetricCard from 'components/MetricCard/MetricCard';
+import { VaultLayout } from '../VaultLayout';
 
 export default function Withdraw() {
   return (
+    <VaultLayout>
     <div className="withdraw-wrapper">
       <div className="withdraw-container">
         <div className="main-container">
@@ -55,5 +57,6 @@ export default function Withdraw() {
         <button className="withdraw-button">Withdraw</button>
       </div>
     </div>
+    </VaultLayout>
   );
 }

From d009bfd9da1be58928b77e209522b010ddff0bac Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 13:17:55 +0100
Subject: [PATCH 2/8] fix: add sidebar correct color and padding

---
 frontend/src/pages/vault/vaultLayout.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
index 3367027f..5dda606e 100644
--- a/frontend/src/pages/vault/vaultLayout.css
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -9,11 +9,11 @@
   
   .sidebar {
     width: 280px;
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: #00000F;
     border-right: 1px solid rgba(139, 92, 246, 0.1);
     display: flex;
     flex-direction: column;
-    padding: 1.5rem;
+    padding: 1.5rem 2.5rem 1.5rem;
     position: absolute;
     height: 100%;
   }

From cc39fd1071940426468279cdba4c9a3a9065c88c Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 13:19:15 +0100
Subject: [PATCH 3/8] fix: duplicate notifier component

---
 frontend/src/App.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5e9dc78a..58a65124 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -16,7 +16,6 @@ import Withdraw from 'pages/vault/withdraw/Withdraw';
 import { useWalletStore } from 'stores/useWalletStore'; 
 import { Notifier } from 'components/Notifier/Notifier';
 import { useConnectWallet } from 'hooks/useConnectWallet';
-import { Notifier } from 'components/Notifier/Notifier';
 import Stake from 'pages/vault/stake/Stake';
 
 function App() {

From c36c24834350f20183b0695fbb5532d2978bef11 Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 13:24:37 +0100
Subject: [PATCH 4/8] fix: use Button component instead, add rounded corner on
 hover (the select option)

---
 frontend/src/pages/vault/stake/Stake.jsx |  3 +-
 frontend/src/pages/vault/stake/stake.css | 59 ++----------------------
 2 files changed, 5 insertions(+), 57 deletions(-)

diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index 06689f38..0fe513e4 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -4,6 +4,7 @@ import USDC from '../../../assets/icons/borrow_usdc.svg';
 import './stake.css';
 import { VaultLayout } from '../VaultLayout';
 import { CogIcon } from 'lucide-react';
+import { Button } from 'components/ui/Button';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
@@ -92,7 +93,7 @@ function Stake() {
           </div>
         </div>
 
-        <button className="stake-button">Stake</button>
+        <Button variant='secondary' size='lg' className='stake-button'>Stake</Button>
 
       </div>
     </VaultLayout>
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index e2afdcd3..2e105734 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -83,7 +83,7 @@
   border: none;
   color: white;
   padding: 0.75rem 1rem;
-  border-radius: 0.75rem;
+  border-radius: 2rem;
   cursor: pointer;
   font-size: 1rem;
   width: 100%;
@@ -115,7 +115,7 @@
   left: 0;
   width: 100%;
   background: rgba(255, 255, 255, 0.1);
-  border-radius: 0.75rem;
+  border-radius: 2rem;
   z-index: 1;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
@@ -126,6 +126,7 @@
   align-items: center;
   gap: 0.75rem;
   cursor: pointer;
+  border-radius: 2rem;
   transition: background 0.3s;
 }
 
@@ -197,58 +198,4 @@
 
 .stake-button {
   width: 100%;
-  padding: 1rem;
-  border-radius: 43px;
-  border: none;
-  color: white;
-  font-size: 1rem;
-  cursor: pointer;
-  position: relative;
-  transition: opacity 0.2s;
-
-  background-color: #120721;
-  color: white;
-  padding: 10px 20px;
-  font-size: 16px;
-  font-weight: bold;
-  border: none;
-  border-radius: 43px;
-  position: relative;
-  cursor: pointer;
-  overflow: hidden;
-}
-
-.stake-button::before {
-  content: '';
-  position: absolute;
-  top: -1px; 
-  left: -1px; 
-  right: -1px; 
-  bottom: -1px; 
-  border-radius: 43px;
-  z-index: -1;
-}
-
-.stake-button:hover::before {
-  opacity: 0.9;
-}
-
-.stake-button::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 1px solid transparent;
-  border-radius: 43px;
-  background: linear-gradient(45deg, #49abd2, #e01dee);
-  -webkit-mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  mask:
-    linear-gradient(#fff 0 0) content-box,
-    linear-gradient(#fff 0 0);
-  -webkit-mask-composite: destination-out;
-  mask-composite: exclude;
 }

From 7ad1794ca0823936a5a09ec6fcfced32d5dbfc7a Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 15:21:18 +0100
Subject: [PATCH 5/8] fix: layout cutoff when tyoing big number

---
 frontend/src/pages/vault/stake/Stake.jsx | 30 ++++++++++++++++++++----
 frontend/src/pages/vault/stake/stake.css | 15 ++++++------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index 0fe513e4..deab2ae7 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -8,12 +8,22 @@ import { Button } from 'components/ui/Button';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
+  const [amount, setAmount] = useState('0');
 
   const networks = [{ name: 'Starknet', image: STRK }];
 
   const handleChange = (e) => {
     setSelectedNetwork(e.target.value);
   };
+
+  const handleAmountChange = (e) => {
+    const value = e.target.value;
+    const regex = /^\d*\.?\d*$/; 
+    if (regex.test(value)) {
+      setAmount(value);
+    }
+  };
+
   return (
     <VaultLayout>
       <div className="staking-container">
@@ -75,9 +85,18 @@ function Stake() {
             </div>
           </div>
 
-          <div className="amount-input">
-            <input type="text" defaultValue="0.00" className="amount-field" />
-            <span className="currency">STRK</span>
+          <div className="amount-input" aria-labelledby="amount-input-label">
+            <input
+              type="text"
+              id="amount-field"
+              value={amount} 
+              onChange={handleAmountChange}
+              pattern="^\d*\.?\d*$"
+              className="amount-field"
+              aria-describedby="currency-symbol"
+              placeholder="0.00"
+            />
+            <span id="currency-symbol" className="currency">STRK</span>
           </div>
 
           <div className="apy-rate">$0.00 APY / year</div>
@@ -93,8 +112,9 @@ function Stake() {
           </div>
         </div>
 
-        <Button variant='secondary' size='lg' className='stake-button'>Stake</Button>
-
+        <Button variant="secondary" size="lg" className="stake-button">
+          Stake
+        </Button>
       </div>
     </VaultLayout>
   );
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index 2e105734..bfc03686 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -144,10 +144,11 @@
 
 .amount-input {
   position: relative;
-  width: 140px;
-  max-width: 140px;
-  margin: 2rem auto 1rem;
+  width: 100%;
+  max-width: 400px;
+  margin: 2rem auto;
   text-align: center;
+  /* overflow: hidden; */
 }
 
 .amount-field {
@@ -157,16 +158,19 @@
   font-size: 64px;
   font-weight: 600;
   outline: none;
+  text-align: center;
+  width: 100%;
 }
 
 .currency {
   position: absolute;
   color: #393942;
-  right: -35%;
+  right: -5%;
   top: 10%;
   transform: translateY(-50%);
   opacity: 0.5;
   font-size: 1.5rem;
+  z-index: 999999;
 }
 
 .apy-rate {
@@ -176,9 +180,6 @@
   text-align: center;
 }
 
-/* .gas-fee-info {
-
-  } */
 .gas-fee {
   display: flex;
   justify-content: space-between;

From ce3992ab2d71e879b25ded97b8fff00f80bc4309 Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 16:37:44 +0100
Subject: [PATCH 6/8] fix: use shared component for balance, used correct icon

---
 frontend/src/assets/icons/apy_icon.svg        |   4 +
 frontend/src/components/StakeCard/GasFee.jsx  |  17 +++
 .../src/components/StakeCard/MetricCard.jsx   |  16 ++
 .../src/components/StakeCard/metricCard.css   |  14 ++
 frontend/src/pages/vault/stake/Stake.jsx      | 144 ++++++++----------
 frontend/src/pages/vault/stake/stake.css      |  70 ---------
 6 files changed, 115 insertions(+), 150 deletions(-)
 create mode 100644 frontend/src/assets/icons/apy_icon.svg
 create mode 100644 frontend/src/components/StakeCard/GasFee.jsx
 create mode 100644 frontend/src/components/StakeCard/MetricCard.jsx
 create mode 100644 frontend/src/components/StakeCard/metricCard.css

diff --git a/frontend/src/assets/icons/apy_icon.svg b/frontend/src/assets/icons/apy_icon.svg
new file mode 100644
index 00000000..c6eda91f
--- /dev/null
+++ b/frontend/src/assets/icons/apy_icon.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" width="24" height="24" rx="12" fill="#201338"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.95529 9.56759C4.59952 13.1673 6.46948 17.2344 10.1158 18.5432C10.2561 18.6368 10.3963 18.8237 10.3963 18.964V19.6185C10.3963 19.712 10.3963 19.7588 10.3495 19.8054C10.3029 19.9925 10.1158 20.0859 9.92881 19.9925C7.31095 19.151 5.30074 17.1408 4.45927 14.5229C3.05683 10.0819 5.48777 5.36025 9.92881 3.95781C9.9756 3.91113 10.0691 3.91113 10.1158 3.91113C10.3029 3.95781 10.3963 4.09805 10.3963 4.28508V4.93952C10.3963 5.17333 10.3029 5.31358 10.1158 5.40704C8.1992 6.10826 6.65651 7.60417 5.95529 9.56759ZM14.6505 4.14484C14.6971 3.95781 14.8842 3.86435 15.0712 3.95781C17.6423 4.79927 19.6993 6.80948 20.5407 9.47413C21.9432 13.9152 19.5122 18.6368 15.0712 20.0393C15.0244 20.0859 14.9309 20.0859 14.8842 20.0859C14.6971 20.0393 14.6037 19.899 14.6037 19.712V19.0575C14.6037 18.8237 14.6971 18.6835 14.8842 18.59C16.8008 17.8888 18.3435 16.3929 19.0447 14.4295C20.4005 10.8298 18.5305 6.7627 14.8842 5.45382C14.7439 5.36025 14.6037 5.17333 14.6037 4.9863V4.33187C14.6037 4.2383 14.6037 4.19162 14.6505 4.14484ZM12.6391 11.2035C14.6025 11.4372 15.5842 11.9982 15.5842 13.6344C15.5842 14.8966 14.6493 15.8783 13.2468 16.1121V17.2341C13.2001 17.4678 13.0598 17.608 12.8728 17.608H12.1716C11.9379 17.5612 11.7976 17.421 11.7976 17.2341V16.1121C10.255 15.8783 9.50696 15.0368 9.32005 13.8682V13.8214C9.32005 13.6344 9.46029 13.4941 9.6472 13.4941H10.442C10.5822 13.4941 10.7225 13.5877 10.7691 13.7746C10.9094 14.4759 11.3301 14.9902 12.5456 14.9902C13.4338 14.9902 14.0883 14.476 14.0883 13.728C14.0883 12.9799 13.6676 12.6995 12.3586 12.4657C10.3952 12.2319 9.46029 11.6243 9.46029 10.0816C9.46029 8.91283 10.3484 7.9779 11.7508 7.79087V6.7157C11.7976 6.48188 11.9379 6.34163 12.1249 6.34163H12.8261C13.0598 6.38842 13.2001 6.52867 13.2001 6.7157V7.83766C14.2752 7.93112 15.1167 8.7258 15.3037 9.7543V9.80109C15.3037 9.98801 15.1635 10.1283 14.9764 10.1283H14.2285C14.0883 10.1283 13.9481 10.0348 13.9013 9.89455C13.6676 9.19332 13.2001 8.91283 12.3586 8.91283C11.4237 8.91283 10.9562 9.33346 10.9562 9.98801C10.9562 10.6426 11.2367 11.0165 12.6391 11.2035Z" fill="#83919F"/>
+</svg>
diff --git a/frontend/src/components/StakeCard/GasFee.jsx b/frontend/src/components/StakeCard/GasFee.jsx
new file mode 100644
index 00000000..773ede49
--- /dev/null
+++ b/frontend/src/components/StakeCard/GasFee.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
+
+
+export default function GasFee() {
+    return (
+        <div className="main-card-footer">
+            <div className="divider"></div>
+            <div className="settings-fee-container">
+                <div className="setting-circle">
+                    <SettingIcon className="setting-icon" />
+                </div>
+                <div className="fee-title">Gas fee: 0.00 STRK</div>
+            </div>
+        </div>
+    );
+}
diff --git a/frontend/src/components/StakeCard/MetricCard.jsx b/frontend/src/components/StakeCard/MetricCard.jsx
new file mode 100644
index 00000000..5529cd7f
--- /dev/null
+++ b/frontend/src/components/StakeCard/MetricCard.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './metricCard.css';
+
+export default function MetricCard({ icon= 1, title, value }) {
+  return (
+    <div className="stake-card">
+      <div className="card-header">
+        <img src={icon} className="card-icon" />
+        <span className="label">{title}</span>
+      </div>
+      <div className="card-value">
+        <span className="top-card-value">{value}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/StakeCard/metricCard.css b/frontend/src/components/StakeCard/metricCard.css
new file mode 100644
index 00000000..e1054bde
--- /dev/null
+++ b/frontend/src/components/StakeCard/metricCard.css
@@ -0,0 +1,14 @@
+.stake-card {
+    width: 309px;
+    background: var(--header-button-bg);
+    border: var(--midnight-purple-border);
+    border-radius: 900px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .stake-card .img {
+    margin-right: 100px;
+  }
\ No newline at end of file
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index deab2ae7..10fede48 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -1,10 +1,11 @@
 import React, { useState } from 'react';
 import STRK from '../../../assets/icons/strk.svg';
-import USDC from '../../../assets/icons/borrow_usdc.svg';
+import USDC from '../../../assets/icons/apy_icon.svg';
 import './stake.css';
 import { VaultLayout } from '../VaultLayout';
-import { CogIcon } from 'lucide-react';
 import { Button } from 'components/ui/Button';
+import MetricCard from 'components/StakeCard/MetricCard';
+import GasFee from 'components/StakeCard/GasFee';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
@@ -18,7 +19,7 @@ function Stake() {
 
   const handleAmountChange = (e) => {
     const value = e.target.value;
-    const regex = /^\d*\.?\d*$/; 
+    const regex = /^\d*\.?\d*$/;
     if (regex.test(value)) {
       setAmount(value);
     }
@@ -26,95 +27,78 @@ function Stake() {
 
   return (
     <VaultLayout>
-      <div className="staking-container">
-        <div className="balance-row">
-          <div className="balance-card">
-            <div className="balance-card-header">
-              <img src={STRK} alt="STRK" className="currency-icon" />
-              <span className="balance-label">STRK Balance</span>
+      <div className="withdraw-wrapper">
+        <div className="withdraw-container">
+          <div className='main-container'>
+            <div className="top-cards">
+              <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
+              <MetricCard title="APY Balance" value="0.046731" icon={USDC} />
             </div>
-            <span className="balance-amount">0.046731</span>
           </div>
-          <div className="balance-card">
-            <div className="balance-card-header">
-              <img src={USDC} alt="APY" className="currency-icon" />
-              <span className="balance-label">APY Balance</span>
-            </div>
-            <span className="balance-amount">0.046731</span>
-          </div>
-        </div>
 
-        <h2 className="form-title">Please submit your leverage details</h2>
+          <h1 className="withdraw-title">Please submit your leverage details</h1>
+
+          <div className="main-card">
+            <div className="network-selector-container">
+              <div className="network-selector">
+                <div className="selected-network">
+                  <img
+                    src={networks.find((network) => network.name === selectedNetwork)?.image}
+                    alt={selectedNetwork}
+                    className="network-icon"
+                  />
+                  <span>{selectedNetwork}</span>
+                </div>
+                <svg
+                  className="chevron"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 9L12 15L18 9"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
 
-        <div className="staking-card">
-          <div className="network-selector-container">
-            <div className="network-selector">
-              <div className="selected-network">
-                <img
-                  src={networks.find((network) => network.name === selectedNetwork)?.image}
-                  alt={selectedNetwork}
-                  className="network-icon"
-                />
-                <span>{selectedNetwork}</span>
+              <div className="network-dropdown">
+                {networks.map((network) => (
+                  <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
+                    <img src={network.image} alt={network.name} className="network-icon" />
+                    <span>{network.name}</span>
+                  </div>
+                ))}
               </div>
-              <svg
-                className="chevron"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6 9L12 15L18 9"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                />
-              </svg>
             </div>
 
-            <div className="network-dropdown">
-              {networks.map((network) => (
-                <div key={network.name} className="network-option" onClick={() => handleChange(network)}>
-                  <img src={network.image} alt={network.name} className="network-icon" />
-                  <span>{network.name}</span>
-                </div>
-              ))}
+            <div className="amount-input" aria-labelledby="amount-input-label">
+              <input
+                type="text"
+                id="amount-field"
+                value={amount}
+                onChange={handleAmountChange}
+                pattern="^\d*\.?\d*$"
+                className="amount-field"
+                aria-describedby="currency-symbol"
+                placeholder="0.00"
+              />
+              <span id="currency-symbol" className="currency">STRK</span>
             </div>
-          </div>
 
-          <div className="amount-input" aria-labelledby="amount-input-label">
-            <input
-              type="text"
-              id="amount-field"
-              value={amount} 
-              onChange={handleAmountChange}
-              pattern="^\d*\.?\d*$"
-              className="amount-field"
-              aria-describedby="currency-symbol"
-              placeholder="0.00"
-            />
-            <span id="currency-symbol" className="currency">STRK</span>
+            <div className="apy-rate">$0.00 APY / year</div>
+            <GasFee />
           </div>
 
-          <div className="apy-rate">$0.00 APY / year</div>
-          <hr />
-          <div className="gas-fee">
-            <div className="gas-icon">
-              <CogIcon />
-            </div>
-            <div className="gas-fee-info">
-              <span className="gas-text">Gas fee:</span>
-              <span className="gas-amount">0.00 STRK</span>
-            </div>
-          </div>
+          <Button variant="secondary" size="lg" className="stake-button">
+            Stake
+          </Button>
         </div>
-
-        <Button variant="secondary" size="lg" className="stake-button">
-          Stake
-        </Button>
       </div>
     </VaultLayout>
   );
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index bfc03686..91424483 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -1,73 +1,3 @@
-.staking-container {
-  max-width: 866px;
-  margin: 0 auto;
-  padding: 2rem;
-  color: white;
-  font-family: 'Inter', sans-serif;
-  position: relative;
-  overflow: hidden;
-}
-
-.balance-row {
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-}
-
-.balance-card-header {
-  display: flex;
-  gap: 14px;
-}
-
-.balance-card {
-  flex: 1;
-  flex-direction: column;
-  background: #120721;
-  backdrop-filter: blur(10px);
-  padding: 15px 30px;
-  border-radius: 48px;
-  border: 1px solid #36294e;
-
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.currency-icon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-
-.balance-label {
-  font-size: 0.75rem;
-  opacity: 0.7;
-}
-
-.balance-amount {
-  font-size: 1rem;
-  font-weight: 700;
-  text-align: center;
-}
-
-.form-title {
-  text-align: center;
-  font-size: 1rem;
-  font-weight: normal;
-  margin: 1.5rem 0;
-  opacity: 0.8;
-}
-
-.staking-card {
-  background: #120721;
-  backdrop-filter: blur(10px);
-  border-radius: 1rem;
-  padding: 1.5rem;
-  border: 1px solid #36294e;
-  margin-bottom: 1.5rem;
-}
 
 .network-selector-container {
   position: relative;

From 347bef52456bcfe632436c26a54e198f10dad35b Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 17:00:15 +0100
Subject: [PATCH 7/8] fix: resolved request changes

---
 frontend/src/pages/vault/VaultLayout.jsx |  28 ++-
 frontend/src/pages/vault/vaultLayout.css | 278 ++++++++++++-----------
 2 files changed, 169 insertions(+), 137 deletions(-)

diff --git a/frontend/src/pages/vault/VaultLayout.jsx b/frontend/src/pages/vault/VaultLayout.jsx
index 43aed543..458a9d60 100644
--- a/frontend/src/pages/vault/VaultLayout.jsx
+++ b/frontend/src/pages/vault/VaultLayout.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link, Outlet } from 'react-router-dom';
+import { NavLink, Outlet } from 'react-router-dom';
 import './vaultLayout.css';
 
 export function VaultLayout({ children }) {
@@ -9,18 +9,30 @@ export function VaultLayout({ children }) {
         <div className="sidebar-content">
           <h2 className="sidebar-title">Vault</h2>
           <nav className="sidebar-nav">
-            <Link to="/vault" className="nav-item">
+            <NavLink
+              to="/"
+              className="nav-item"
+              activeClassName="active"
+            >
               <span className="nav-bullet">•</span>
               Home
-            </Link>
-            <Link to="/stake" className="nav-item">
+            </NavLink>
+            <NavLink
+              to="/stake"
+              className="nav-item"
+              activeClassName="active"
+            >
               <span className="nav-bullet">•</span>
               Stake
-            </Link>
-            <Link to="/withdraw" className="nav-item">
+            </NavLink>
+            <NavLink
+              to="/withdraw"
+              className="nav-item"
+              activeClassName="active"
+            >
               <span className="nav-bullet">•</span>
               Withdraw
-            </Link>
+            </NavLink>
           </nav>
         </div>
       </aside>
@@ -30,5 +42,5 @@ export function VaultLayout({ children }) {
         <Outlet />
       </main>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
index 5dda606e..7248d301 100644
--- a/frontend/src/pages/vault/vaultLayout.css
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -1,138 +1,158 @@
 .layout {
-    display: flex;
-    min-height: 100vh;
-    background: url('../../../public/background.png') no-repeat;
-    background-size: cover;
-    background-position: center 39%;
-    position: relative;
-  }
-  
+  display: flex;
+  min-height: 100vh;
+  background: url('../../../public/background.png') no-repeat;
+  background-size: cover;
+  background-position: center 39%;
+  position: relative;
+}
+
+.sidebar {
+  width: 280px;
+  background-color: #00000F;
+  border-right: 1px solid rgba(139, 92, 246, 0.1);
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 2.5rem 1.5rem;
+  position: absolute;
+  height: 100%;
+}
+
+.sidebar-title {
+  color: white;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #36294E;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+  padding-bottom: 10px;
+}
+
+.nav-item:hover {
+  color: white;
+}
+
+.nav-bullet {
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.nav-item.active {
+  position: relative;
+}
+
+.nav-item.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(to right, #49ABD2, #36294E);
+}
+
+
+.nav-item.active .nav-bullet {
+  color: #49ABD2;
+}
+
+.main-content {
+  flex: 1;
+  padding: 0;
+  position: relative;
+  padding-bottom: 4rem;
+}
+
+.footer {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: calc(100% - 240px);
+  border-top: 1px solid rgba(139, 92, 246, 0.2);
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.footer-links {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.footer-link {
+  color: rgba(255, 255, 255, 0.6);
+  text-decoration: none;
+  font-size: 0.875rem;
+  transition: color 0.2s;
+}
+
+.footer-link:hover {
+  color: white;
+}
+
+.footer-social {
+  display: flex;
+  gap: 1rem;
+}
+
+.social-button {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: color 0.2s;
+}
+
+.social-button:hover {
+  color: white;
+}
+
+@media (max-width: 768px) {
   .sidebar {
-    width: 280px;
-    background-color: #00000F;
-    border-right: 1px solid rgba(139, 92, 246, 0.1);
-    display: flex;
-    flex-direction: column;
-    padding: 1.5rem 2.5rem 1.5rem;
-    position: absolute;
-    height: 100%;
-  }
-  
-  .sidebar-title {
-    color: white;
-    font-size: 1rem;
-    font-weight: 500;
-    margin-bottom: 1rem;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #36294E;
-  }
-  
-  .sidebar-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-  
-  .nav-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: rgba(255, 255, 255, 0.6);
-    text-decoration: none;
-    font-size: 0.875rem;
-    transition: color 0.2s;
+    width: 200px;
   }
-  
-  .nav-item:hover {
-    color: white;
-  }
-  
-  .nav-bullet {
-    font-size: 1.25rem;
-    line-height: 1;
-  }
-  
-  .main-content {
-    flex: 1;
-    padding: 0;
-    position: relative;
-    padding-bottom: 4rem; 
-  }
-  
+
   .footer {
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    width: calc(100% - 240px); /* Adjust for sidebar width */
-    border-top: 1px solid rgba(139, 92, 246, 0.2);
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(8px);
-  }
-  
-  .footer-content {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    width: calc(100% - 200px);
   }
-  
+
   .footer-links {
-    display: flex;
-    gap: 1.5rem;
+    display: none;
   }
-  
-  .footer-link {
-    color: rgba(255, 255, 255, 0.6);
-    text-decoration: none;
-    font-size: 0.875rem;
-    transition: color 0.2s;
-  }
-  
-  .footer-link:hover {
-    color: white;
-  }
-  
-  .footer-social {
-    display: flex;
-    gap: 1rem;
-  }
-  
-  .social-button {
-    background: none;
-    border: none;
-    color: rgba(255, 255, 255, 0.6);
-    cursor: pointer;
-    padding: 0.25rem;
-    transition: color 0.2s;
-  }
-  
-  .social-button:hover {
-    color: white;
-  }
-  
-  @media (max-width: 768px) {
-    .sidebar {
-      width: 200px;
-    }
-  
-    .footer {
-      width: calc(100% - 200px);
-    }
-  
-    .footer-links {
-      display: none;
-    }
+}
+
+@media (max-width: 640px) {
+  .sidebar {
+    width: 160px;
   }
-  
-  @media (max-width: 640px) {
-    .sidebar {
-      width: 160px;
-    }
-  
-    .footer {
-      width: calc(100% - 160px);
-    }
+
+  .footer {
+    width: calc(100% - 160px);
   }
-  
\ No newline at end of file
+}
\ No newline at end of file

From 4bff2a5ede19fc18e80a872e102dc8ed5b65ba42 Mon Sep 17 00:00:00 2001
From: Ukpaa Chigozie <chigozzdev@gmail.com>
Date: Thu, 28 Nov 2024 22:19:25 +0100
Subject: [PATCH 8/8] fix: modified css and gasfee component

---
 .../{StakeCard => GasFee}/GasFee.jsx          | 11 +--
 frontend/src/components/GasFee/gasfee.css     | 31 ++++++++
 .../src/components/StakeCard/metricCard.css   | 24 +++---
 frontend/src/pages/vault/stake/Stake.jsx      |  8 +-
 frontend/src/pages/vault/stake/stake.css      | 64 ++++++++++------
 frontend/src/pages/vault/vaultLayout.css      | 76 ++-----------------
 6 files changed, 98 insertions(+), 116 deletions(-)
 rename frontend/src/components/{StakeCard => GasFee}/GasFee.jsx (54%)
 create mode 100644 frontend/src/components/GasFee/gasfee.css

diff --git a/frontend/src/components/StakeCard/GasFee.jsx b/frontend/src/components/GasFee/GasFee.jsx
similarity index 54%
rename from frontend/src/components/StakeCard/GasFee.jsx
rename to frontend/src/components/GasFee/GasFee.jsx
index 773ede49..b30a7c3e 100644
--- a/frontend/src/components/StakeCard/GasFee.jsx
+++ b/frontend/src/components/GasFee/GasFee.jsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import { ReactComponent as SettingIcon } from 'assets/icons/settings.svg';
+import './gasfee.css';
 
 
 export default function GasFee() {
     return (
         <div className="main-card-footer">
             <div className="divider"></div>
-            <div className="settings-fee-container">
-                <div className="setting-circle">
-                    <SettingIcon className="setting-icon" />
+            <div className="gas-fee-container">
+                <div className="gas-fee-circle">
+                    <SettingIcon className="gas-fee-icon" />
                 </div>
-                <div className="fee-title">Gas fee: 0.00 STRK</div>
+                <div className="gas-fee-title">Gas fee: 0.00 STRK</div>
             </div>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/GasFee/gasfee.css b/frontend/src/components/GasFee/gasfee.css
new file mode 100644
index 00000000..00bc8e87
--- /dev/null
+++ b/frontend/src/components/GasFee/gasfee.css
@@ -0,0 +1,31 @@
+.gas-fee-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.gas-fee-circle {
+    width: 32px;
+    height: 32px;
+    background-color: var(--footer-divider-bg);
+    border-radius: 50%;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+}
+
+.gas-fee-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 16px;
+    height: 16px;
+}
+
+.gas-fee-title {
+    color: var(--stormy-gray);
+    font-size: 12px;
+    font-weight: 400;
+}
\ No newline at end of file
diff --git a/frontend/src/components/StakeCard/metricCard.css b/frontend/src/components/StakeCard/metricCard.css
index e1054bde..58cee379 100644
--- a/frontend/src/components/StakeCard/metricCard.css
+++ b/frontend/src/components/StakeCard/metricCard.css
@@ -1,14 +1,14 @@
 .stake-card {
-    width: 309px;
-    background: var(--header-button-bg);
-    border: var(--midnight-purple-border);
-    border-radius: 900px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
+  width: 309px;
+  background: var(--header-button-bg);
+  border: var(--midnight-purple-border);
+  border-radius: 900px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 
-  .stake-card .img {
-    margin-right: 100px;
-  }
\ No newline at end of file
+.stake-card .img {
+  margin-right: 100px;
+}
\ No newline at end of file
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index 10fede48..c7f253e5 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -5,7 +5,7 @@ import './stake.css';
 import { VaultLayout } from '../VaultLayout';
 import { Button } from 'components/ui/Button';
 import MetricCard from 'components/StakeCard/MetricCard';
-import GasFee from 'components/StakeCard/GasFee';
+import GasFee from 'components/GasFee/GasFee';
 
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
@@ -27,8 +27,8 @@ function Stake() {
 
   return (
     <VaultLayout>
-      <div className="withdraw-wrapper">
-        <div className="withdraw-container">
+      <div className="stake-wrapper">
+        <div className="stake-container">
           <div className='main-container'>
             <div className="top-cards">
               <MetricCard title="STRK Balance" value="0.046731" icon={STRK} />
@@ -36,7 +36,7 @@ function Stake() {
             </div>
           </div>
 
-          <h1 className="withdraw-title">Please submit your leverage details</h1>
+          <h1 className="stake-title">Please submit your leverage details</h1>
 
           <div className="main-card">
             <div className="network-selector-container">
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index 91424483..e87b0f64 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -1,3 +1,36 @@
+.stake-wrapper {
+  background-size: cover;
+  background-position: center 39%;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.stake-card {
+  width: 309px;
+  background: var(--header-button-bg);
+  border: var(--midnight-purple-border);
+  border-radius: 900px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.stake-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--primary);
+  text-align: center;
+}
+
+.stake-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 32px;
+}
 
 .network-selector-container {
   position: relative;
@@ -9,11 +42,10 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
+  background: var(--bg);
+  border-bottom: 1px solid var(--light-purple);
   color: white;
   padding: 0.75rem 1rem;
-  border-radius: 2rem;
   cursor: pointer;
   font-size: 1rem;
   width: 100%;
@@ -44,7 +76,7 @@
   top: 100%;
   left: 0;
   width: 100%;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--gray);
   border-radius: 2rem;
   z-index: 1;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -78,13 +110,12 @@
   max-width: 400px;
   margin: 2rem auto;
   text-align: center;
-  /* overflow: hidden; */
 }
 
 .amount-field {
   background: transparent;
   border: none;
-  color: #83919f;
+  color: var(--gray);
   font-size: 64px;
   font-weight: 600;
   outline: none;
@@ -94,7 +125,7 @@
 
 .currency {
   position: absolute;
-  color: #393942;
+  color: var(--dark-gray);
   right: -5%;
   top: 10%;
   transform: translateY(-50%);
@@ -104,29 +135,12 @@
 }
 
 .apy-rate {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--dark-gray);
   font-size: 0.875rem;
   margin-bottom: 2rem;
   text-align: center;
 }
 
-.gas-fee {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.gas-icon {
-  font-size: 1rem;
-}
-
-.gas-text {
-  margin-right: 10px;
-}
-
 .stake-button {
   width: 100%;
 }
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
index 7248d301..7eaeba12 100644
--- a/frontend/src/pages/vault/vaultLayout.css
+++ b/frontend/src/pages/vault/vaultLayout.css
@@ -4,13 +4,14 @@
   background: url('../../../public/background.png') no-repeat;
   background-size: cover;
   background-position: center 39%;
+  background-repeat: no-repeat;
   position: relative;
 }
 
 .sidebar {
   width: 280px;
   background-color: #00000F;
-  border-right: 1px solid rgba(139, 92, 246, 0.1);
+  border-right: 1px solid #300734;
   display: flex;
   flex-direction: column;
   padding: 1.5rem 2.5rem 1.5rem;
@@ -24,7 +25,7 @@
   font-weight: 500;
   margin-bottom: 1rem;
   padding-bottom: 8px;
-  border-bottom: 1px solid #36294E;
+  border-bottom: 1px solid var(--light-purple);
 }
 
 .sidebar-nav {
@@ -37,7 +38,7 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  color: rgba(255, 255, 255, 0.6);
+  color: white;
   text-decoration: none;
   font-size: 0.875rem;
   transition: color 0.2s;
@@ -70,81 +71,19 @@
 
 
 .nav-item.active .nav-bullet {
-  color: #49ABD2;
+  color: var(--nav-button-hover);
 }
 
 .main-content {
   flex: 1;
-  padding: 0;
+  padding: 2rem 0;
   position: relative;
-  padding-bottom: 4rem;
-}
-
-.footer {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: calc(100% - 240px);
-  border-top: 1px solid rgba(139, 92, 246, 0.2);
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(8px);
-}
-
-.footer-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.footer-links {
-  display: flex;
-  gap: 1.5rem;
-}
-
-.footer-link {
-  color: rgba(255, 255, 255, 0.6);
-  text-decoration: none;
-  font-size: 0.875rem;
-  transition: color 0.2s;
-}
-
-.footer-link:hover {
-  color: white;
-}
-
-.footer-social {
-  display: flex;
-  gap: 1rem;
-}
-
-.social-button {
-  background: none;
-  border: none;
-  color: rgba(255, 255, 255, 0.6);
-  cursor: pointer;
-  padding: 0.25rem;
-  transition: color 0.2s;
-}
-
-.social-button:hover {
-  color: white;
 }
 
 @media (max-width: 768px) {
   .sidebar {
     width: 200px;
   }
-
-  .footer {
-    width: calc(100% - 200px);
-  }
-
-  .footer-links {
-    display: none;
-  }
 }
 
 @media (max-width: 640px) {
@@ -152,7 +91,4 @@
     width: 160px;
   }
 
-  .footer {
-    width: calc(100% - 160px);
-  }
 }
\ No newline at end of file