From de33dc0a2b3c5a964b71c840a7d6e0e9acd79274 Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 2 Feb 2023 14:30:20 +0800
Subject: [PATCH 1/3] chore: added info icon and corrected information

---
 .../my-profile-balance/my-profile-balance.jsx | 27 +++++++++++--------
 .../my-profile-balance.scss                   | 10 ++++++-
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
index 027e8a8c75d0..d643fef93795 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
@@ -1,21 +1,25 @@
 import * as React from 'react';
-import { Money, Text } from '@deriv/components';
+import { Button, Icon, Modal, Money, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
-import { Localize } from 'Components/i18next';
+import { Localize, localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 
 const MyProfileBalance = () => {
     const { general_store } = useStores();
-    // const [is_balance_tooltip_open, setIsBalanceTooltipOpen] = React.useState(false);
+    const [is_balance_tooltip_open, setIsBalanceTooltipOpen] = React.useState(false);
 
     return (
         <div className='my-profile-balance'>
-            {/*
-            TODO: Uncomment when design is updated
-            <Modal has_close_icon={false} is_open={is_balance_tooltip_open} small title={localize('Deriv P2P Balance')}>
-                <Modal.Body>
-                    <Localize i18n_default_text='Deriv P2P balance = deposits that can’t be reversed (bank transfers, etc.) + a portion of deposits that might be reversed (credit card payments, etc.)' />
+            <Modal
+                className='my-profile-balance__modal'
+                has_close_icon={false}
+                is_open={is_balance_tooltip_open}
+                small
+                title={localize('Deriv P2P Balance')}
+            >
+                <Modal.Body className='my-profile-balance__modal-body'>
+                    <Localize i18n_default_text='Deriv P2P balance = deposits that can’t be reversed' />
                 </Modal.Body>
                 <Modal.Footer>
                     <Button
@@ -26,18 +30,19 @@ const MyProfileBalance = () => {
                         large
                     />
                 </Modal.Footer>
-            </Modal> */}
+            </Modal>
             <div className='my-profile-balance--column'>
                 <div className='my-profile-balance--row'>
                     <Text color='less-prominent' line_height='m' size={isMobile() ? 'xxxs' : 'xs'}>
                         <Localize i18n_default_text='Available Deriv P2P balance' />
                     </Text>
-                    {/* <Icon
+                    <Icon
                         className='my-profile-balance--icon'
+                        color='disabled'
                         icon='IcInfoOutline'
                         onClick={() => setIsBalanceTooltipOpen(true)}
                         size={16}
-                    /> */}
+                    />
                 </div>
                 <Text className='my-profile-balance__amount' color='prominent' line_height='m' size='m' weight='bold'>
                     <Money
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
index 46e120dfe93d..74b4d7c8ef95 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
@@ -3,16 +3,24 @@
         margin-right: 0.8rem;
     }
 
+    &__modal {
+        &-body {
+            padding: 1rem 2.4rem;
+        }
+    }
+
     &--column {
         flex-direction: column;
     }
 
     &--icon {
-        margin-left: 0.4rem;
+        cursor: pointer;
+        margin-left: 0.5rem;
     }
 
     &--row {
         display: flex;
         flex-direction: row;
+        align-items: center;
     }
 }

From ee43d0ed697eccbb6fe371d87b941fa8b849d93e Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 2 Feb 2023 14:49:56 +0800
Subject: [PATCH 2/3] chore: fixed modal for mobile and icon

---
 .../my-profile-balance/my-profile-balance.jsx                 | 2 +-
 .../my-profile-balance/my-profile-balance.scss                | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
index d643fef93795..6ef5917411ac 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
@@ -41,7 +41,7 @@ const MyProfileBalance = () => {
                         color='disabled'
                         icon='IcInfoOutline'
                         onClick={() => setIsBalanceTooltipOpen(true)}
-                        size={16}
+                        size={isMobile() ? 12 : 16}
                     />
                 </div>
                 <Text className='my-profile-balance__amount' color='prominent' line_height='m' size='m' weight='bold'>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
index 74b4d7c8ef95..5966b268188b 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss
@@ -6,6 +6,10 @@
     &__modal {
         &-body {
             padding: 1rem 2.4rem;
+
+            @include mobile {
+                padding: 0 1.6rem;
+            }
         }
     }
 

From 7cf65742dd2b3cb22dadc92e7a70139fe2cfd6ec Mon Sep 17 00:00:00 2001
From: ameerul hady <ameerul@deriv.com>
Date: Thu, 2 Feb 2023 19:19:26 +0800
Subject: [PATCH 3/3] chore: changed text

---
 .../my-profile-stats/my-profile-balance/my-profile-balance.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
index 6ef5917411ac..689b73cd1c89 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.jsx
@@ -24,7 +24,7 @@ const MyProfileBalance = () => {
                 <Modal.Footer>
                     <Button
                         has_effect
-                        text={localize('Ok')}
+                        text={localize('OK')}
                         onClick={() => setIsBalanceTooltipOpen(false)}
                         primary
                         large