Merge pull request #30 from artsemkavaleu-deriv/57153

Artsem / My Profile page fix styles
carolsachdeva · Feb 25, 2022 · f7cb8d2 · f7cb8d2
2 parents 915ed72 + 8633a96
commit f7cb8d2
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 18 deletions.
diff --git a/packages/p2p/src/components/misc/toggle-container.scss b/packages/p2p/src/components/misc/toggle-container.scss
@@ -5,7 +5,7 @@
     border-radius: $BORDER_RADIUS;
 
     @include tablet-up {
-        margin: 2.4rem 0;
+        margin: 2.4rem 0 4.8rem;
     }
 
     @include mobile {

diff --git a/...p2p/src/components/my-profile/my-profile-stats/my-profile-balance/my-profile-balance.scss b/...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/...my-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.jsx b/...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/...y-profile/my-profile-stats/my-profile-details-container/my-profile-details-container.scss b/...y-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/...onents/my-profile/my-profile-stats/my-profile-details-table/my-profile-details-table.scss b/...onents/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
@@ -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/.../components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.jsx b/.../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,15 @@ const MyProfileStatsTable = () => {
                                 />
                             </Text>
                             <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                                {total_turnover || '-'}
+                                {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 +230,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 +248,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 +266,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 +284,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 +312,11 @@ const MyProfileStatsTable = () => {
                             />
                         </Text>
                         <Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
-                            {total_turnover || '-'}
+                            {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/...components/my-profile/my-profile-stats/my-profile-stats-table/my-profile-stats-table.scss b/...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
@@ -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>