Skip to content

Commit

Permalink
Merge pull request #34 from artsemkavaleu-deriv/57157
Browse files Browse the repository at this point in the history 
Artsem / Advertiser page fix styles in desktop
  • Loading branch information
@carolsachdeva
carolsachdeva committed Mar 2, 2022
2 parents f7cb8d2 + ba6b539 commit ecf3402
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 46 deletions.
44 changes: 28 additions & 16 deletions packages/p2p/src/components/advertiser-page/advertiser-page-stats.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
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, Localize } from 'Components/i18next';
import { useStores } from 'Stores';
import './advertiser-page.scss';

const AdvertiserPageStats = () => {
const { advertiser_page_store } = useStores();
const { advertiser_page_store, general_store } = useStores();

const {
buy_completion_rate,
buy_orders_count,
buy_time_avg,
completed_orders_count,
partner_count,
release_time_avg,
sell_completion_rate,
sell_orders_count,
total_turnover,
} = advertiser_page_store.advertiser_info;

const avg_buy_time_in_minutes = buy_time_avg > 60 ? Math.round(buy_time_avg / 60) : '< 1';
Expand All @@ -44,7 +44,7 @@ const AdvertiserPageStats = () => {
/>
</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>
<div className='advertiser-page__stats-cell-separator' />
Expand All @@ -63,7 +63,7 @@ const AdvertiserPageStats = () => {
/>
</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.Row>
Expand All @@ -85,7 +85,15 @@ const AdvertiserPageStats = () => {
/>
</Text>
<Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
{completed_orders_count || '0'}
{total_turnover ? (
<Money
amount={total_turnover}
currency={general_store.client.currency}
show_currency
/>
) : (
'-'
)}
</Text>
</Table.Cell>
<div className='advertiser-page__stats-cell-separator' />
Expand Down Expand Up @@ -170,8 +178,8 @@ const AdvertiserPageStats = () => {
]}
/>
</Text>
<Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
{buy_completion_rate ? `${buy_completion_rate} (${buy_orders_count})` : '-'}
<Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
{buy_completion_rate ? `${buy_completion_rate}% (${buy_orders_count})` : '-'}
</Text>
</Table.Cell>
<div className='advertiser-page__stats-cell-separator' />
Expand All @@ -189,8 +197,8 @@ const AdvertiserPageStats = () => {
]}
/>
</Text>
<Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
{sell_completion_rate ? `${sell_completion_rate} (${sell_orders_count})` : '-'}
<Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
{sell_completion_rate ? `${sell_completion_rate}% (${sell_orders_count})` : '-'}
</Text>
</Table.Cell>
<div className='advertiser-page__stats-cell-separator' />
Expand All @@ -208,13 +216,17 @@ const AdvertiserPageStats = () => {
]}
/>
</Text>
<Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
{completed_orders_count || '0'}
<Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
{total_turnover ? (
<Money amount={total_turnover} currency={general_store.client.currency} show_currency />
) : (
'-'
)}
</Text>
</Table.Cell>
</Table.Row>
</Table>
<Table>
<Table className='advertiser-page__stats--wrapper'>
<Table.Row className='advertiser-page__stats'>
<Table.Cell className='advertiser-page__stats-cell'>
<Text as='p' color='less-prominent' line_height='m' size='xs'>
Expand All @@ -230,7 +242,7 @@ const AdvertiserPageStats = () => {
]}
/>
</Text>
<Text align='center' color='prominent' size='s' weight='bold'>
<Text color='prominent' size='m' weight='bold'>
{release_time_avg
? localize('{{- avg_buy_time_in_minutes}} min', {
avg_buy_time_in_minutes,
Expand All @@ -253,7 +265,7 @@ const AdvertiserPageStats = () => {
]}
/>
</Text>
<Text align='center' color='prominent' size='s' weight='bold'>
<Text color='prominent' size='m' weight='bold'>
{release_time_avg
? localize('{{- avg_release_time_in_minutes}} min', {
avg_release_time_in_minutes,
Expand All @@ -266,7 +278,7 @@ const AdvertiserPageStats = () => {
<Text as='p' color='less-prominent' line_height='m' size='xs'>
<Localize i18n_default_text='Trade partners' />
</Text>
<Text as='p' color='prominent' line_height='m' size='xs' weight='bold'>
<Text as='p' color='prominent' line_height='m' size='m' weight='bold'>
{partner_count || '0'}
</Text>
</Table.Cell>
Expand Down
56 changes: 30 additions & 26 deletions packages/p2p/src/components/advertiser-page/advertiser-page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,35 +47,39 @@ const AdvertiserPage = () => {
setShouldShowPopup={advertiser_page_store.setShowAdPopup}
table_type={advertiser_page_store.counterparty_type === buy_sell.BUY ? buy_sell.BUY : buy_sell.SELL}
/>
<div className='advertiser-page__header-details'>
<UserAvatar
nickname={advertiser_page_store.advertiser_details_name}
size={isMobile() ? 32 : 64}
text_size={isMobile() ? 's' : 'sm'}
/>
<div className='advertiser-page__header-name--column'>
<div className='advertiser-page__header-name'>
<Text color='prominent' line-height='m' size='s' weight='bold'>
{advertiser_page_store.advertiser_details_name}
</Text>
{first_name && last_name && (
<div className='advertiser-page__header-real-name'>
<Text color='less-prominent' line_height='xs' size='xs'>
{`(${first_name} ${last_name})`}
</Text>
</div>
)}
</div>
<TradeBadge
is_poa_verified={full_verification}
is_poi_verified={basic_verification}
trade_count={completed_orders_count}
large
<div className='advertiser-page-details-container'>
<div className='advertiser-page__header-details'>
<UserAvatar
nickname={advertiser_page_store.advertiser_details_name}
size={isMobile() ? 32 : 64}
text_size={isMobile() ? 's' : 'sm'}
/>
<div className='advertiser-page__header-name--column'>
<div className='advertiser-page__header-name'>
<Text color='prominent' line-height='m' size='s' weight='bold'>
{advertiser_page_store.advertiser_details_name}
</Text>
{first_name && last_name && (
<div className='advertiser-page__header-real-name'>
<Text color='less-prominent' line_height='xs' size='xs'>
{`(${first_name} ${last_name})`}
</Text>
</div>
)}
</div>
<div className='my-profile-name--row'>
<TradeBadge
is_poa_verified={full_verification}
is_poi_verified={basic_verification}
trade_count={completed_orders_count}
large
/>
</div>
</div>
</div>
</div>

<AdvertiserPageStats />
<AdvertiserPageStats />
</div>
<AdvertiserPageAdverts />
</div>
);
Expand Down
16 changes: 12 additions & 4 deletions packages/p2p/src/components/advertiser-page/advertiser-page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,12 @@
}

&-name {
align-self: center;
display: flex;
flex-direction: row;
height: fit-content;
width: fit-content;

&--column {
align-self: center;
display: flex;
flex-direction: column;
padding-left: 0.8rem;
Expand Down Expand Up @@ -94,7 +92,7 @@
grid-template-columns: repeat(3, 1fr);
height: 5rem;
justify-content: space-between;
margin: 2rem;
margin: 2rem 0;
width: 100%;

@include mobile {
Expand All @@ -105,8 +103,9 @@

&-cell {
display: grid;
min-width: 65px;
min-width: 20rem;
text-align: center;
margin-right: 10rem;

@include mobile {
min-width: 12rem;
Expand All @@ -133,6 +132,7 @@

&-separator {
border-right: 1px solid #ededed;
margin-right: 2rem;
}
}

Expand Down Expand Up @@ -276,6 +276,14 @@
}
}

&-details {
&-container {
padding: 2.4rem;
border: 1px solid var(--general-hover);
border-radius: 0.8rem;
}
}

&-empty {
height: 100%;
margin-top: 4rem;
Expand Down

0 comments on commit ecf3402

Please sign in to comment.