fix(wallets): 🚑 fix style issues (deriv-com#16856)

henry-deriv · Sep 16, 2024 · 6bc18c3 · 6bc18c3
1 parent 0ef26a9
commit 6bc18c3
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss b/packages/wallets/src/features/cfd/components/CFDPasswordModalTnc/CFDPasswordModalTnc.scss
@@ -2,7 +2,8 @@
     display: flex;
     flex-direction: column;
     gap: 1.6rem;
-    @include mobile {
+
+    @include mobile-or-tablet-screen {
         margin-top: auto;
     }
 }
diff --git a/...wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.scss b/...wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.scss
@@ -0,0 +1,16 @@
+.wallets-available-mt5 {
+    &__title {
+        display: flex;
+        gap: 0.8rem;
+        align-items: center;
+    }
+    &__badge {
+        border-radius: 0.4rem;
+        max-height: 2.2rem;
+        padding: 0.2rem 0.4rem;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background: #fff7e6;
+    }
+}
diff --git a/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx b/.../wallets/src/features/cfd/flows/MT5/AvailableMT5AccountsList/AvailableMT5AccountsList.tsx
@@ -7,6 +7,7 @@ import { useModal } from '../../../../../components/ModalProvider';
 import { THooks } from '../../../../../types';
 import { getMarketTypeDetails, MARKET_TYPE, PRODUCT, TRADING_PLATFORM_STATUS } from '../../../constants';
 import { JurisdictionModal, MT5PasswordModal, TradingPlatformStatusModal } from '../../../modals';
+import './AvailableMT5AccountsList.scss';
 
 const LazyVerification = lazy(
     () => import(/* webpackChunkName: "wallets-client-verification" */ '../../ClientVerification/ClientVerification')

diff --git a/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.scss b/packages/wallets/src/features/cfd/modals/MT5PasswordModal/MT5PasswordModal.scss
@@ -4,6 +4,7 @@
         width: 100%;
 
         @include mobile-or-tablet-screen {
+            height: 100%;
             width: 100%;
             padding: 0;
             max-width: 60rem;

diff --git a/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss b/packages/wallets/src/features/cfd/screens/EnterPassword/EnterPassword.scss
@@ -11,6 +11,7 @@
         padding-inline: 1.6rem;
         padding-block: 0;
         box-shadow: none;
+        height: 100%;
         width: 100%;
     }
 
@@ -32,7 +33,6 @@
         gap: 1.6rem;
 
         @include mobile-or-tablet-screen {
-            text-align: center;
             gap: 1.6rem;
             width: 100%;
             height: 100%;