Skip to content

Commit

Permalink
Merge pull request #328 from nada-deriv/nada/FEQ-2644/ui-issues
Browse files Browse the repository at this point in the history 
Nada/feq 2644/UI issues
  • Loading branch information
@farrah-deriv
farrah-deriv authored Sep 19, 2024
2 parents a63c186 + a5ddfee commit a89f3f1
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 81 deletions.
6 changes: 2 additions & 4 deletions src/components/AdvertsTableRow/AdvertsTableRow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,8 @@
}

&--advertiser {
grid-template-columns: repeat(4, 1fr);

@include mobile-or-tablet-screen {
grid-template-columns: repeat(2, 1fr);
@include desktop {
grid-template-columns: repeat(4, 1fr);
}
}

Expand Down
163 changes: 87 additions & 76 deletions src/components/AdvertsTableRow/AdvertsTableRow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { api } from '@/hooks';
import { useIsAdvertiser, useIsAdvertiserBarred, useModalManager, usePoiPoaStatus } from '@/hooks/custom-hooks';
import { useAdvertiserInfoState } from '@/providers/AdvertiserInfoStateProvider';
import { generateEffectiveRate, getCurrentRoute, getEligibilityErrorMessage } from '@/utils';
import { LabelPairedChevronRightMdRegularIcon } from '@deriv/quill-icons';
import { LabelPairedChevronRightMdBoldIcon } from '@deriv/quill-icons';
import { Localize, useTranslations } from '@deriv-com/translations';
import { Button, Text, useDevice } from '@deriv-com/ui';
import './AdvertsTableRow.scss';
Expand Down Expand Up @@ -100,7 +100,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
<Container>
{isBuySellPage && (
<div
className={clsx('flex gap-4 items-center', {
className={clsx('flex gap-4 items-center mb-[1.6rem] lg:mb-0 relative', {
'cursor-pointer': !isAdvertiserBarred,
})}
onClick={redirectToAdvertiser}
Expand Down Expand Up @@ -150,85 +150,96 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
)}
</div>
</div>

{!isDesktop && isBuySellPage && (
<LabelPairedChevronRightMdBoldIcon
className='absolute right-0 top-0'
onClick={redirectToAdvertiser}
/>
)}
</div>
)}
<Container {...(!isDesktop && { className: clsx('flex flex-col', { 'mt-3 ml-14': isBuySellPage }) })}>
{!isDesktop && (
<Text color={isBuySellPage ? 'general' : 'less-prominent'} size={isBuySellPage ? 'xs' : 'sm'}>
<Localize i18n_default_text='Rate (1 USD)' />
</Text>
)}
<Container {...(!isDesktop && { className: 'flex flex-col-reverse mb-7' })}>
<Text color={textColor} size='sm'>
{!isDesktop && localize('Limits:')} {minOrderAmountLimitDisplay}-
{maxOrderAmountLimitDisplay} {accountCurrency}
</Text>
<Text className='text-wrap w-[90%]' color='success' size={size} weight='bold'>
{displayEffectiveRate} {localCurrency}
</Text>
</Container>
<div className='flex flex-wrap gap-2'>
{paymentMethodNames ? (
paymentMethodNames.map((method: string, idx: number) => (
<PaymentMethodLabel
color='general'
key={idx}
paymentMethodName={method}
size={isDesktop ? 'sm' : 'xs'}
/>
))
) : (
<PaymentMethodLabel color='general' paymentMethodName='-' />
<Container className='flex justify-between'>
<Container
{...(!isDesktop && { className: clsx('flex flex-col', { 'mt-3 ml-14': isBuySellPage }) })}
>
{!isDesktop && (
<Text
color={isBuySellPage ? 'general' : 'less-prominent'}
size={isBuySellPage ? 'xs' : 'sm'}
>
<Localize i18n_default_text='Rate (1 USD)' />
</Text>
)}
</div>
</Container>
</Container>
{!isMyAdvert && (
<div
className={clsx('flex relative', {
'flex-col h-full justify-center items-end': isBuySellPage,
'flex-row justify-end': !isBuySellPage,
})}
>
{!isDesktop && isBuySellPage && (
<LabelPairedChevronRightMdRegularIcon
className='adverts-table-row__chevron'
onClick={redirectToAdvertiser}
/>
)}
{isEligible === 0 ? (
<Button
className='border px-[1.6rem]'
color='black'
onClick={() => showModal('ErrorModal')}
size={size}
textSize={buttonTextSize()}
variant='outlined'
>
<Localize i18n_default_text='Unavailable' />
</Button>
) : (
<Button
className='lg:min-w-[7.5rem]'
disabled={isAdvertiserBarred}
onClick={() => {
if (!isAdvertiser && (!isPoaVerified || !isPoiVerified)) {
const searchParams = new URLSearchParams(location.search);
searchParams.set('poi_poa_verified', 'false');
history.replace({ pathname: location.pathname, search: searchParams.toString() });
} else {
setSelectedAdvertId(advertId);
showModal(isAdvertiser ? 'BuySellForm' : 'NicknameModal');
}
}}
size={size}
textSize={buttonTextSize()}
<Container {...(!isDesktop && { className: 'flex flex-col-reverse mb-7' })}>
<Text color={textColor} size='sm'>
{!isDesktop && localize('Limits:')} {minOrderAmountLimitDisplay}-
{maxOrderAmountLimitDisplay} {accountCurrency}
</Text>
<Text className='text-wrap w-[90%]' color='success' size={size} weight='bold'>
{displayEffectiveRate} {localCurrency}
</Text>
</Container>
<div className='flex flex-wrap gap-2'>
{paymentMethodNames ? (
paymentMethodNames.map((method: string, idx: number) => (
<PaymentMethodLabel
color='general'
key={idx}
paymentMethodName={method}
size={isDesktop ? 'sm' : 'xs'}
/>
))
) : (
<PaymentMethodLabel color='general' paymentMethodName='-' />
)}
</div>
</Container>
{!isMyAdvert && (
<div
className={clsx('flex relative', {
'flex-col h-full justify-center items-end': isBuySellPage,
'flex-row justify-end': !isBuySellPage,
})}
>
{isBuyAdvert ? localize('Buy') : localize('Sell')} {accountCurrency}
</Button>
{isEligible === 0 ? (
<Button
className='border px-[1.6rem]'
color='black'
onClick={() => showModal('ErrorModal')}
size={size}
textSize={buttonTextSize()}
variant='outlined'
>
<Localize i18n_default_text='Unavailable' />
</Button>
) : (
<Button
className='lg:min-w-[7.5rem]'
disabled={isAdvertiserBarred}
onClick={() => {
if (!isAdvertiser && (!isPoaVerified || !isPoiVerified)) {
const searchParams = new URLSearchParams(location.search);
searchParams.set('poi_poa_verified', 'false');
history.replace({
pathname: location.pathname,
search: searchParams.toString(),
});
} else {
setSelectedAdvertId(advertId);
showModal(isAdvertiser ? 'BuySellForm' : 'NicknameModal');
}
}}
size={size}
textSize={buttonTextSize()}
>
{isBuyAdvert ? localize('Buy') : localize('Sell')} {accountCurrency}
</Button>
)}
</div>
)}
</div>
)}
</Container>
</Container>
{isModalOpenFor('BuySellForm') && (
<BuySellForm
advertId={advertId}
Expand Down
4 changes: 4 additions & 0 deletions src/components/ProfileContent/ProfileContent.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,5 +11,9 @@
border-radius: 0;
border-bottom: 0.1rem solid #e6e9e9;
padding: 1.6rem;

@include tablet {
border: 0.1rem solid #e6e9e9;
}
}
}
5 changes: 5 additions & 0 deletions src/pages/orders/components/OrdersDateSelection/OrdersDateSelection.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,11 @@

@include mobile-or-tablet-screen {
margin-top: 1.6rem;
width: 100%;

& .deriv-input__container {
width: 100%;
}
}

&__input {
Expand Down
1 change: 0 additions & 1 deletion src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
margin: 1.6rem;
justify-content: center;
flex-direction: column;
align-items: flex-start;
}

&__tabs {
Expand Down

0 comments on commit a89f3f1

Please sign in to comment.