From 65203629a6ffaa40bceecd05c201fd89b0db1ab4 Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Wed, 31 Jul 2024 09:01:40 +0400 Subject: [PATCH 1/3] fix: scrolling issues in responsive --- .../PaymentMethodForm/PaymentMethodForm.scss | 24 +++++++++++++++---- .../PaymentMethodsFormFooter.scss | 2 -- .../screens/MyProfile/MyProfile.scss | 6 ++--- .../MyProfileAdDetails.scss | 2 +- .../PaymentMethodsEmpty.scss | 2 +- 5 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/components/PaymentMethodForm/PaymentMethodForm.scss b/src/components/PaymentMethodForm/PaymentMethodForm.scss index 98b5d7ea..31fdfe87 100644 --- a/src/components/PaymentMethodForm/PaymentMethodForm.scss +++ b/src/components/PaymentMethodForm/PaymentMethodForm.scss @@ -6,6 +6,7 @@ @include mobile-or-tablet-screen { width: 100%; + height: 100%; min-width: 36rem; position: absolute; top: 0; @@ -47,28 +48,35 @@ } } } + .derivs-button__variant--ghost:hover:not(:disabled) { background: transparent; text-decoration: underline; text-decoration-color: #ec3f3f; } + .deriv-input--field:not(:focus) { border: 1px solid #d6dadb; } + .deriv-input__field:not(:placeholder-shown) ~ label { color: #333333; } + .deriv-input__container { width: 100%; } + .deriv-input { padding: 0.5 1.2rem; } + .deriv-input, .deriv-input--field { width: 100%; font-size: 1.4rem; } + .deriv-input__right-content { display: flex; align-items: center; @@ -88,12 +96,13 @@ @include mobile-or-tablet-screen { overflow: auto; - height: calc(100vh - 17rem); - padding-bottom: 8rem; + height: calc(100% - 11rem); } + } - @include mobile { - height: calc(100vh - 16rem); + &__fields { + @include mobile-or-tablet-screen { + flex: 1; } } @@ -113,6 +122,7 @@ cursor: pointer; color: #ffffff; font-size: large; + rect { fill: #999; } @@ -120,6 +130,7 @@ &__field { color: #333333; + &-wrapper { width: 100%; padding: 1rem 0; @@ -132,9 +143,11 @@ & .deriv-dropdown__items { box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.24); } + & .deriv-input { height: 4rem; align-items: center; + &__helper-message { display: none; } @@ -144,9 +157,11 @@ max-height: 20rem; } } + & .deriv-input__right-content { display: flex; align-items: center; + & .deriv-dropdown__button { &--active { transform: none; @@ -155,6 +170,7 @@ } } } + &__text { display: inline-block; line-height: 1.5; diff --git a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss index 62b9db25..b63ba284 100644 --- a/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss +++ b/src/components/PaymentMethodsFormFooter/PaymentMethodsFormFooter.scss @@ -10,7 +10,5 @@ width: 100%; padding: 1.6rem 2.4rem; border-top: 2px solid #f2f3f4; - position: absolute; - bottom: 0; } } diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss index 5e2c72f5..c3fcb9f5 100644 --- a/src/pages/my-profile/screens/MyProfile/MyProfile.scss +++ b/src/pages/my-profile/screens/MyProfile/MyProfile.scss @@ -3,13 +3,11 @@ flex-direction: column; padding-top: 2.4rem; overflow-y: auto; - max-height: calc(100vh - 19rem); - min-height: calc(100vh - 19rem); + height: calc(100% - 19rem); @include mobile-or-tablet-screen { padding: 0; - max-height: calc(100vh - 11rem); - min-height: calc(100vh - 11rem); + height: calc(100% - 11rem); } &__tabs { diff --git a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss index 17e7a6fd..492da72b 100644 --- a/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss +++ b/src/pages/my-profile/screens/MyProfileAdDetails/MyProfileAdDetails.scss @@ -16,7 +16,7 @@ &__mobile-wrapper { position: absolute; top: 0; - height: calc(100vh - 7.5rem); + height: calc(100% - 7.5rem); } & .deriv-textarea { diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss index 3bd2fc1c..0ffb09d0 100644 --- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss +++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsEmpty/PaymentMethodsEmpty.scss @@ -5,7 +5,7 @@ width: 100%; @include mobile-or-tablet-screen { - margin-top: 7rem; + margin: 7rem 0 2rem; justify-content: center; } From 0fa96fd5cbeada4ab8843c3a5a8ecc34db3cc24b Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Wed, 31 Jul 2024 14:57:00 +0400 Subject: [PATCH 2/3] fix: payment methoods list in responsive --- .../PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss index 8ac5725e..e05b8fe8 100644 --- a/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss +++ b/src/pages/my-profile/screens/PaymentMethods/PaymentMethodsList/PaymentMethodsList.scss @@ -5,7 +5,7 @@ & .mobile-wrapper { &__body { - height: calc(100vh - 22rem); + height: 100%; overflow-y: scroll; } From 1c2646825d85cae6d9c76ff801c3aed885a47c1e Mon Sep 17 00:00:00 2001 From: Farrah Mae Ochoa Date: Thu, 1 Aug 2024 11:46:41 +0400 Subject: [PATCH 3/3] fix: payment method dropdown --- src/pages/my-profile/screens/MyProfile/MyProfile.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/my-profile/screens/MyProfile/MyProfile.scss b/src/pages/my-profile/screens/MyProfile/MyProfile.scss index c3fcb9f5..4ed121e7 100644 --- a/src/pages/my-profile/screens/MyProfile/MyProfile.scss +++ b/src/pages/my-profile/screens/MyProfile/MyProfile.scss @@ -3,7 +3,7 @@ flex-direction: column; padding-top: 2.4rem; overflow-y: auto; - height: calc(100% - 19rem); + height: calc(100% - 12rem); @include mobile-or-tablet-screen { padding: 0;