From 016d7ac986c5ea3be554b54ec545ebd9da31b543 Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Thu, 12 Sep 2024 10:43:03 +0400
Subject: [PATCH 1/2] fix: center align orders tab

---
 .../components/OrdersDateSelection/OrdersDateSelection.scss  | 5 +++++
 .../screens/Orders/OrdersTableHeader/OrdersTableHeader.scss  | 1 -
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/orders/components/OrdersDateSelection/OrdersDateSelection.scss b/src/pages/orders/components/OrdersDateSelection/OrdersDateSelection.scss
index 21b1d335..a2075d49 100644
--- a/src/pages/orders/components/OrdersDateSelection/OrdersDateSelection.scss
+++ b/src/pages/orders/components/OrdersDateSelection/OrdersDateSelection.scss
@@ -8,6 +8,11 @@
 
     @include mobile-or-tablet-screen {
         margin-top: 1.6rem;
+        width: 100%;
+
+        & .deriv-input__container {
+            width: 100%;
+        }
     }
 
     &__input {
diff --git a/src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.scss b/src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.scss
index 670088d9..2fccb79d 100644
--- a/src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.scss
+++ b/src/pages/orders/screens/Orders/OrdersTableHeader/OrdersTableHeader.scss
@@ -8,7 +8,6 @@
         margin: 1.6rem;
         justify-content: center;
         flex-direction: column;
-        align-items: flex-start;
     }
 
     &__tabs {

From bd7b3df4e445af9c5533d230561a7c2fae541284 Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Fri, 13 Sep 2024 16:18:02 +0400
Subject: [PATCH 2/2] fix: button text issue fixed

---
 .../AdvertsTableRow/AdvertsTableRow.scss      |   6 +-
 .../AdvertsTableRow/AdvertsTableRow.tsx       | 163 ++++++++++--------
 .../ProfileContent/ProfileContent.scss        |   4 +
 3 files changed, 93 insertions(+), 80 deletions(-)

diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.scss b/src/components/AdvertsTableRow/AdvertsTableRow.scss
index 4ce39a25..4b307301 100644
--- a/src/components/AdvertsTableRow/AdvertsTableRow.scss
+++ b/src/components/AdvertsTableRow/AdvertsTableRow.scss
@@ -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);
         }
     }
 
diff --git a/src/components/AdvertsTableRow/AdvertsTableRow.tsx b/src/components/AdvertsTableRow/AdvertsTableRow.tsx
index 0ff712dd..9c15eb7c 100644
--- a/src/components/AdvertsTableRow/AdvertsTableRow.tsx
+++ b/src/components/AdvertsTableRow/AdvertsTableRow.tsx
@@ -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';
@@ -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}
@@ -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 (!isPoaVerified || !isPoiVerified) {
-                                    const searchParams = new URLSearchParams(location.search);
-                                    searchParams.set('poi_poa_verified', 'false');
-                                    history.replace({ pathname: location.pathname, search: searchParams.toString() });
-                                } else {
-                                    if (!isAdvertiser) 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 (!isPoaVerified || !isPoiVerified) {
+                                            const searchParams = new URLSearchParams(location.search);
+                                            searchParams.set('poi_poa_verified', 'false');
+                                            history.replace({
+                                                pathname: location.pathname,
+                                                search: searchParams.toString(),
+                                            });
+                                        } else {
+                                            if (!isAdvertiser) 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}
diff --git a/src/components/ProfileContent/ProfileContent.scss b/src/components/ProfileContent/ProfileContent.scss
index c0bfdbd4..5ea1fe49 100644
--- a/src/components/ProfileContent/ProfileContent.scss
+++ b/src/components/ProfileContent/ProfileContent.scss
@@ -11,5 +11,9 @@
         border-radius: 0;
         border-bottom: 0.1rem solid #e6e9e9;
         padding: 1.6rem;
+
+        @include tablet {
+            border: 0.1rem solid #e6e9e9;
+        }
     }
 }