Skip to content

Commit e21d014

Browse files
farrah-derivfarrah-deriv
authored
Merge pull request #197 from ameerul-deriv/fix-tablet-ui-issues
Ameerul / Fix tablet UI issues
2 parents d021bc8 + 4582c4b commit e21d014

File tree

48 files changed

+147
-85
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+147
-85
lines changed

‎src/components/AdvertiserName/BlockDropdown.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
padding: 0;
1717
top: 3rem;
1818
right: 1rem;
19+
z-index: 3;
1920
}
2021

2122
.deriv-input {

‎src/components/AdvertsTableRow/AdvertsTableRow.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import './AdvertsTableRow.scss';
1515

1616
const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
1717
const { hideModal, isModalOpenFor, showModal } = useModalManager();
18-
const { isDesktop } = useDevice();
18+
const { isDesktop, isTablet } = useDevice();
1919
const history = useHistory();
2020
const location = useLocation();
2121
const isBuySellPage = getCurrentRoute() === 'buy-sell';
@@ -70,7 +70,11 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
7070
const ratingAverageDecimal = ratingAverage ? Number(ratingAverage).toFixed(1) : null;
7171
const textColor = isDesktop ? 'general' : 'less-prominent';
7272
const size = isDesktop ? 'sm' : 'md';
73-
const buttonTextSize = isDesktop ? 'xs' : 'md';
73+
const buttonTextSize = () => {
74+
if (isDesktop) return 'xs';
75+
else if (isTablet) return 'sm';
76+
return 'md';
77+
};
7478

7579
return (
7680
<div
@@ -180,7 +184,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
180184
color='black'
181185
onClick={() => showModal('ErrorModal')}
182186
size={size}
183-
textSize={buttonTextSize}
187+
textSize={buttonTextSize()}
184188
variant='outlined'
185189
>
186190
<Localize i18n_default_text='Unavailable' />
@@ -199,7 +203,7 @@ const AdvertsTableRow = memo((props: TAdvertsTableRowRenderer) => {
199203
}
200204
}}
201205
size={size}
202-
textSize={buttonTextSize}
206+
textSize={buttonTextSize()}
203207
>
204208
{isBuyAdvert ? 'Buy' : 'Sell'} {accountCurrency}
205209
</Button>

‎src/components/AppHeader/Notifications/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { Notifications as UINotifications, useDevice } from '@deriv-com/ui';
77
export const Notifications = () => {
88
const [isOpen, setIsOpen] = useState(false);
99
const { localize } = useTranslations();
10-
const { isDesktop } = useDevice();
10+
const { isMobile } = useDevice();
1111
return (
1212
<>
1313
<TooltipMenuIcon
1414
as='button'
15-
className={isDesktop ? 'mr-4 pl-2 border-l-[1px] h-[32px]' : ''}
15+
className={isMobile ? '' : 'mr-4 pl-2 border-l-[1px] h-[32px]'}
1616
disableHover
1717
onClick={() => setIsOpen(!isOpen)}
1818
tooltipContent={localize('View notifications')}
@@ -21,7 +21,7 @@ export const Notifications = () => {
2121
<LegacyNotificationIcon fill='red' iconSize='sm' />
2222
</TooltipMenuIcon>
2323
<UINotifications
24-
className={isDesktop ? 'notifications__wrapper absolute top-20 right-80 z-10' : ''}
24+
className={isMobile ? '' : 'notifications__wrapper absolute top-20 right-80 z-10'}
2525
clearNotificationsCallback={() => {}}
2626
componentConfig={{
2727
clearButtonText: localize('Clear all'),

‎src/components/AppHeader/PlatformSwitcher/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@ export const PlatformSwitcher = () => {
99
<UIPlatformSwitcher
1010
bottomLinkLabel={localize('Looking for CFDs? Go to Trader’s Hub')}
1111
buttonProps={{
12-
className: 'hover:bg-transparent xl:hover:bg-[#e6e9e9] px-[1.6rem]',
12+
className: 'hover:bg-transparent lg:hover:bg-[#e6e9e9] px-[1.6rem]',
1313
icon: platformsConfig[0].buttonIcon,
1414
}}
15-
itemsWrapperClassName='top-48 h-full xl:top-[4.7rem] xl:h-auto'
16-
overlayClassName='top-48 xl:top-[4.7rem]'
15+
itemsWrapperClassName='top-48 h-full lg:top-[4.7rem] lg:h-auto'
16+
overlayClassName='top-48 lg:top-[4.7rem]'
1717
>
1818
{platformsConfig.map(({ active, description, href, icon }) => (
1919
<PlatformSwitcherItem
2020
active={active}
21-
className='py-[1.4rem] px-[1.6rem] my-[1.4rem] mx-[1.6rem] h-auto xl:py-[2.4rem] xl:px-[1.6rem] xl:m-[1.6rem] xl:mt-[2.4rem] xl:h-[14.3rem]'
21+
className='py-[1.4rem] px-[1.6rem] my-[1.4rem] mx-[1.6rem] h-auto lg:py-[2.4rem] lg:m-[1.6rem] lg:mt-[2.4rem] lg:h-[14.3rem]'
2222
description={localize('{{description}}', { description })}
2323
href={href}
2424
icon={icon}

‎src/components/BuySellForm/BuySellForm.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@
3030
top: 0;
3131
left: 0;
3232
z-index: 1;
33-
height: calc(100vh - 7rem);
3433

3534
& .mobile-wrapper__body {
3635
overflow: overlay;

‎src/components/BuySellForm/BuySellForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,7 +272,7 @@ const BuySellForm = ({ advertId, isModalOpen, onRequestClose }: TBuySellFormProp
272272
{errorMessage && (
273273
<div className='px-[1.6rem] lg:px-[2.4rem] mt-[1.6rem] lg:mt-[2.4rem]'>
274274
<InlineMessage variant='error'>
275-
<Text size={isDesktop ? '2xs' : 'xs'}>{errorMessage}</Text>
275+
<Text size={!isDesktop ? '2xs' : 'xs'}>{errorMessage}</Text>
276276
</InlineMessage>
277277
</div>
278278
)}

‎src/components/BuySellForm/BuySellFormHeader/BuySellFormHeader.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
1-
import { Text } from '@deriv-com/ui';
1+
import { Text, useDevice } from '@deriv-com/ui';
22

33
type TBuySellFormHeaderProps = {
44
currency?: string;
55
isBuy: boolean;
66
};
77

88
const BuySellFormHeader = ({ currency = '', isBuy }: TBuySellFormHeaderProps) => {
9+
const { isMobile } = useDevice();
10+
911
return (
10-
<Text size='md' weight='bold'>
12+
<Text size={isMobile ? 'lg' : 'md'} weight='bold'>
1113
{`${isBuy ? 'Sell' : 'Buy'} ${currency}`}
1214
</Text>
1315
);

‎src/components/BuySellForm/BuySellFormHeader/__tests__/BuySellFormHeader.spec.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@ const mockProps = {
66
isBuy: true,
77
};
88

9+
jest.mock('@deriv-com/ui', () => ({
10+
...jest.requireActual('@deriv-com/ui'),
11+
useDevice: jest.fn(() => ({ isMobile: false })),
12+
}));
13+
914
describe('BuySellFormHeader', () => {
1015
it('should render the header as expected', () => {
1116
render(<BuySellFormHeader {...mockProps} />);

‎src/components/Checklist/Checklist.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ type TChecklistItem = {
1111
};
1212

1313
const Checklist = ({ items }: { items: TChecklistItem[] }) => {
14-
const { isDesktop } = useDevice();
14+
const { isMobile } = useDevice();
1515
return (
1616
<div className='checklist'>
1717
{items.map(item => (
1818
<div className='checklist__item' key={item.text}>
19-
<Text color={item.isDisabled ? 'less-prominent' : 'general'} size={isDesktop ? 'sm' : 'md'}>
19+
<Text color={item.isDisabled ? 'less-prominent' : 'general'} size={isMobile ? 'md' : 'sm'}>
2020
{item.text}
2121
</Text>
2222
{item.status === 'done' ? (

‎src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,8 @@
3636
padding: 2rem;
3737
border-top: 2px solid #f2f3f4;
3838
}
39+
40+
@include mobile {
41+
height: calc(100vh - 7.5rem);
42+
}
3943
}

‎src/components/Modals/AdErrorTooltipModal/AdErrorTooltipModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,8 @@ const AdErrorTooltipModal = ({
8282
remainingAmount,
8383
visibilityStatus = [],
8484
}: TAdErrorTooltipModal) => {
85-
const { isDesktop } = useDevice();
86-
const textSize = isDesktop ? 'sm' : 'md';
85+
const { isMobile } = useDevice();
86+
const textSize = isMobile ? 'md' : 'sm';
8787
const getMultipleErrorMessages = (errorStatuses: string[]) =>
8888
errorStatuses.map((status, index) => (
8989
<div className='my-5' key={status}>

‎src/components/Modals/BlockUnblockUserModal/BlockUnblockUserModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const BlockUnblockUserModal = ({
2323
onRequestClose,
2424
setErrorMessage,
2525
}: TBlockUnblockUserModalProps) => {
26-
const { isDesktop } = useDevice();
26+
const { isMobile } = useDevice();
2727
const {
2828
mutate: blockAdvertiser,
2929
mutation: { error, isSuccess },
@@ -44,7 +44,7 @@ const BlockUnblockUserModal = ({
4444
// eslint-disable-next-line react-hooks/exhaustive-deps
4545
}, [isSuccess, onClickBlocked, unblockIsSuccess, unblockError, error, setErrorMessage]);
4646

47-
const textSize = isDesktop ? 'sm' : 'md';
47+
const textSize = isMobile ? 'md' : 'sm';
4848
const getModalTitle = () => (isBlocked ? `Unblock ${advertiserName}?` : `Block ${advertiserName}?`);
4949

5050
const getModalContent = () =>
@@ -77,7 +77,7 @@ const BlockUnblockUserModal = ({
7777
shouldCloseOnOverlayClick={false}
7878
>
7979
<Modal.Header className='px-[1.6rem] lg:px-[2.4rem]' hideBorder hideCloseIcon>
80-
<Text as='p' size={isDesktop ? 'md' : 'lg'} weight='bold'>
80+
<Text as='p' size={isMobile ? 'lg' : 'md'} weight='bold'>
8181
{getModalTitle()}
8282
</Text>
8383
</Modal.Header>

‎src/components/Modals/OrderDetailsCancelModal/OrderDetailsCancelModal.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const OrderDetailsCancelModal = ({ id, isModalOpen, onRequestClose }: TOrderDeta
1313
const { data } = api.settings.useSettings();
1414
const { data: advertiserInfo } = api.advertiser.useGetInfo();
1515
const { mutate } = api.order.useCancel();
16-
const { isDesktop } = useDevice();
17-
const textSize = isDesktop ? 'sm' : 'md';
16+
const { isMobile } = useDevice();
17+
const textSize = isMobile ? 'md' : 'sm';
1818

1919
const onCancel = () => {
2020
mutate({ id });

‎src/components/PaymentMethodCard/PaymentMethodCardBody/PaymentMethodCardBody.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ const PaymentMethodCardBody = ({
1414
const displayName = paymentMethod?.display_name;
1515
const modifiedDisplayName = displayName?.replace(/\s|-/gm, '');
1616
const isBankOrOther = modifiedDisplayName && ['BankTransfer', 'Other'].includes(modifiedDisplayName);
17-
const { isDesktop } = useDevice();
18-
const textSize = isDesktop ? 'sm' : 'md';
17+
const { isMobile } = useDevice();
18+
const textSize = isMobile ? 'md' : 'sm';
1919
return (
2020
<div className='payment-method-card__body'>
2121
{isBankOrOther && !shouldShowPaymentMethodDisplayName ? null : <Text size={textSize}>{displayName}</Text>}

‎src/components/PaymentMethodForm/PaymentMethodForm.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,13 @@
8888

8989
@include mobile-or-tablet-screen {
9090
overflow: auto;
91-
height: calc(100vh - 16rem);
91+
height: calc(100vh - 17rem);
9292
padding-bottom: 8rem;
9393
}
94+
95+
@include mobile {
96+
height: calc(100vh - 16rem);
97+
}
9498
}
9599

96100
.deriv-input--right-content {

‎src/components/PaymentMethodForm/PaymentMethodForm.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const PaymentMethodForm = ({
5656
update,
5757
} = api.advertiserPaymentMethods.useUpdate();
5858

59-
const { isDesktop } = useDevice();
59+
const { isDesktop, isMobile } = useDevice();
6060

6161
const showPaymentMethodFormModal = isError || isCreateError || isUpdateError;
6262

@@ -126,7 +126,7 @@ const PaymentMethodForm = ({
126126
hasBorder={!isDesktop}
127127
onClick={handleGoBack}
128128
pageTitle={localize('Add payment method')}
129-
size={isDesktop ? 'md' : 'lg'}
129+
size={isMobile ? 'lg' : 'md'}
130130
weight='bold'
131131
/>
132132
</Modal.Header>
@@ -226,7 +226,7 @@ const PaymentMethodForm = ({
226226
hasBorder={!isDesktop}
227227
onClick={handleGoBack}
228228
pageTitle={title === '' ? localize('Add payment method') : title}
229-
size={isDesktop ? 'md' : 'lg'}
229+
size={isMobile ? 'lg' : 'md'}
230230
weight='bold'
231231
/>
232232
<form className='payment-method-form__form' onSubmit={handleFormSubmit}>

‎src/components/ProfileContent/ProfileBalance/ProfileBalance.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import './ProfileBalance.scss';
1111

1212
const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdvertiserStats> }) => {
1313
const { data: activeAccount } = api.account.useActiveAccount();
14-
const { isDesktop } = useDevice();
14+
const { isDesktop, isMobile } = useDevice();
1515
const [shouldShowAvailableBalanceModal, setShouldShowAvailableBalanceModal] = useState(false);
1616

1717
const currency = activeAccount?.currency || 'USD';
@@ -37,7 +37,7 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
3737
]
3838
);
3939

40-
const labelSize = isDesktop ? 'sm' : 'md';
40+
const labelSize = isMobile ? 'md' : 'sm';
4141

4242
return (
4343
<>
@@ -57,7 +57,7 @@ const ProfileBalance = ({ advertiserStats }: { advertiserStats: DeepPartial<TAdv
5757
onClick={() => setShouldShowAvailableBalanceModal(true)}
5858
/>
5959
</div>
60-
<Text size={isDesktop ? 'xl' : '2xl'} weight='bold'>
60+
<Text size={isMobile ? '2xl' : 'xl'} weight='bold'>
6161
{FormatUtils.formatMoney(advertiserStats?.balance_available || 0)} USD
6262
</Text>
6363
</div>

‎src/components/ProfileContent/ProfileContent.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
@include mobile-or-tablet-screen {
1010
border: none;
1111
border-radius: 0;
12-
width: 100vw;
1312
border-bottom: 0.1rem solid #e6e9e9;
1413
padding: 1.6rem;
1514
}

‎src/components/ProfileContent/ProfileStats/ProfileStats.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const ProfileStats = ({ advertiserStats }: { advertiserStats: Partial<TAdvertise
4444
},
4545
{ text: localize('Trade partners'), value: tradePartners },
4646
];
47+
// eslint-disable-next-line react-hooks/exhaustive-deps
4748
}, [advertiserStats]);
4849

4950
return (

‎src/components/Verification/Verification.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const getPoaAction = (status: string | undefined, localize: TLocalize) => {
3434
};
3535

3636
const Verification = () => {
37-
const { isDesktop } = useDevice();
37+
const { isMobile } = useDevice();
3838
const { localize } = useTranslations();
3939
const { data, isLoading } = usePoiPoaStatus();
4040
const { isP2PPoaRequired, isPoaPending, isPoaVerified, isPoiPending, isPoiVerified, poaStatus, poiStatus } =
@@ -86,10 +86,10 @@ const Verification = () => {
8686
return (
8787
<div className='verification'>
8888
<DerivLightIcCashierSendEmailIcon className='verification__icon' height={128} width={128} />
89-
<Text className='verification__text' size={isDesktop ? 'md' : 'lg'} weight='bold'>
89+
<Text className='verification__text' size={isMobile ? 'lg' : 'md'} weight='bold'>
9090
<Localize i18n_default_text='Verify your P2P account' />
9191
</Text>
92-
<Text align='center' className='verification__text' size={isDesktop ? 'sm' : 'lg'}>
92+
<Text align='center' className='verification__text' size={isMobile ? 'lg' : 'sm'}>
9393
<Localize i18n_default_text='Verify your identity and address to use Deriv P2P.' />
9494
</Text>
9595
<Checklist items={checklistItems} />

‎src/pages/advertiser/screens/Advertiser/Advertiser.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import './Advertiser.scss';
1212

1313
const Advertiser = () => {
1414
const { localize } = useTranslations();
15-
const { isDesktop } = useDevice();
15+
const { isDesktop, isMobile } = useDevice();
1616
const { showModal } = useModalManager();
1717
const { advertiserId } = useParams<{ advertiserId: string }>();
1818
const { data: advertiserInfo } = api.advertiser.useGetInfo();
@@ -51,7 +51,7 @@ const Advertiser = () => {
5151
/>
5252
),
5353
})}
54-
size={isDesktop ? 'md' : 'lg'}
54+
size={isMobile ? 'lg' : 'md'}
5555
weight='bold'
5656
/>
5757
{isLoading ? (

‎src/pages/advertiser/screens/Advertiser/__tests__/Advertiser.spec.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ jest.mock('@/hooks/custom-hooks', () => ({
4545

4646
jest.mock('@deriv-com/ui', () => ({
4747
...jest.requireActual('@deriv-com/ui'),
48-
useDevice: jest.fn(() => ({ isDesktop: true })),
48+
useDevice: jest.fn(() => ({ isDesktop: true, isMobile: false })),
4949
}));
5050

5151
jest.mock('@/components', () => ({

‎src/pages/advertiser/screens/AdvertiserBlockOverlay/AdvertiserBlockOverlay.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
top: 0;
1818
left: 0;
1919
width: 100%;
20-
z-index: 9999;
20+
z-index: 2;
2121

2222
@include mobile-or-tablet-screen {
2323
border: none;

‎src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
height: calc(100vh - 5rem);
5050

5151
.search {
52-
position: fixed;
52+
position: relative;
5353

5454
.deriv-input {
5555
padding: 2rem 1rem;

‎src/pages/buy-sell/components/CurrencyDropdown/CurrencyDropdown.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type TCurrencyDropdownProps = {
1717

1818
const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDropdownProps) => {
1919
const { data } = api.settings.useSettings();
20-
const { isDesktop } = useDevice();
20+
const { isDesktop, isMobile } = useDevice();
2121
const [showCurrencySelector, setShowCurrencySelector] = useState<boolean>(false);
2222

2323
const currencySelectorRef = useRef<HTMLDivElement>(null);
@@ -72,10 +72,10 @@ const CurrencyDropdown = ({ selectedCurrency, setSelectedCurrency }: TCurrencyDr
7272
})}
7373
onClick={() => setShowCurrencySelector(prev => !prev)}
7474
>
75-
<Text className='currency-dropdown__dropdown-text' size={isDesktop ? '2xs' : 'xs'}>
75+
<Text className='currency-dropdown__dropdown-text' size={isMobile ? 'xs' : '2xs'}>
7676
<Localize i18n_default_text='Currency' />
7777
</Text>
78-
<Text size={isDesktop ? 'sm' : 'md'}>{selectedCurrency}</Text>
78+
<Text size={isMobile ? 'md' : 'sm'}>{selectedCurrency}</Text>
7979
<LabelPairedChevronDownMdRegularIcon
8080
className={clsx('currency-dropdown__dropdown-icon', {
8181
'currency-dropdown__dropdown-icon--active': showCurrencySelector,

0 commit comments

Comments
 (0)