Merge pull request #381 from A6dulmalik/feat/withdrawal-page-ui

updated withdraw page ui
djeck1432 · Dec 17, 2024 · 417e357 · 417e357
2 parents c43312d + 81f9617
commit 417e357
Show file tree

Hide file tree

Showing 9 changed files with 1,003 additions and 5,946 deletions.
diff --git a/frontend/src/components/Footer/footer.css b/frontend/src/components/Footer/footer.css
@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: space-between;
   position: relative;
+  z-index: 15;
 }
 
 .footer-text p {

diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css
@@ -2,40 +2,67 @@
   width: 309px;
   background: var(--header-button-bg);
   border: var(--midnight-purple-border);
-  border-radius: 900px;
+  border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 4px;
+  padding: 24px;
 }
 
-.card-header {
+.card-header .label{
   font-size: 14px;
   line-height: 19px;
   font-weight: 600;
 }
 
+.card-value .metric-card-value{
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 600;
+}
+
+
+
 @media (max-width: 768px) {
   .metric-card {
     width: 100%; /* Full width on mobile */
-    border-radius: 16px; /* Adjust border radius for mobile */
-    padding: 16px 24px;
+    border-radius: 10px; /* Adjust border radius for mobile */
+    /* padding: 16px 24px; */
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 678px) {
   .metric-card {
     width: 100%; /* Ensure full width on smaller screens */
+    /* padding: 24px 2px; */
   }
 
-  .card-header .label {
-    font-size: 12px;
-    line-height: 16px;
+  .card-value .metric-card-value {
+    font-size: 21px;
+    /* line-height: 21px; */
   }
+}
 
-  .card-value .metric-card-value {
-    font-size: 20px;
-    line-height: 27px;
+@media (max-width: 480px) {
+  .metric-card {
+    padding: 0 2px;
   }
+
+  .card-header .label {
+    font-size: 12px;
+   line-height: 16px; 
+ }
+
+ .card-value .metric-card-value {
+  font-size: 16px;
+  line-height: 21px;
+}
+}
+
+@media (max-width: 426px) {
+
+
+
 }
diff --git a/frontend/src/pages/spotnet/overview/overview.css b/frontend/src/pages/spotnet/overview/overview.css
@@ -14,10 +14,11 @@
 
 .sidebar {
   width: 374px;
-  height: 912px;
-  min-height: 100vh;
-  position: fixed;
+  height: calc(100% - 90px);
+  min-height: 115vh;
+  top: 50;
   left: 0;
+  z-index: 10;
 }
 
 .list-label-container {

diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
@@ -75,11 +75,11 @@
 .main-card {
   padding: 3rem 1.5rem;
   height: auto;
-  gap: 24px;
   display: flex;
   flex-direction: column;
+  gap: 24px;
   border: var(--midnight-purple-border);
-  border-radius: 24px;
+  border-radius: 8px;
 }
 
 .network-selector {
@@ -275,22 +275,15 @@
   }
 
   .main-card {
-    padding: 20px;
     gap: 26px;
     flex-direction: column;
     border-radius: 12px;
-    margin-left: 12px;
-    margin-right: 11px;
   }
 
   .clicked-network-selector-container .network-dropdown {
     display: block;
   }
 
-  .top-cards {
-    gap: 8px;
-  }
-
   .network-selector {
     padding: 15px;
   }
@@ -349,14 +342,13 @@
 
   .top-cards {
     display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
+    width: 100%;
+    /* flex-wrap: wrap; */
+    /* gap: 6px; */
   }
 
   .main-card {
     margin: 0 auto;
-    max-width: 80%;
-    padding: 20px;
     gap: 20px;
   }
 
@@ -374,3 +366,49 @@
     width: 85%;
   }
 }
+
+@media (max-width: 678px) {
+  .main-container {
+    padding-top: 0px;
+  }
+
+  .top-cards {
+    width: 470px;
+    gap: 8px;
+  }
+
+  .main-card {
+    padding: 0 20px;
+    border: none;
+  }
+
+}
+
+@media (max-width: 480px) {
+  .top-cards {
+    width: 380px;
+    gap: 10px;
+  }
+
+  .main-card {
+    width: 450px;
+  }
+}
+
+@media (max-width: 400px) {
+  .top-cards {
+    width: 330px;
+  }
+
+}
+
+@media (max-width: 320px) {
+  .top-cards {
+    width: 280px;
+  }
+
+  .main-card {
+    width: 330px;
+    margin:auto;
+  }
+}
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
@@ -16,7 +16,6 @@
   flex-direction: column;
   padding: 1.5rem 2.5rem 1.5rem;
   position: absolute;
-  height: 100%;
 }
 
 .sidebar-title {
@@ -80,28 +79,45 @@
 }
 
 @media (max-width: 1024px) {
+  .sidebar {
+    width: 220px;
+  }
+
   .sidebar-title {
-    color: white;
     font-size: 14px;
-    margin-bottom: 1rem;
-    padding-bottom: 8px;
   }
 
   .nav-item {
-    gap: 0.5rem;
     font-size: 12px;
-    padding-bottom: 10px;
   }
 }
 
 @media (max-width: 768px) {
   .sidebar {
-    width: 200px;
+    width: 180px;
+    display: none;
+  }
+
+  .sidebar-title {
+    font-size: 12px;
+  }
+
+  .nav-item {
+    font-size: 10px;
   }
 }
 
 @media (max-width: 640px) {
   .sidebar {
-    width: 160px;
+    width: 140px;
+    display: none;
+  }
+
+  .sidebar-title {
+    font-size: 10px;
+  }
+
+  .nav-item {
+    font-size: 8px;
   }
 }
diff --git a/frontend/src/pages/vault/withdraw/Withdraw.jsx b/frontend/src/pages/vault/withdraw/Withdraw.jsx
@@ -11,14 +11,15 @@ export default function Withdraw() {
     <VaultLayout>
     <div className="withdraw-wrapper">
       <div className="withdraw-container">
-        <div className="main-container">
-          <div className="top-cards">
+       <h1 className="withdrawal-title">zkLend Withdraw</h1>
+        <div className="main-container-withdraw">
+          <div className="top-cards-withdraw">
             <MetricCard title="Total Amount staked" value="324,909,894" />
             <MetricCard title="Daily Boost Multiplier" value="0.5%" />
           </div>
         </div>
-        <h1 className="withdraw-title">Staking withdrawal</h1>
-        <div className="main-card">
+        <h1 className="withdraw-title">Stake withdrawal</h1>
+        <div className="main-card-withdraw">
           <div className="amount-stack-card">
             <div className="amount-stack-card-title-container">
               <div className="card-header">
@@ -40,7 +41,7 @@ export default function Withdraw() {
             </div>
           </div>
           <div className="withdraw-input-container">
-            <div className="withdraw-input-title">Input Amount</div>
+            <div className="withdraw-input-title">Input Unstake Amount</div>
             <input type="text" className="withdraw-input" placeholder="Enter Amount to Withdraw" />
           </div>
           <div className="main-card-footer">
@@ -53,8 +54,11 @@ export default function Withdraw() {
             </div>
           </div>
         </div>
-
-        <button className="withdraw-button">Withdraw</button>
+          <button className="withdraw-button larger-screen-btn">Withdraw</button>
+         <div className='mobile-screen-btns'>
+            <button className=" withdraw-button btn">Withdraw</button>
+            <button className=" cancel-button btn">Cancel</button>
+         </div>
       </div>
     </div>
     </VaultLayout>