Merge pull request #10 from utkarsha-deriv/utkarsha/tablet-view-conne…

…cted-apps [UPM-650] Tablet view for connected apps section
amina-deriv · May 22, 2024 · c370590 · c370590
2 parents 0d19d15 + e573080
commit c370590
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +124,15 @@
         &--with-apps {
             gap: 1.4rem;
             padding: 1.4rem 0 0 1.4rem;
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 padding: 1rem 0 0 1rem;
             }
         }
 
         &--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
@@ -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
@@ -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;
         }