Skip to content

Commit

Permalink
Accounts team/Enable tablet view for accounts (binary-com#15263)
Browse files Browse the repository at this point in the history
* Farhan/Lock Dtrader Tablet View on Landscape Mode (binary-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 (binary-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 (binary-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 (binary-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 <56330681+balakrishna-deriv@users.noreply.github.com>

* chore: update @deriv/deriv-charts to 2.1.16 (binary-com#15212)

Co-authored-by: balakrishna-deriv <balakrishna-deriv@users.noreply.github.com>

* style: initial style changes

* feat: tablet view changes for languages

* feat: removed unwanted new line

* [DTRA] Farhan/Fix test failing (binary-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 <56330681+balakrishna-deriv@users.noreply.github.com>

* feat: get changes back and just delete mixin for tablet (binary-com#15182)

* [FEQ] Sergei / FEQ-2200, FEQ-2201 / Add a real MT5 account, Identity verification, Choose a jurisdiction popup for tablet (binary-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 (binary-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 <56330681+balakrishna-deriv@users.noreply.github.com>

* 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 (binary-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 (binary-com#15349)

* feat: change 2 desktop mixins (binary-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 (binary-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 (binary-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 <farhan.nurzi@regentmarkets.com>

* 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 (binary-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 (binary-com#15469)

* fix: jest test trader

* fix: alignment issues

* fix: test cases

* fix: contract type dialog height (binary-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 (binary-com#15481)

* chore: strike icon

* fix: revert all

* fix: tablet issues (binary-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 (binary-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 (binary-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 (binary-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 (binary-com#15659)

* Revert "fix: creation banner and adding mt5 account (binary-com#15659)" (binary-com#15661)

This reverts commit ef2dddb.

* fix: api token layout

* [FEQ] Sergei / FEQ - 2374, 2375, 2376 / Tablet view issues 4 (2) (binary-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 (binary-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 <125247833+farhan-nurzi-deriv@users.noreply.github.com>
Co-authored-by: balakrishna-binary <bala.krishna@regentmarkets.com>
Co-authored-by: Muhammad Fasih Ali Naqvi <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard.local>
Co-authored-by: utkarsha-deriv <utkarsha@regentmarkets.com>
Co-authored-by: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Co-authored-by: balakrishna-deriv <56330681+balakrishna-deriv@users.noreply.github.com>
Co-authored-by: utkarsha-deriv <125863995+utkarsha-deriv@users.noreply.github.com>
Co-authored-by: DerivFE <80095553+DerivFE@users.noreply.github.com>
Co-authored-by: balakrishna-deriv <balakrishna-deriv@users.noreply.github.com>
Co-authored-by: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com>
Co-authored-by: fasihali-deriv <121229483+fasihali-deriv@users.noreply.github.com>
Co-authored-by: Dhruv Neb <dhruv@regentmarkets.com>
Co-authored-by: Farhan Ahmad Nurzi <farhan.nurzi@regentmarkets.com>
Co-authored-by: Muhammad Fasih Ali Naqvi <muhammadfasih@Muhammad-Fasihs-Mac-X7KDC4NKQ0-Standard-No-NextDNS.local>
Co-authored-by: Akmal Djumakhodjaev <akmal@binary.com>
Co-authored-by: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Co-authored-by: Likhith Kolayari <98398322+likhith-deriv@users.noreply.github.com>
Co-authored-by: Habib Deriv <88178645+habib-deriv@users.noreply.github.com>
  • Loading branch information
19 people committed Jul 1, 2024
1 parent b6db2c8 commit 04bc8c9
Show file tree
Hide file tree
Showing 128 changed files with 1,629 additions and 1,359 deletions.
Original file line number Diff line number Diff line change
@@ -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/>', () => {
Expand All @@ -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');
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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(),
}));

Expand Down Expand Up @@ -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 />
Expand All @@ -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} />
Expand Down Expand Up @@ -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}>
Expand All @@ -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}>
Expand All @@ -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 />
Expand Down
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
32 changes: 9 additions & 23 deletions packages/account/src/Components/account-limits/account-limits.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}

Expand All @@ -28,7 +28,7 @@
padding: 0.8rem 0;
display: inline-flex;

@include mobile {
@include mobile-or-tablet-screen {
flex-direction: column;
}

Expand Down Expand Up @@ -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;
}
}
}
Expand All @@ -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%;
}
}
}
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>>;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand All @@ -55,7 +55,7 @@
flex-direction: column;
padding: 0 24.4rem;

@include mobile {
@include mobile-or-tablet-screen {
padding: 0 1.6rem;
}
}
Expand All @@ -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%;
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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>) => {
Expand All @@ -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}
Expand All @@ -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'
Expand All @@ -98,7 +90,7 @@ export const AdditionalKycInfoModal = observer(() => {
<AdditionalKycInfoFormWithHintBox />
</Div100vhContainer>
</PageOverlay>
</MobileWrapper>
)}
</div>
</React.Suspense>
);
Expand Down
Loading

0 comments on commit 04bc8c9

Please sign in to comment.