Accounts team/Enable tablet view for accounts (deriv-com#15263)

* Farhan/Lock Dtrader Tablet View on Landscape Mode (deriv-com#14781) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * feat: added teamp breakpoints * feat: enable tablet view on accounts * feat: enabled table view for financial assessment * feat: tablet design for personal details * chore: update css files * feat: enable table view for financial assesment * feat: enabled tablet view * feat: removed unwanted code * feat: updated with logical property * feat: removd ui store and added devices * feat: updated nav condition * fix: removed usage of is_mobile, changed mixin name with latest, footer * fix: padding of content and footer btn * DTRA / Kate / FEQ-2212 / Hide footer navigation links popovers (deriv-com#15176) * fix: add check for desktop * refactor: add custom check for tablet os * refactor: revert changes from endpoint note and server time * refactor: device detection * fix: style and update function for detection tablet os * chore: remove empty space * chore: remove used type * DTRA / Kate / FEQ-2213 + FEQ-2205 / Made popover optional (deriv-com#15197) * fix: add check for purchase button popover for tablet * fix: make popover optional for header * refactor: add condition for wallets header * [DTRA] Farhan/Dtrader Tablet Subtasks (deriv-com#15123) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract --------- Co-authored-by: balakrishna-deriv <[email protected]> * chore: update @deriv/deriv-charts to 2.1.16 (deriv-com#15212) Co-authored-by: balakrishna-deriv <[email protected]> * style: initial style changes * feat: tablet view changes for languages * feat: removed unwanted new line * [DTRA] Farhan/Fix test failing (deriv-com#15216) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract * fix: failing test and ts * fix: miseed ts errors --------- Co-authored-by: balakrishna-deriv <[email protected]> * feat: get changes back and just delete mixin for tablet (deriv-com#15182) * [FEQ] Sergei / FEQ-2200, FEQ-2201 / Add a real MT5 account, Identity verification, Choose a jurisdiction popup for tablet (deriv-com#15205) * feat: change styles for mt5 jurisdiction modal * feat: change styles for adding a real mt5 account modal * feat: change more styles * fix: add mock for useDevice hook from deriv-com/ui * style: update self-exclusion deign tablet * chore: update mixin names * feat: enabled tablet view for trading assessment * style: tablet design api token * [DTRA] Farhan/FEQ-2208/Hide indicators and drawing tools toolbar widgets on tablet (deriv-com#15224) * chore: lock landscape mode on tablet view * chore: only show tablet view on real tablet * fix: notification * chore: change implementation * fix: change root * refactor: comments * fix: comments * fix: height * fix: rtl language * refactor: remove extra property * fix: positions modal height based on figma * chore: add loader before rotating the screen * fix: failing test * chore: add timeout before hiding loader * style: move styles * chore: another ref for loader timeout cleanup * fix: hide footer for dtrader * chore: update os detect * fix: failing tests * fix: height issue * fix: android device issue and toolbar widgets * fix: reports height * fix: test failing * fix: position drawer on ios * refactor: remove unused prop * fix: route for contract * fix: failing test and ts * fix: miseed ts errors * fix: hide indicators and drawing tools for tablet view * fix: test case * fix: height reports --------- Co-authored-by: balakrishna-deriv <[email protected]> * style: tablet design acnt limits * feat: enabled poa for tablet view * feat: removed unused code * feat: used not desktop breakpoint * fix: lof=gical property for css * fix: css * feat: updated device hook * style: tablet view, modal fix * style: tablet view changes for various POO status components, common-css * [DTRA] Farhan/FEQ-2205/Header notification icon and account settings links are not working as expected (deriv-com#15275) * fix: hide popover on traders hub header * fix: account switcher width * fix: comments * feat: enabled tablet view for proof of income section * style: tablet view for 2FA * fix: build_issue * chore: email-pswd-section * feat: change mixins and add isTablet for datepicker (deriv-com#15349) * feat: change 2 desktop mixins (deriv-com#15362) * fix: new button fixes * fix: fixed containers * fix: fixed comments1 * fix: fixed bug in desktop view * fix: fixed comments 2 * fix: fixed comments 5 * fix: fixed comments 6 * fix: fixed padding and changed px to rem * fix: removed lines * fix: fixed code * feat: added missing code which already merged * chore: clean code * fix: remove unused css * fix: personal details section * [DTRA] Farhan/Tablet view subtasks (deriv-com#15376) * fix: subtasks 2 * fix: failing tests * fix: fixed scrolling issue for tablet and mobile * chore: remove old is mobile and is desktop and added new * fix: removed unwanted code * fix: fixed footer width * test: fix testcases for useDevice hook * test: update api-token testcase * test: update api-token testcase * fix: fixed width and scroll issue * test: update api-token testcase * chore: added new break points and removed old * fix: update testcases * fix: close-acnt modal * fix: address comments * fix: address comments * [DTRA] Farhan/FEQ-2280/tablet subtasks (deriv-com#15404) * fix: subtasks 2 * fix: failing tests * fix: positions toggle icon * refactor: digit breakpoint * fix: drawer moving when coming back from reports * fix: tablet tooltip * fix: hide download widget for tablet * fix: report open position footer * fix: double sell button * fix: digit container * fix: failing tests * fix: tests --------- Co-authored-by: Farhan Ahmad Nurzi <[email protected]> * chore: removed drag drop for tablet view * fix: use new breakpoints r passkeys components * fix: POI test cases * fix: POI test cases2 * fix: POI test cases3 * fix: clean up and test cases in POI * fix: POI clean up * fix: style for tradingassessment * fix: cleanup 3 * fix: style for tradingassessment * fix: removed height * fix: removed typoerror * fix: removed code2 * chore: remove desktop/mobile wrappers * chore: remove desktop/mobile wrappers * fix: rtl changes * style: update closing acnt * chore: update prop name * chore: update prop name * style: close account margin * fix: added missing code * fix: added missing code2 * chore: resovled conflicts * fix: replaced Desktop() with useDevice hook * fix: replaced Desktop() with useDevice hook2 * fix: replaced Desktop() with useDevice hook3 * fix: replaced Desktop() with useDevice hook4 * fix: replaced Desktop() with useDevice hook5 * fix: replaced Desktop() with useDevice hook5 * style: empty commit to resolve conflicts * FEQ-2313 / Kate / Android tablet- Long code message content is showing in smaller size (deriv-com#15474) * fix: css for link * fix: css * chore: get back line height * refactor: add tablet os check and revert style changes * Fix tablet view issues (deriv-com#15469) * fix: jest test trader * fix: alignment issues * fix: test cases * fix: contract type dialog height (deriv-com#15476) * fix: added isDesktop to missing places2 * chore: fixed modal height issue and semicolon issue * chore: removed extra semicolon * fix: added isDesktop to missing places3 * fix: personal details error * fix: added isDesktop to missing places4 * Ahmad/Fix Strike Icon color on firefox (deriv-com#15481) * chore: strike icon * fix: revert all * fix: tablet issues (deriv-com#15497) * fix: padding top for sections * chore: fixed semocolon and scrollbar issue * fix: fieldset max width * fix: close acnt btn alignment * fix: fixed scroll and padding in POI * fix: close acnt btn alignment * fix: px to rem fix * fix: testcases * chore: remove unused hook * chore: updated with parent branch and resolved conflicts * Revert "Fasih/ Updated with parent branch and resolved conflicts" * fix: poi scroll screen issue * [FEX] Sergei / FEQ - 2310, 2311, 2319, 2320, 2344 / Tablet view issues #3 (deriv-com#15522) * fix: change isDisabledLandscapeBlockerRoute because traders hub route now is the root route * feat: make logged out version of TH accesable for tablet view * feat: add styles for mt5 password modal * feat: fix notifications styles * fix: fixed build issue * fix: added test cases for passkeys * Ahmad/Strike Icon Svg fix on Firefox (deriv-com#15578) * chore: strike icon * fix: revert all * chore: add important * fix: poi fixes1 * fix: fixed testcases * fix: fixed testcases2 * fix: poi fixes2 * Ahmad/ Fiix Strike Icon in firefox and update Deriv UI Package (deriv-com#15609) * chore: strike icon * fix: revert all * chore: add important * fix: update packages and remove temp fix * fix: address comments * fix: selfexclusion testcase * fix: trading-assessment-user-observer-remove * fix: api and connected apps * fix: css fixes * fix: icon1 * chore: resolved comments and added fragment * fix: self exclusion and css * fix: endpoint page * fix: creation banner and adding mt5 account (deriv-com#15659) * Revert "fix: creation banner and adding mt5 account (deriv-com#15659)" (deriv-com#15661) This reverts commit ef2dddb. * fix: api token layout * [FEQ] Sergei / FEQ - 2374, 2375, 2376 / Tablet view issues 4 (2) (deriv-com#15666) * fix: creation banner and adding mt5 account * feat: add deriv-com/ui to account package json * fix: add react/jsx-runtime to webpack resolvers because i have added deriv-com/ui to package json * chore: fixed width of tray on mobile * chore: addressed comments * chore: removed duplicated import * fix: border radius api card * fix: btn aligmnent desktop * fix: pull invalid date fix * chore: back btn margin fix * [FEQ] Sergei / FEQ - 2376 / "Get real account" button for DIEL (deriv-com#15690) * feat: tablet view suggestion * feat: implement new design for tablet * fix: fix passkeys and coverall issue * fix: build fail * fix: build fail * fix: fix import --------- Co-authored-by: Farhan Ahmad Nurzi <[email protected]> Co-authored-by: balakrishna-binary <[email protected]> Co-authored-by: Muhammad Fasih Ali Naqvi <[email protected]> Co-authored-by: utkarsha-deriv <[email protected]> Co-authored-by: kate-deriv <[email protected]> Co-authored-by: balakrishna-deriv <[email protected]> Co-authored-by: utkarsha-deriv <[email protected]> Co-authored-by: DerivFE <[email protected]> Co-authored-by: balakrishna-deriv <[email protected]> Co-authored-by: Sergei Baranovski <[email protected]> Co-authored-by: fasihali-deriv <[email protected]> Co-authored-by: Dhruv Neb <[email protected]> Co-authored-by: Farhan Ahmad Nurzi <[email protected]> Co-authored-by: Muhammad Fasih Ali Naqvi <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard-No-NextDNS.local> Co-authored-by: Akmal Djumakhodjaev <[email protected]> Co-authored-by: ahmadtaimoor-deriv <[email protected]> Co-authored-by: Likhith Kolayari <[email protected]> Co-authored-by: Habib Deriv <[email protected]>
heorhi-deriv · Jul 1, 2024 · 04bc8c9 · 04bc8c9
1 parent b6db2c8
commit 04bc8c9
Show file tree

Hide file tree

Showing 128 changed files with 1,629 additions and 1,359 deletions.
diff --git a/packages/account/src/Components/account-limits/__tests__/account-limits-extra-info.spec.tsx b/packages/account/src/Components/account-limits/__tests__/account-limits-extra-info.spec.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
-import { isMobile } from '@deriv/shared';
 import AccountLimitsExtraInfo from '../account-limits-extra-info';
+import { useDevice } from '@deriv-com/ui';
 
-jest.mock('@deriv/shared', () => ({
-    ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(() => true),
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: false })),
 }));
 
 describe('<AccountLimitsExtraInfo/>', () => {
@@ -14,14 +14,14 @@ describe('<AccountLimitsExtraInfo/>', () => {
         expect(screen.getByText(/lorem ipsum/i)).toBeInTheDocument();
     });
 
-    it('should render PopoverComponent if isMobile is false', () => {
-        (isMobile as jest.Mock).mockReturnValue(false);
+    it('should render PopoverComponent if its not a desktop screen', () => {
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });
         render(<AccountLimitsExtraInfo message='Lorem ipsum' />);
         expect(screen.queryByTestId('dt_acc_limits_popover')).toHaveClass('da-account-limits__popover');
     });
 
-    it('should pass props to PopoverComponent if isMobile is false', async () => {
-        (isMobile as jest.Mock).mockReturnValue(false);
+    it('should pass props to PopoverComponent if its not a desktop screen', async () => {
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });
         render(<AccountLimitsExtraInfo message='Lorem ipsum' className='test_class' />);
         const popover = await screen.findByTestId('dt_acc_limits_popover');
         expect(popover).toHaveClass('test_class');

diff --git a/packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx b/packages/account/src/Components/account-limits/__tests__/account-limits.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
-import { formatMoney, isDesktop, isMobile } from '@deriv/shared';
+import { formatMoney } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 import AccountLimits from '../account-limits';
 import { BrowserRouter } from 'react-router-dom';
 import { StoreProvider, mockStore } from '@deriv/stores';
@@ -19,10 +20,13 @@ jest.mock('@deriv/shared/src/services/ws-methods', () => ({
     useWS: () => undefined,
 }));
 
+jest.mock('@deriv-com/ui', () => ({
+    ...jest.requireActual('@deriv-com/ui'),
+    useDevice: jest.fn(() => ({ isDesktop: true })),
+}));
+
 jest.mock('@deriv/shared', () => ({
     ...jest.requireActual('@deriv/shared'),
-    isMobile: jest.fn(() => false),
-    isDesktop: jest.fn(() => true),
     formatMoney: jest.fn(),
 }));
 
@@ -211,9 +215,8 @@ describe('<AccountLimits/>', () => {
         expect(screen.queryByTestId('account_limits_data')).toBeInTheDocument();
     });
 
-    it('should render AccountLimitsArticle component if should_show_article is true in mobile mode', () => {
-        (isMobile as jest.Mock).mockReturnValue(true);
-        (isDesktop as jest.Mock).mockReturnValue(false);
+    it('should render AccountLimitsArticle component if should_show_article is true in responsive mode', () => {
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: false });
         render(
             <StoreProvider store={store}>
                 <AccountLimits {...props} should_show_article />
@@ -225,8 +228,7 @@ describe('<AccountLimits/>', () => {
 
     it('should not render AccountLimitsArticle component if should_show_article is false', () => {
         store = mockStore(mock);
-        (isMobile as jest.Mock).mockReturnValue(true);
-        (isDesktop as jest.Mock).mockReturnValue(false);
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: false });
         render(
             <StoreProvider store={store}>
                 <AccountLimits {...props} should_show_article={false} />
@@ -372,15 +374,14 @@ describe('<AccountLimits/>', () => {
         expect(screen.getByText(/total withdrawal allowed/i)).toBeInTheDocument();
     });
 
-    it('should show limit_notice message when is_fully_authenticated is false in mobile mode', () => {
+    it('should show limit_notice message when is_fully_authenticated is false in responsive mode', () => {
         store = mockStore({
             client: {
                 ...mock.client,
                 is_fully_authenticated: false,
             },
         });
-        (isMobile as jest.Mock).mockReturnValue(true);
-        (isDesktop as jest.Mock).mockReturnValue(false);
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: false });
         render(
             <BrowserRouter>
                 <StoreProvider store={store}>
@@ -398,8 +399,7 @@ describe('<AccountLimits/>', () => {
                 is_fully_authenticated: false,
             },
         });
-        (isMobile as jest.Mock).mockReturnValue(false);
-        (isDesktop as jest.Mock).mockReturnValue(true);
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });
         render(
             <BrowserRouter>
                 <StoreProvider store={store}>
@@ -414,8 +414,7 @@ describe('<AccountLimits/>', () => {
 
     it('should show AccountLimitsArticle when should_show_article and isDesktop is true', () => {
         store = mockStore(mock);
-        (isMobile as jest.Mock).mockReturnValue(false);
-        (isDesktop as jest.Mock).mockReturnValue(true);
+        (useDevice as jest.Mock).mockReturnValueOnce({ isDesktop: true });
         render(
             <StoreProvider store={store}>
                 <AccountLimits {...props} should_show_article />

diff --git a/packages/account/src/Components/account-limits/account-limits-extra-info.tsx b/packages/account/src/Components/account-limits/account-limits-extra-info.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { Popover, Text } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 
 type TAccountLimitsExtraInfo = {
     message: string;
     className?: string;
 };
 
 const AccountLimitsExtraInfo = ({ message, ...props }: TAccountLimitsExtraInfo) => {
-    if (isMobile()) {
+    const { isDesktop } = useDevice();
+    if (!isDesktop) {
         return (
             <Text color='less-prominent' line_height='s' size='xxxs'>
                 {message}

diff --git a/packages/account/src/Components/account-limits/account-limits.scss b/packages/account/src/Components/account-limits/account-limits.scss
@@ -2,14 +2,14 @@
     $this: &;
     display: flex;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         flex-direction: column;
     }
 
     &__table {
         width: calc(100% - 2.4rem);
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
         }
 
@@ -28,7 +28,7 @@
             padding: 0.8rem 0;
             display: inline-flex;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 flex-direction: column;
             }
 
@@ -59,13 +59,13 @@
 
         &-wrapper {
             flex: 1;
+            margin-inline-end: 1rem;
 
-            @include desktop {
-                margin-right: 1rem;
-            }
-
-            @include mobile {
-                margin: 0 2rem 2rem;
+            @include mobile-or-tablet-screen {
+                margin-block-start: 0;
+                margin-inline-start: 1.6rem;
+                margin-block-end: 1.6rem;
+                margin-inline-end: 1.6rem;
             }
         }
     }
@@ -77,18 +77,4 @@
     &__popover {
         margin-inline-start: 0.8rem;
     }
-
-    &--app-settings {
-        @include tablet-up {
-            padding: 2.4rem;
-        }
-
-        @include mobile {
-            padding: 1.6rem 0 0;
-        }
-
-        #{$this}__table {
-            width: 100%;
-        }
-    }
 }
diff --git a/packages/account/src/Components/account-limits/account-limits.tsx b/packages/account/src/Components/account-limits/account-limits.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { FormikValues } from 'formik';
 import clsx from 'clsx';
-import { formatMoney, isDesktop, isMobile, useIsMounted } from '@deriv/shared';
+import { formatMoney, useIsMounted } from '@deriv/shared';
 import { Loading, ThemedScrollbars } from '@deriv/components';
+import { useDevice } from '@deriv-com/ui';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import DemoMessage from '../demo-message';
@@ -41,6 +42,7 @@ const AccountLimits = observer(
         const isMounted = useIsMounted();
         const [is_loading, setLoading] = React.useState(true);
         const [is_overlay_shown, setIsOverlayShown] = React.useState(false);
+        const { isDesktop } = useDevice();
 
         const handleGetLimitsResponse = () => {
             if (isMounted()) setLoading(false);
@@ -117,9 +119,9 @@ const AccountLimits = observer(
                             'da-account-limits--app-settings': is_app_settings,
                         })}
                     >
-                        {should_show_article && isMobile() && <AccountLimitsArticle />}
+                        {should_show_article && !isDesktop && <AccountLimitsArticle />}
                         <div className='da-account-limits__table-wrapper'>
-                            <ThemedScrollbars is_bypassed={!!should_bypass_scrollbars || isMobile()}>
+                            <ThemedScrollbars is_bypassed={!!should_bypass_scrollbars || !isDesktop}>
                                 <table className='da-account-limits__table' data-testid='trading_limit_item_table'>
                                     <thead>
                                         <tr>
@@ -238,7 +240,7 @@ const AccountLimits = observer(
                                 )}
                             </ThemedScrollbars>
                         </div>
-                        {should_show_article && isDesktop() && <AccountLimitsArticle />}
+                        {should_show_article && isDesktop && <AccountLimitsArticle />}
                         {footer_ref && <AccountLimitsFooter />}
                         {is_overlay_shown && overlay_ref && <AccountLimitsOverlay />}
                     </div>

diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-form.tsx
@@ -1,5 +1,4 @@
 import { Button, Loading, Modal, Text } from '@deriv/components';
-import { isMobile } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 import clsx from 'clsx';
@@ -12,18 +11,21 @@ import { FormInputField } from '../forms/form-fields';
 import FormSelectField from '../forms/form-select-field';
 import { getFormConfig } from './form-config';
 import { TListItem } from 'Types';
+import { useDevice } from '@deriv-com/ui';
 
-const FormTitle = () => (
-    <Text
-        as='p'
-        size='s'
-        line_height='xxl'
-        align={isMobile() ? 'left' : 'center'}
-        className='additional-kyc-info-modal__form--header'
-    >
-        <Localize i18n_default_text='Please take a moment to update your information now.' />
-    </Text>
-);
+const FormTitle = () => {
+    const { isDesktop } = useDevice();
+    return (
+        <Text
+            as='p'
+            line_height='xxl'
+            align={isDesktop ? 'center' : 'left'}
+            className='additional-kyc-info-modal__form--header'
+        >
+            <Localize i18n_default_text='Please take a moment to update your information now.' />
+        </Text>
+    );
+};
 
 type TAdditionalKycInfoFormProps = {
     setError?: React.Dispatch<React.SetStateAction<unknown>>;

diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.scss b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.scss
@@ -29,14 +29,14 @@
         height: 100%;
         position: relative;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             width: 100%;
         }
 
         &--header {
             margin: 1.6rem 0 2.4rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 padding: 0;
             }
         }
@@ -55,7 +55,7 @@
                 flex-direction: column;
                 padding: 0 24.4rem;
 
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     padding: 0 1.6rem;
                 }
             }
@@ -74,15 +74,15 @@
         &-action {
             padding: 1.6rem 2.4rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 position: absolute;
                 bottom: 0;
                 width: 100%;
                 padding: 1.6rem;
             }
 
             .dc-btn {
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     width: 100%;
                 }
             }

diff --git a/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.tsx b/packages/account/src/Components/additional-kyc-info-modal/additional-kyc-info-modal.tsx
@@ -1,16 +1,8 @@
-import {
-    DesktopWrapper,
-    Div100vhContainer,
-    InlineMessage,
-    MobileWrapper,
-    Modal,
-    PageOverlay,
-    Text,
-    UILoader,
-} from '@deriv/components';
+import { Div100vhContainer, InlineMessage, Modal, PageOverlay, Text, UILoader } from '@deriv/components';
 import { getPlatformSettings } from '@deriv/shared';
 import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { useDevice } from '@deriv-com/ui';
 import React from 'react';
 import AdditionalKycInfoForm from './additional-kyc-info-form';
 
@@ -44,6 +36,7 @@ export const AdditionalKycInfoModal = observer(() => {
     const {
         ui: { is_additional_kyc_info_modal_open: is_open, toggleAdditionalKycInfoModal },
     } = useStore();
+    const { isDesktop } = useDevice();
     const [error, setError] = React.useState<unknown>('');
 
     const toggleModal = (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => {
@@ -67,7 +60,7 @@ export const AdditionalKycInfoModal = observer(() => {
     return (
         <React.Suspense fallback={<UILoader />}>
             <div className='additional-kyc-info-modal__container'>
-                <DesktopWrapper>
+                {isDesktop ? (
                     <Modal
                         has_close_icon
                         is_open={is_open}
@@ -81,8 +74,7 @@ export const AdditionalKycInfoModal = observer(() => {
                             <AdditionalKycInfoFormWithHintBox setError={setError} error={error} />
                         </Modal.Body>
                     </Modal>
-                </DesktopWrapper>
-                <MobileWrapper>
+                ) : (
                     <PageOverlay
                         is_open
                         portal_id='deriv_app'
@@ -98,7 +90,7 @@ export const AdditionalKycInfoModal = observer(() => {
                             <AdditionalKycInfoFormWithHintBox />
                         </Div100vhContainer>
                     </PageOverlay>
-                </MobileWrapper>
+                )}
             </div>
         </React.Suspense>
     );