[WALL] thisyahlen/chore: fix deriv x account text and styles (#11465)

binary-com · Nov 16, 2023 · 74fabb9 · 74fabb9 · vercel · Nov 16, 2023
1 parent 48e1b08
commit 74fabb9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 59 deletions.
diff --git a/...atures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss b/...atures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.scss
@@ -10,46 +10,8 @@
     }
 
     &__details {
+        display: flex;
+        flex-direction: column;
         flex-grow: 1;
-
-        &-loginid {
-            color: var(--system-light-3-less-prominent-text, #999);
-
-            /* desktop/small/S - bold */
-            font-size: 1.2rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 1.8rem; /* 150% */
-        }
-
-        &-title {
-            color: var(--system-light-2-general-text, #333);
-
-            /* desktop/paragraph/P2 - bold */
-            font-size: 1.4rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 2rem; /* 142.857% */
-        }
-
-        &-balance {
-            color: var(--system-light-1-prominent-text, #333);
-
-            /* desktop/paragraph/P2 - bold */
-            font-size: 1.4rem;
-            font-style: normal;
-            font-weight: 700;
-            line-height: 2rem; /* 142.857% */
-        }
-
-        &-description {
-            font-size: 1.2rem;
-            line-height: 1.4rem;
-
-            @include mobile {
-                font-size: 1.4rem;
-                line-height: 2rem;
-            }
-        }
     }
 }
diff --git a/...eatures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx b/...eatures/cfd/flows/OtherCFDs/Dxtrade/AddedDxtradeAccountsList/AddedDxtradeAccountsList.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDxtradeAccountsList } from '@deriv/api';
-import { MT5TradeModal } from '../../../../modals';
 import { TradingAccountCard } from '../../../../../../components';
+import { WalletButton, WalletText } from '../../../../../../components/Base';
 import { useModal } from '../../../../../../components/ModalProvider';
-import { WalletButton } from '../../../../../../components/Base';
 import { getStaticUrl } from '../../../../../../helpers/urls';
 import DerivX from '../../../../../../public/images/derivx.svg';
+import { MT5TradeModal } from '../../../../modals';
 import './AddedDxtradeAccountsList.scss';
 
 const AddedDxtradeAccountsList: React.FC = () => {
@@ -42,9 +42,13 @@ const AddedDxtradeAccountsList: React.FC = () => {
             <div className='wallets-available-derivx__details'>
                 {data?.map(account => (
                     <React.Fragment key={account?.account_id}>
-                        <p className='wallets-available-derivx__details-title'>Deriv X</p>
-                        <p className='wallets-available-derivx__details-balance'>{account?.display_balance}</p>
-                        <p className='wallets-available-derivx__details-loginid'>{account.login}</p>
+                        <WalletText size='sm'>Deriv X</WalletText>
+                        <WalletText size='sm' weight='bold'>
+                            {account?.display_balance}
+                        </WalletText>
+                        <WalletText color='primary' size='xs' weight='bold'>
+                            {account?.login}
+                        </WalletText>
                     </React.Fragment>
                 ))}
             </div>

diff --git a/...fd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss b/...fd/flows/OtherCFDs/Dxtrade/AvailableDxtradeAccountsList/AvailableDxtradeAccountsList.scss
@@ -2,22 +2,8 @@
     &__icon {
         cursor: pointer;
     }
-    &__text {
-        color: var(--brand-coral, #ff444f);
-        text-align: center;
-
-        /* desktop/paragraph/P2 - bold */
-        font-size: 1.4rem;
-        font-style: normal;
-        font-weight: 700;
-        line-height: 2rem; /* 142.857% */
-    }
 
     &__details {
         flex-grow: 1;
-
-        &-title {
-            padding-bottom: 0.5rem;
-        }
     }
 }