From e57308034b1927fc01fa890d0428a06eabced44f Mon Sep 17 00:00:00 2001
From: utkarsha-deriv <utkarsha@regentmarkets.com>
Date: Tue, 21 May 2024 16:38:54 +0400
Subject: [PATCH] style: tablet view, modal fix

---
 .../ConnectedApps/connected-apps-empty.tsx         |  8 ++++----
 .../ConnectedApps/connected-apps-info-bullets.tsx  |  8 ++++----
 .../Security/ConnectedApps/connected-apps-info.tsx |  8 ++++----
 .../Security/ConnectedApps/connected-apps.scss     | 14 +++++++-------
 .../Security/ConnectedApps/connected-apps.tsx      |  9 ++++-----
 .../components/src/components/modal/modal.scss     |  2 +-
 6 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-empty.tsx b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-empty.tsx
index 3b2c98efc12e..00880f86b815 100644
--- a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-empty.tsx
+++ b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-empty.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
+import { useDevice } from '@deriv-com/ui';
 import ConnectedAppsInfoBullets from './connected-apps-info-bullets';
 
 const ConnectedAppsEmpty = observer(() => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
 
-    const text_size = is_mobile ? 'xxs' : 'xs';
+    const text_size = isDesktop ? 'xs' : 'xxs';
 
     return (
         <div className='connected-apps__empty--wrapper'>
diff --git a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info-bullets.tsx b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info-bullets.tsx
index 9236d9d63d9b..694126de5e66 100644
--- a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info-bullets.tsx
+++ b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info-bullets.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
+import { useDevice } from '@deriv-com/ui';
 import { CONNECTED_APPS_INFO_BULLETS } from 'Constants/connected-apps-config';
 
 type TConnectedAppsInfoBulletsProps = {
@@ -10,10 +11,9 @@ type TConnectedAppsInfoBulletsProps = {
 };
 
 const ConnectedAppsInfoBullets = observer(({ class_name, text_color }: TConnectedAppsInfoBulletsProps) => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
 
-    const text_size = is_mobile ? 'xxxs' : 'xxs';
+    const text_size = isDesktop ? 'xxs' : 'xxxs';
 
     return (
         <Text
diff --git a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info.tsx b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info.tsx
index 498bcc9efccf..21595cac83d8 100644
--- a/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info.tsx
+++ b/packages/account/src/Sections/Security/ConnectedApps/connected-apps-info.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { InlineMessage, Text } from '@deriv/components';
 import { Localize } from '@deriv/translations';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
+import { useDevice } from '@deriv-com/ui';
 import ConnectedAppsInfoBullets from './connected-apps-info-bullets';
 
 const ConnectedAppsInfo = observer(() => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
 
-    const text_size = is_mobile ? 'xxxs' : 'xxs';
+    const text_size = isDesktop ? 'xxs' : 'xxxs';
 
     return (
         <InlineMessage
diff --git a/packages/account/src/Sections/Security/ConnectedApps/connected-apps.scss b/packages/account/src/Sections/Security/ConnectedApps/connected-apps.scss
index 306367afee71..2eca0f7e6ff3 100644
--- a/packages/account/src/Sections/Security/ConnectedApps/connected-apps.scss
+++ b/packages/account/src/Sections/Security/ConnectedApps/connected-apps.scss
@@ -4,7 +4,7 @@
         gap: 1.6rem;
         grid-template-rows: min-content;
         grid-template-columns: 1fr min-content;
-        @include mobile {
+        @include mobile-or-tablet-screen {
             grid-template-columns: 1fr;
             padding: 1.6rem;
         }
@@ -15,7 +15,7 @@
             display: flex;
             flex-direction: column;
             gap: 2.4rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 gap: 1.6rem;
             }
         }
@@ -88,13 +88,13 @@
             align-items: center;
             gap: 1.6rem;
             margin-left: 0.8rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 margin-left: 0;
             }
 
             .da-article {
                 margin: 0;
-                @include mobile {
+                @include mobile-or-tablet-screen {
                     width: 100%;
                 }
             }
@@ -107,7 +107,7 @@
             flex-direction: column;
             gap: 0.8rem;
             margin-top: 9.6rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 gap: 1.6rem;
                 margin-top: 0;
             }
@@ -124,7 +124,7 @@
         &--with-apps {
             gap: 1.4rem;
             padding: 1.4rem 0 0 1.4rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 padding: 1rem 0 0 1rem;
             }
         }
@@ -132,7 +132,7 @@
         &--without-apps {
             padding: 0 1.6rem;
             gap: 0.8rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 gap: 0.4rem;
             }
         }
diff --git a/packages/account/src/Sections/Security/ConnectedApps/connected-apps.tsx b/packages/account/src/Sections/Security/ConnectedApps/connected-apps.tsx
index 32215701c4bc..5a2a2b9d5938 100644
--- a/packages/account/src/Sections/Security/ConnectedApps/connected-apps.tsx
+++ b/packages/account/src/Sections/Security/ConnectedApps/connected-apps.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { OauthApps } from '@deriv/api-types';
 import { Loading } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
+import { observer } from '@deriv/stores';
 import { WS } from '@deriv/shared';
+import { useDevice } from '@deriv-com/ui';
 import ErrorComponent from 'Components/error-component';
 import ConnectedAppsKnowMore from './connected-apps-know-more';
 import ConnectedAppsInfo from './connected-apps-info';
@@ -14,9 +15,7 @@ import ConnectedAppsRevokeModal from './connected-apps-revoke-modal';
 import './connected-apps.scss';
 
 const ConnectedApps = observer(() => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
-
+    const { isDesktop } = useDevice();
     const [is_loading, setLoading] = React.useState(true);
     const [is_modal_open, setIsModalOpen] = React.useState(false);
     const [selected_app_id, setSelectedAppId] = React.useState<number | null>(null);
@@ -68,7 +67,7 @@ const ConnectedApps = observer(() => {
                 {connected_apps.length ? (
                     <div className='connected-apps__content--wrapper'>
                         <ConnectedAppsInfo />
-                        {is_mobile ? (
+                        {!isDesktop ? (
                             <DataListTemplate connected_apps={connected_apps} handleToggleModal={handleToggleModal} />
                         ) : (
                             <DataTableTemplate connected_apps={connected_apps} handleToggleModal={handleToggleModal} />
diff --git a/packages/components/src/components/modal/modal.scss b/packages/components/src/components/modal/modal.scss
index f72e38956090..4fd65c2cacc8 100644
--- a/packages/components/src/components/modal/modal.scss
+++ b/packages/components/src/components/modal/modal.scss
@@ -83,7 +83,7 @@
                 }
             }
         }
-        @include desktop-screen {
+        @include tablet-or-desktop-screen {
             min-width: 440px !important;
             max-height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT}) !important;
         }