From 5d10ee11d139be1dedec5bf3554d5bbc154c5995 Mon Sep 17 00:00:00 2001
From: Onuora Ebube Ebuka <monweebube44@gmail.com>
Date: Wed, 18 Dec 2024 10:23:08 +0000
Subject: [PATCH] fix: stake page-ui

---
 frontend/src/components/GasFee/gasfee.css |   2 +
 frontend/src/pages/vault/stake/Stake.jsx  | 154 +++++++++++-----------
 frontend/src/pages/vault/stake/stake.css  |  18 ++-
 3 files changed, 86 insertions(+), 88 deletions(-)

diff --git a/frontend/src/components/GasFee/gasfee.css b/frontend/src/components/GasFee/gasfee.css
index 00bc8e87..6ca653c9 100644
--- a/frontend/src/components/GasFee/gasfee.css
+++ b/frontend/src/components/GasFee/gasfee.css
@@ -3,6 +3,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0rem 3rem;
+    padding-bottom: 1rem;
 }
 
 .gas-fee-circle {
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
index dbf30b92..fa341fa0 100644
--- a/frontend/src/pages/vault/stake/Stake.jsx
+++ b/frontend/src/pages/vault/stake/Stake.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ReactComponent as ETH } from '../../../assets/icons/ethereum.svg';
 import { ReactComponent as USDC } from '../../../assets/icons/borrow_usdc.svg';
 import { ReactComponent as DAI } from '../../../assets/icons/dai.svg';
-import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg'
+import { ReactComponent as STTRK } from '../../../assets/icons/strk.svg';
 import MetricCard from 'components/StakeCard/MetricCard';
 import STRK from '../../../assets/icons/strk.svg';
 import USDCc from '../../../assets/icons/apy_icon.svg';
@@ -15,7 +15,7 @@ import BalanceCards from 'components/BalanceCards';
 function Stake() {
   const [selectedNetwork, setSelectedNetwork] = useState('Starknet');
   const [amount, setAmount] = useState('0');
-  const [showDrop, setShowDrop] = useState(false)
+  const [showDrop, setShowDrop] = useState(false);
 
   const [balances, setBalances] = useState([
     { icon: <STTRK />, title: 'STRK', balance: '0.046731' },
@@ -26,7 +26,6 @@ function Stake() {
   const networks = [{ name: 'Starknet', image: STRK }];
   const handleChange = (network) => {
     setSelectedNetwork(network.name);
-
   };
 
   const handleAmountChange = (e) => {
@@ -42,99 +41,98 @@ function Stake() {
         <div className="stake-container">
           <div className="balance-display-container">
             <div className="large-screen-balance">
-              <div className='main-container'>
-                <div className='top-cards'>
+              <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={USDCc} />
                 </div>
               </div>
             </div>
             <div className="mobile-screen-balance">
-              <BalanceCards
-                balances={balances}
-                setBalances={setBalances}
-                walletId={null}
-              />
+              <BalanceCards balances={balances} setBalances={setBalances} walletId={null} />
             </div>
           </div>
-         <div className='form'>
-         <h1 className="stake-title">Please submit your leverage details</h1>
-          <div className="main-stake-card">
-            <div onClick={() => setShowDrop(!showDrop)} className={showDrop ? "clicked-network-selector-container" : "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="form">
+            <h1 className="stake-title">Please submit your leverage details</h1>
+            <div className="main-stake-card">
+              <div
+                onClick={() => setShowDrop(!showDrop)}
+                className={showDrop ? 'clicked-network-selector-container' : '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>
-                <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>
+              <div className="apy-rate">$0.00 APY / year</div>
+              <div className="parent-divider1">
+                <div className="divider1"></div>
+              </div>
 
-            <div className="apy-rate">$0.00 APY / year</div>
-                 <div className='parent-divider1' >
-                          <div className="divider1"></div>
-                 </div>
-         
-            <GasFee/>
+              <GasFee />
+            </div>
+          </div>
+          <div className="can-stk">
+            <Button variant="secondary" size="lg" className="cancel">
+              {' '}
+              Cancel
+            </Button>
+            <Button variant="secondary" size="lg" className="stake-button1">
+              Stake
+            </Button>
           </div>
-
-         </div>
-         <div className='can-stk'>
-         <Button variant="secondary" size="lg" className='cancel'> Cancel</Button>
-         <Button variant="secondary" size="lg" className="stake-button1">
-            Stake
-          </Button>
-         
-         </div>
-         
         </div>
       </div>
     </VaultLayout>
   );
 }
 
-
-
-export default Stake;
\ No newline at end of file
+export default Stake;
diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
index 54c36abe..34a834dd 100644
--- a/frontend/src/pages/vault/stake/stake.css
+++ b/frontend/src/pages/vault/stake/stake.css
@@ -212,7 +212,8 @@
     display: flex;
     gap: 8px;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    width:100%;
     margin-top: 2rem;
   }
    .cancel {
@@ -241,17 +242,12 @@
 
   }
 
-  .parent-divider {
-    display: flex;
-    justify-items: auto;
-  
-  
-}
 
 .divider1 {
-    /* max-width: 100%; */
     height: 1px;
+    width: 80%;
     background: var(--footer-divider-bg);
+    margin:auto;
 }
 
   
@@ -259,9 +255,11 @@
 
 /* Desktop view */
 @media (min-width:768px) {
-  .divider {
-    width: 100%;
+  .divider1 {
+    height: 1px;
+    width: 80%;
     background: var(--footer-divider-bg);
+    margin:auto;
   
   }
   .stake-wrapper {