From 115b3b1a001a45371897ef0c014327ce0ea6969b Mon Sep 17 00:00:00 2001 From: Oshioke-Salaki Date: Fri, 29 Nov 2024 22:23:48 +0100 Subject: [PATCH 1/4] feat: make vault withdraw page mobile resp. --- .../src/components/MetricCard/metricCard.css | 8 +++ .../src/pages/vault/withdraw/withdraw.css | 70 +++++++++++++++++++ 2 files changed, 78 insertions(+) diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css index 686ec399..8bb01d95 100644 --- a/frontend/src/components/MetricCard/metricCard.css +++ b/frontend/src/components/MetricCard/metricCard.css @@ -7,4 +7,12 @@ flex-direction: column; justify-content: center; align-items: center; + } + + @media screen and (max-width: 768px) { + .metric-card { + width: 167px; + border-radius: 16px; + padding: 21px; + } } \ No newline at end of file diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css index 9e9c0691..8367eee1 100644 --- a/frontend/src/pages/vault/withdraw/withdraw.css +++ b/frontend/src/pages/vault/withdraw/withdraw.css @@ -6,6 +6,8 @@ display: flex; justify-content: center; align-items: flex-start; + width: 100%; + padding: 0 24px; } @@ -61,6 +63,8 @@ padding: 3rem 1.5rem; height: auto; gap: 24px; + display: flex; + flex-direction: column; } .amount-stack-card { @@ -76,6 +80,9 @@ .amount-stack-card-title-container { text-align: center; + display: flex; + flex-direction: column; + align-items: center; } .withdraw-input-title { @@ -108,6 +115,7 @@ display: flex; align-items: center; justify-content: space-between; + padding: 12px 8px; } .fee-title { @@ -171,3 +179,65 @@ mask-composite: exclude; z-index: -1; } + + +@media screen and (max-width: 768px) { + .main-container{ + width: 100%; + } + + .withdraw-container { + gap: 26px; + width: 100%; + } + + .top-cards{ + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + padding-bottom: 26px; + border-bottom: 1px #201338 solid; + } + + .withdraw-title { + font-size: 16px; + font-weight: 400; + } + + .main-card { + padding: 0rem; + gap: 26px; + } + + .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; + } +} \ No newline at end of file From d4025a465628c159b703a8e437c7fcd216fd75cf Mon Sep 17 00:00:00 2001 From: Oshioke-Salaki Date: Fri, 29 Nov 2024 22:32:34 +0100 Subject: [PATCH 2/4] chore: prettier fmt --- .../src/components/MetricCard/metricCard.css | 32 +++++++++---------- .../src/pages/vault/withdraw/withdraw.css | 10 +++--- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css index 8bb01d95..e8cfde4b 100644 --- a/frontend/src/components/MetricCard/metricCard.css +++ b/frontend/src/components/MetricCard/metricCard.css @@ -1,18 +1,18 @@ .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: 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; +} - @media screen and (max-width: 768px) { - .metric-card { - width: 167px; - border-radius: 16px; - padding: 21px; - } - } \ No newline at end of file +@media screen and (max-width: 768px) { + .metric-card { + width: 167px; + border-radius: 16px; + padding: 21px; + } +} diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css index 8367eee1..537b14a8 100644 --- a/frontend/src/pages/vault/withdraw/withdraw.css +++ b/frontend/src/pages/vault/withdraw/withdraw.css @@ -8,7 +8,6 @@ align-items: flex-start; width: 100%; padding: 0 24px; - } .withdraw-card { @@ -180,9 +179,8 @@ z-index: -1; } - @media screen and (max-width: 768px) { - .main-container{ + .main-container { width: 100%; } @@ -191,7 +189,7 @@ width: 100%; } - .top-cards{ + .top-cards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; @@ -226,7 +224,7 @@ font-size: 14px; } - .divider{ + .divider { display: none; } @@ -240,4 +238,4 @@ border-radius: 16px; padding: 1px; } -} \ No newline at end of file +} From 4f8ed554caed2a632a20ea56ebf86abc05ed8040 Mon Sep 17 00:00:00 2001 From: Oshioke-Salaki Date: Fri, 29 Nov 2024 23:39:33 +0100 Subject: [PATCH 3/4] feat: adjust styling --- .../src/components/MetricCard/metricCard.css | 18 +++++++++++++++--- frontend/src/pages/vault/vaultLayout.css | 10 ++++------ frontend/src/pages/vault/withdraw/withdraw.css | 17 +++++++++++------ 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css index e8cfde4b..8c65c40c 100644 --- a/frontend/src/components/MetricCard/metricCard.css +++ b/frontend/src/components/MetricCard/metricCard.css @@ -1,5 +1,5 @@ .metric-card { - width: 309px; + width: 100%; background: var(--header-button-bg); border: var(--midnight-purple-border); border-radius: 900px; @@ -11,8 +11,20 @@ @media screen and (max-width: 768px) { .metric-card { - width: 167px; border-radius: 16px; - padding: 21px; + padding: 20.5px 22.5px; + + .card-header { + .label{ + font-size: 14px; + } + } } } + + +@media (max-width: 640px) { + .label{ + font-size: 12px; + } +} \ No newline at end of file diff --git a/frontend/src/pages/vault/vaultLayout.css b/frontend/src/pages/vault/vaultLayout.css index 7eaeba12..7e882b28 100644 --- 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; } - -} \ No newline at end of file +} diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css index 537b14a8..bf8a015d 100644 --- a/frontend/src/pages/vault/withdraw/withdraw.css +++ b/frontend/src/pages/vault/withdraw/withdraw.css @@ -31,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; @@ -41,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; @@ -182,6 +190,7 @@ @media screen and (max-width: 768px) { .main-container { width: 100%; + padding: 24px 0; } .withdraw-container { @@ -190,11 +199,7 @@ } .top-cards { - width: 100%; - display: grid; - grid-template-columns: 1fr 1fr; - padding-bottom: 26px; - border-bottom: 1px #201338 solid; + gap: 8px; } .withdraw-title { From f99011ae2cf51acdb468ebe79d33aec05bd3737c Mon Sep 17 00:00:00 2001 From: Oshioke-Salaki Date: Sat, 30 Nov 2024 11:48:47 +0100 Subject: [PATCH 4/4] fix: paddings and apply border on main-card --- .../src/components/MetricCard/metricCard.css | 31 ++++++++++++++----- .../src/pages/vault/withdraw/withdraw.css | 3 ++ 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/MetricCard/metricCard.css b/frontend/src/components/MetricCard/metricCard.css index 8c65c40c..739bea46 100644 --- a/frontend/src/components/MetricCard/metricCard.css +++ b/frontend/src/components/MetricCard/metricCard.css @@ -7,24 +7,41 @@ 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: 20.5px 22.5px; + padding: 16px 24px; + } +} + +@media (max-width: 640px) { + .metric-card { .card-header { .label{ - font-size: 14px; + font-size: 12px; + line-height: 16px; + } + } + + .card-value{ + .top-card-value{ + font-size: 20px; + line-height: 27px; } } } -} -@media (max-width: 640px) { - .label{ - font-size: 12px; - } } \ No newline at end of file diff --git a/frontend/src/pages/vault/withdraw/withdraw.css b/frontend/src/pages/vault/withdraw/withdraw.css index bf8a015d..646281b9 100644 --- a/frontend/src/pages/vault/withdraw/withdraw.css +++ b/frontend/src/pages/vault/withdraw/withdraw.css @@ -72,6 +72,8 @@ gap: 24px; display: flex; flex-direction: column; + border: var(--midnight-purple-border); + border-radius: 24px; } .amount-stack-card { @@ -210,6 +212,7 @@ .main-card { padding: 0rem; gap: 26px; + border: none; } .amount-stack-card {