fix: modified css and gasfee component

djeck1432 · Nov 28, 2024 · 4bff2a5 · 4bff2a5
1 parent b184d96
commit 4bff2a5
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 116 deletions.
diff --git a/frontend/src/components/StakeCard/GasFee.jsx → frontend/src/components/GasFee/GasFee.jsx b/frontend/src/components/StakeCard/GasFee.jsx → 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>
     );
-}
+}
diff --git a/frontend/src/components/GasFee/gasfee.css 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;
+}
diff --git 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;
-  }
+.stake-card .img {
+  margin-right: 100px;
+}
diff --git 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,16 +27,16 @@ 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} />
               <MetricCard title="APY Balance" value="0.046731" icon={USDC} />
             </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
@@ -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
@@ -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,89 +71,24 @@
 
 
 .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) {
   .sidebar {
     width: 160px;
   }
 
-  .footer {
-    width: calc(100% - 160px);
-  }
 }