Merge pull request #308 from Oshioke-Salaki/mobile-vault-withdraw-page

feat: make vault withdraw page mobile resp.
djeck1432 · Nov 30, 2024 · ab6a2d2 · ab6a2d2
2 parents 8baa10c + f99011a
commit ab6a2d2
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 17 deletions.
diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css
@@ -1,10 +1,47 @@
 .metric-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: 100%;
+  background: var(--header-button-bg);
+  border: var(--midnight-purple-border);
+  border-radius: 900px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  .card-header {
+    .label{
+      font-size: 14px;
+      line-height: 19px;
+      font-weight: 600;
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .metric-card {
+    border-radius: 16px;
+    padding: 16px 24px;
+  }
+}
+
+
+@media (max-width: 640px) {
+  .metric-card {
+    .card-header {
+      .label{
+        font-size: 12px;
+        line-height: 16px;
+      }
+    }
+
+    .card-value{
+      .top-card-value{
+        font-size: 20px;
+        line-height: 27px;
+      }
+    }
+  }
+
+
+}
diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css
@@ -10,7 +10,7 @@
 
 .sidebar {
   width: 280px;
-  background-color: #00000F;
+  background-color: #00000f;
   border-right: 1px solid #300734;
   display: flex;
   flex-direction: column;
@@ -66,17 +66,16 @@
   left: 0;
   width: 100%;
   height: 2px;
-  background: linear-gradient(to right, #49ABD2, #36294E);
+  background: linear-gradient(to right, #49abd2, #36294e);
 }
 
-
 .nav-item.active .nav-bullet {
   color: var(--nav-button-hover);
 }
 
 .main-content {
   flex: 1;
-  padding: 2rem 0;
+  padding: 0;
   position: relative;
 }
 
@@ -90,5 +89,4 @@
   .sidebar {
     width: 160px;
   }
-
-}
+}
diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css
@@ -6,7 +6,8 @@
   display: flex;
   justify-content: center;
   align-items: flex-start;
-
+  width: 100%;
+  padding: 0 24px;
 }
 
 .withdraw-card {
@@ -30,8 +31,8 @@
 .main-container {
   width: 642px;
   gap: 24px;
+  padding-top: 37px;
   border-radius: 20px;
-  padding: 1rem;
   color: var(--primary);
   text-align: center;
   display: flex;
@@ -40,6 +41,14 @@
   align-items: center;
 }
 
+.top-cards {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px;
+  align-items: stretch;
+}
+
 .withdraw-title {
   font-size: 20px;
   font-weight: 600;
@@ -61,6 +70,10 @@
   padding: 3rem 1.5rem;
   height: auto;
   gap: 24px;
+  display: flex;
+  flex-direction: column;
+  border: var(--midnight-purple-border);
+  border-radius: 24px;
 }
 
 .amount-stack-card {
@@ -76,6 +89,9 @@
 
 .amount-stack-card-title-container {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .withdraw-input-title {
@@ -108,6 +124,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 12px 8px;
 }
 
 .fee-title {
@@ -171,3 +188,62 @@
   mask-composite: exclude;
   z-index: -1;
 }
+
+@media screen and (max-width: 768px) {
+  .main-container {
+    width: 100%;
+    padding: 24px 0;
+  }
+
+  .withdraw-container {
+    gap: 26px;
+    width: 100%;
+  }
+
+  .top-cards {
+    gap: 8px;
+  }
+
+  .withdraw-title {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .main-card {
+    padding: 0rem;
+    gap: 26px;
+    border: none;
+  }
+
+  .amount-stack-card {
+    padding: 25px 16px;
+    border-radius: 16px;
+  }
+
+  .withdraw-input-title {
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+
+  .withdraw-input {
+    border-radius: 16px;
+    padding: 22px 32px;
+    color: var(--primary);
+    font-size: 14px;
+  }
+
+  .divider {
+    display: none;
+  }
+
+  .withdraw-button {
+    width: 100%;
+    font-size: 14px;
+    padding: 18px 24px 18px 24px;
+  }
+
+  .withdraw-button::before {
+    border-radius: 16px;
+    padding: 1px;
+  }
+}