fix:stake-page-ui

djeck1432 · Dec 17, 2024 · 14da194 · 14da194
1 parent 78d8a63
commit 14da194
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 24 deletions.
diff --git a/frontend/src/pages/vault/stake/Stake.jsx b/frontend/src/pages/vault/stake/Stake.jsx
@@ -57,7 +57,7 @@ function Stake() {
               />
             </div>
           </div>
-         <div className=''>
+         <div className='form'>
          <h1 className="stake-title">Please submit your leverage details</h1>
           <div className="main-card">
             <div onClick={() => setShowDrop(!showDrop)} className={showDrop ? "clicked-network-selector-container" : "network-selector-container"}>
@@ -117,9 +117,14 @@ function Stake() {
           </div>
 
          </div>
-          <Button variant="secondary" size="lg" className="stake-button">
+         <div className='can-stk'>
+         <button className='cancel'> Cancel</button>
+         <Button variant="secondary" size="lg" className="stake-button">
             Stake
           </Button>
+
+         </div>
+
         </div>
       </div>
     </VaultLayout>

diff --git a/frontend/src/pages/vault/stake/stake.css b/frontend/src/pages/vault/stake/stake.css
@@ -8,22 +8,6 @@
   background-color: hsla(261, 49%, 15%, 1);
 }
 
-
-/* .top-cards {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 24px;
-  align-items: stretch;
-} */
-
-
-
-
-
-
-
-
 .network-selector-container {
   position: relative;
   width: 100%;
@@ -170,7 +154,7 @@
 } 
 
   .main-container {
-    width: 390px;
+    width: 100%;
     /* gap: 24px;
     padding-top: 37px;
     border-radius: 20px;
@@ -180,6 +164,7 @@
     justify-content: center;
     flex-direction: column;
     align-items: center; */
+    padding: 0;
   }
 
   .stake-card {
@@ -192,9 +177,10 @@
     font-weight: 600;
     font-size: 16px;
     display: flex;
-    /* flex-direction: column;
-    justify-content: center; */
+    justify-content: center; 
     gap: 16px;
+    /* flex-direction: column;
+   
     /* align-items: center; */
   }
 
@@ -228,19 +214,44 @@
     display: block;
     margin: 0 auto;
     text-align: center;
-    padding: 1rem 0rem;
+    padding: 1.5rem 0rem;
   }
 
+  .can-stk{
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    justify-content: center;
+    margin-top: 2rem;
+  }
+
+  .cancel {
+    width: 167px;
+    height: 60px;
+    padding: 16px 24px;
+    border-radius: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    border-color: #36294E;
+    background-color: transparent;
+    color: white;
+  } 
+
   .stake-button {
     width: 167px;
     height: 60px;
     padding: 16px 24px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 14px;
-    margin: 0 auto;
-    display: block;
   } 
+  .form{
+    margin-bottom: 2rem;
+    width: 342px;
+    display: block;
+    margin: 0 auto;
+
+  }
 
 }
 
@@ -302,6 +313,9 @@
     font-size: 14px;
     margin-top: 2rem;
   } 
+  .cancel{
+    display: none;
+  }
 
 }