From f0e2c90e77f7958921e78a2a7e5b12097d66368d Mon Sep 17 00:00:00 2001
From: artsemkavaleu-deriv <artsem@deriv.com>
Date: Tue, 22 Feb 2022 14:34:15 +0300
Subject: [PATCH 1/2] MyProfile page fix styles

---
 .../src/components/misc/toggle-container.scss |  3 +-
 .../my-profile-balance.scss                   |  3 --
 .../my-profile-details-container.jsx          |  1 +
 .../my-profile-details-container.scss         |  2 ++
 .../my-profile-details-table.scss             |  3 ++
 .../my-profile-name/my-profile-name.scss      |  2 +-
 .../my-profile-stats-table.jsx                | 28 ++++++++++++-------
 .../my-profile-stats-table.scss               |  2 +-
 .../my-profile-stats/my-profile-stats.jsx     |  2 --
 9 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/packages/p2p/src/components/misc/toggle-container.scss b/packages/p2p/src/components/misc/toggle-container.scss
index 7186b4761d3c..09b9707cb022 100644
--- a/packages/p2p/src/components/misc/toggle-container.scss
+++ b/packages/p2p/src/components/misc/toggle-container.scss
@@ -5,7 +5,8 @@
     border-radius: $BORDER_RADIUS;
 
     @include tablet-up {
-        margin: 2.4rem 0;
+        margin-top: 2.4rem;
+        margin-bottom: 4.8rem;
     }
 
     @include mobile {
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 995b966e738d..46e120dfe93d 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
@@ -1,7 +1,4 @@
 .my-profile-balance {
-    display: flex;
-    align-items: center;
-
     &__amount {
         margin-right: 0.8rem;
     }
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
index d851ce5fd9cb..99b086887a0f 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx
@@ -3,6 +3,7 @@ import MyProfileBalance from '../my-profile-balance';
 import MyProfileDetailsTable from '../my-profile-details-table';
 import MyProfileName from '../my-profile-name';
 import { useStores } from 'Stores';
+import './my-profile-details-container.scss';
 
 const MyProfileDetailsContainer = () => {
     const { my_profile_store } = useStores();
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
index 8b468ed67293..68d3df1c7cd4 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss
@@ -1,6 +1,7 @@
 .my-profile-details-container {
     border: 1px solid var(--general-hover);
     border-radius: 0.8rem;
+    margin-top: 2.4rem;
     padding: 2.4rem;
 
     @include mobile {
@@ -10,5 +11,6 @@
 
     &--table {
         display: flex;
+        justify-content: space-between;
     }
 }
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
index e88598962ef4..f78741f64633 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss
@@ -9,6 +9,8 @@
         flex-direction: column;
         padding-right: 2.4rem;
         white-space: nowrap;
+        height: 4rem;
+        margin-top: 1rem;
 
         @include mobile {
             border-right: unset;
@@ -28,6 +30,7 @@
         display: flex;
         flex-direction: row;
         width: 29.2rem;
+        border: none;
 
         @include mobile {
             flex-direction: column;
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
index 018f67bc0b6d..7b9c45fd71ba 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-name/my-profile-name.scss
@@ -1,7 +1,7 @@
 .my-profile-name {
     align-items: center;
     display: flex;
-    margin: 2.4rem 0;
+    margin-bottom: 2.4rem;
     width: 100%;
 
     @include mobile {
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
index 9badba84d9bf..70a49772a06c 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { Table, Text } from '@deriv/components';
+import { Money, Table, Text } from '@deriv/components';
 import { isMobile } from '@deriv/shared';
 import { observer } from 'mobx-react-lite';
 import { Localize } from 'Components/i18next';
 import { useStores } from 'Stores';
 
 const MyProfileStatsTable = () => {
-    const { my_profile_store } = useStores();
+    const { my_profile_store, general_store } = useStores();
 
     const {
         buy_completion_rate,
@@ -116,7 +116,7 @@ const MyProfileStatsTable = () => {
                                 />
                             </Text>
                             <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                                {buy_time_avg || '-'}
+                                {buy_time_avg ? `${buy_time_avg} min` : '-'}
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
@@ -134,7 +134,7 @@ const MyProfileStatsTable = () => {
                                 />
                             </Text>
                             <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                                {release_time_avg || '-'}
+                                {release_time_avg ? `${release_time_avg} min` : '-'}
                             </Text>
                         </Table.Cell>
                     </Table.Row>
@@ -160,7 +160,11 @@ const MyProfileStatsTable = () => {
                                 />
                             </Text>
                             <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                                {total_turnover || '-'}
+                                <Money
+                                    amount={total_turnover || '-'}
+                                    currency={general_store.client.currency}
+                                    show_currency
+                                />
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
@@ -222,7 +226,7 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {buy_completion_rate ? `${buy_completion_rate} (${buy_orders_count})` : '-'}
+                            {buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
@@ -240,7 +244,7 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {sell_completion_rate ? `${sell_completion_rate} (${sell_orders_count})` : '-'}
+                            {sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
@@ -258,7 +262,7 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {buy_time_avg || '-'}
+                            {buy_time_avg ? `${buy_time_avg} min` : '-'}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
@@ -276,7 +280,7 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {release_time_avg || '-'}
+                            {release_time_avg ? `${release_time_avg} min` : '-'}
                         </Text>
                     </Table.Cell>
                 </Table.Row>
@@ -304,7 +308,11 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {total_turnover || '-'}
+                            <Money
+                                amount={total_turnover || '-'}
+                                currency={general_store.client.currency}
+                                show_currency
+                            />
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
index 70664fa6587a..91edf746cfb7 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss
@@ -16,7 +16,7 @@
         }
 
         & + & {
-            padding: 0 4rem;
+            padding-left: 2.4rem;
 
             @include mobile {
                 padding: 0.4rem 1.6rem;
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
index 1e4caa3c5b5e..4845e9709fbf 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats.jsx
@@ -6,7 +6,6 @@ import { useStores } from 'Stores';
 import MyProfileStatsTable from './my-profile-stats-table';
 import MyProfileSeparatorContainer from '../my-profile-separator-container';
 import { Localize, localize } from 'Components/i18next';
-import { isMobile } from '@deriv/shared';
 import MyProfilePrivacy from './my-profile-privacy';
 
 const MyProfileStats = () => {
@@ -24,7 +23,6 @@ const MyProfileStats = () => {
             >
                 <MyProfileStatsTable />
             </MobileFullPageModal>
-            <MyProfileSeparatorContainer.Line className='my-profile-stats-separator' is_invisible={isMobile()} />
             <DesktopWrapper>
                 <MyProfileStatsTable />
             </DesktopWrapper>

From 8633a96a8eafc865639944bfd9a2137ff8587d1e Mon Sep 17 00:00:00 2001
From: artsemkavaleu-deriv <artsem@deriv.com>
Date: Thu, 24 Feb 2022 11:49:08 +0300
Subject: [PATCH 2/2] currency display fix

---
 .../src/components/misc/toggle-container.scss |  3 +--
 .../my-profile-stats-table.jsx                | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/p2p/src/components/misc/toggle-container.scss b/packages/p2p/src/components/misc/toggle-container.scss
index 09b9707cb022..1837bf528b54 100644
--- a/packages/p2p/src/components/misc/toggle-container.scss
+++ b/packages/p2p/src/components/misc/toggle-container.scss
@@ -5,8 +5,7 @@
     border-radius: $BORDER_RADIUS;
 
     @include tablet-up {
-        margin-top: 2.4rem;
-        margin-bottom: 4.8rem;
+        margin: 2.4rem 0 4.8rem;
     }
 
     @include mobile {
diff --git a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
index 70a49772a06c..070b23b66dd7 100644
--- a/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
+++ b/packages/p2p/src/components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx
@@ -160,11 +160,15 @@ const MyProfileStatsTable = () => {
                                 />
                             </Text>
                             <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                                <Money
-                                    amount={total_turnover || '-'}
-                                    currency={general_store.client.currency}
-                                    show_currency
-                                />
+                                {total_turnover ? (
+                                    <Money
+                                        amount={total_turnover}
+                                        currency={general_store.client.currency}
+                                        show_currency
+                                    />
+                                ) : (
+                                    '-'
+                                )}
                             </Text>
                         </Table.Cell>
                         <Table.Cell className='my-profile-stats-table__cell'>
@@ -308,11 +312,11 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            <Money
-                                amount={total_turnover || '-'}
-                                currency={general_store.client.currency}
-                                show_currency
-                            />
+                            {total_turnover ? (
+                                <Money amount={total_turnover} currency={general_store.client.currency} show_currency />
+                            ) : (
+                                '-'
+                            )}
                         </Text>
                     </Table.Cell>
                     <Table.Cell className='my-profile-stats-table__cell'>