Merge pull request #188 from ameerul-deriv/FEQ-2448-refactor-AvailableP2PBalanceModal

Ameerul / FEQ-2448 Refactor AvailableP2PBalanceModal

Author: farrah-deriv

src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.scss

@@ -1,15 +1,10 @@
 .available-balance-modal {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    right: auto;
-    bottom: auto;
-    transform: translate(-50%, -50%);
-    width: 44rem;
+    @include default-modal;
     padding: 2.4rem;
-    border-radius: 8px;
-    background: #fff;
-    box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+
+    @include mobile {
+        padding: 1.6rem;
+    }
 
     &__text {
         margin: 2.4rem 0 1.6rem;
@@ -30,17 +25,10 @@
 
     &__note {
         font-style: italic;
-        margin: 1.6rem 0 2.4rem;
+        margin: 1.6rem 0;
     }
 
     @include mobile {
-        padding: 1.6rem;
         width: 32.8rem;
     }
-
-    &__footer {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.8rem;
-    }
 }

src/components/Modals/AvailableP2PBalanceModal/AvailableP2PBalanceModal.tsx

@@ -1,6 +1,5 @@
-import Modal from 'react-modal';
 import { Localize } from '@deriv-com/translations';
-import { Button, Text } from '@deriv-com/ui';
+import { Button, Modal, Text } from '@deriv-com/ui';
 import { customStyles } from '../helpers';
 import './AvailableP2PBalanceModal.scss';
 
@@ -20,28 +19,32 @@ const AvailableP2PBalanceModal = ({ isModalOpen, onRequestClose }: TAvailableP2P
             style={customStyles}
             testId='dt_available_p2p_balance_modal'
         >
-            <Text as='p' weight='bold'>
-                <Localize i18n_default_text='Deriv P2P balance' />
-            </Text>
-            <Text as='p' className='available-balance-modal__text' size='sm'>
-                <Localize i18n_default_text='Your Deriv P2P balance includes:' />
-            </Text>
-            <ol className='available-balance-modal__list'>
-                <Text as='li' size='sm'>
-                    <Localize i18n_default_text='P2P deposits: Funds received from buying USD from another Deriv P2P user.' />
+            <Modal.Header className='p-0 h-auto' hideBorder hideCloseIcon>
+                <Text as='p' weight='bold'>
+                    <Localize i18n_default_text='Deriv P2P balance' />
                 </Text>
-                <Text as='li' size='sm'>
-                    <Localize i18n_default_text='Non-reversible deposits: Deposits from non-reversible payment methods.' />
+            </Modal.Header>
+            <Modal.Body>
+                <Text as='p' className='available-balance-modal__text' size='sm'>
+                    <Localize i18n_default_text='Your Deriv P2P balance includes:' />
                 </Text>
-            </ol>
-            <Text as='p' className='available-balance-modal__note' size='sm'>
-                <Localize i18n_default_text='Note: Funds deposited using reversible payment methods, like credit cards, Maestro, Diners Club, ZingPay, Skrill, Neteller, Ozow, and UPI QR will not appear in your P2P balance.' />
-            </Text>
-            <div className='available-balance-modal__footer'>
+                <ol className='available-balance-modal__list'>
+                    <Text as='li' size='sm'>
+                        <Localize i18n_default_text='P2P deposits: Funds received from buying USD from another Deriv P2P user.' />
+                    </Text>
+                    <Text as='li' size='sm'>
+                        <Localize i18n_default_text='Non-reversible deposits: Deposits from non-reversible payment methods.' />
+                    </Text>
+                </ol>
+                <Text as='p' className='available-balance-modal__note' size='sm'>
+                    <Localize i18n_default_text='Note: Funds deposited using reversible payment methods, like credit cards, Maestro, Diners Club, ZingPay, Skrill, Neteller, Ozow, and UPI QR will not appear in your P2P balance.' />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer className='p-0 min-h-auto' hideBorder>
                 <Button onClick={onRequestClose} size='lg' textSize='sm'>
                     <Localize i18n_default_text='OK' />
                 </Button>
-            </div>
+            </Modal.Footer>
         </Modal>
     );
 };