[FEX] Sergei / FEQ - 2310, 2311, 2319, 2320, 2344 / Tablet view issues #3

packages/appstore/src/components/app.scss

@@ -1,17 +1,17 @@
 .dashboard {
-    @include desktop {
+    @include desktop-screen {
         height: calc(100vh - #{$HEADER_HEIGHT} - #{$FOOTER_HEIGHT});
     }
-    @include mobile {
+    @include mobile-or-tablet-screen {
         height: calc(100vh - #{$MOBILE_HEADER_HEIGHT});
     }
 }
 
 .dashboard-onboarding {
-    @include desktop {
+    @include desktop-screen {
         height: inherit;
     }
-    @include mobile {
+    @include mobile-or-tablet-screen {
         height: calc(100vh - #{$MOBILE_HEADER_HEIGHT});
     }
 }

packages/appstore/src/components/cfds-listing/cfds-listing.scss

@@ -1932,6 +1932,13 @@
     }
 }
 
+.dc-mobile-dialog__content.dc-mobile-dialog__content--is-full-height:has(.dc-mobile-dialog__cfd-password-modal) {
+    @include mobile-or-tablet-screen {
+        display: flex;
+        justify-content: center;
+    }
+}
+
 .dc-modal__container_cfd-password-modal,
 .dc-mobile-dialog__cfd-password-modal {
     display: flex;

packages/appstore/src/components/elements/cfds-title/cfds-title.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
-import { localize } from '@deriv/translations';
+import { Localize } from '@deriv/translations';
 import './cfds-title.scss';
 
-const CFDsTitle = observer(() => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
+const CFDsTitle = () => {
+    const { isDesktop } = useDevice();
 
-    if (is_mobile) return null;
+    if (!isDesktop) return null;
     return (
         <div className='cfds-title'>
             <Text size='sm' weight='bold' color='prominent'>
-                {localize('CFDs')}
+                <Localize i18n_default_text='CFDs' />
             </Text>
         </div>
     );
-});
+};
 
 export default CFDsTitle;

packages/appstore/src/components/elements/options-title/options-title.tsx

@@ -1,17 +1,16 @@
 import React from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { Text } from '@deriv/components';
-import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 
 type TOptionsTitle = {
     is_eu_user: boolean;
 };
 
-const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => {
-    const { ui } = useStore();
-    const { is_mobile } = ui;
+const OptionsTitle = ({ is_eu_user }: TOptionsTitle) => {
+    const { isDesktop } = useDevice();
 
-    if (is_mobile) return null;
+    if (!isDesktop) return null;
     return is_eu_user ? (
         <Text size='sm' weight='bold' color='prominent'>
             <Localize i18n_default_text='Multipliers' />
@@ -21,6 +20,6 @@ const OptionsTitle = observer(({ is_eu_user }: TOptionsTitle) => {
             <Localize i18n_default_text='Options' />
         </Text>
     );
-});
+};
 
 export default OptionsTitle;

packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.scss

@@ -13,7 +13,7 @@
         background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-desktop.svg');
         background-repeat: no-repeat;
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             height: 14.4rem;
             background-image: url('./../../public/images/traders-hub-logged-out-banner-bg-responsive.svg');
             background-repeat: no-repeat;
@@ -32,7 +32,7 @@
             font-weight: 500;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin-inline-start: 1.6rem;
         }
     }
@@ -46,7 +46,7 @@
             font-size: 1.6rem;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             min-width: 6.4rem;
             padding: 0.5rem 1.2rem;
         }
@@ -62,7 +62,7 @@
             transform: scaleX(-1);
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin-inline-end: 0;
             align-self: flex-end;
         }

packages/appstore/src/components/get-started-trading-banner/get-started-trading-banner.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { getLanguage, Localize, localize } from '@deriv/translations';
 import { Button, Text, Icon } from '@deriv/components';
 import { useStore, observer } from '@deriv/stores';
@@ -7,8 +8,8 @@ import TrustpilotWidget from 'Components/trustpilot-widget';
 import './get-started-trading-banner.scss';
 
 const GetStartedTradingBanner = observer(() => {
-    const { ui, traders_hub } = useStore();
-    const { is_mobile } = ui;
+    const { isDesktop } = useDevice();
+    const { traders_hub } = useStore();
     const { is_eu_user } = traders_hub;
 
     const desktopWidth = is_eu_user ? 326 : 445;
@@ -20,7 +21,7 @@ const GetStartedTradingBanner = observer(() => {
         <div className='get-started-trading-banner'>
             <div className='get-started-trading-banner__content'>
                 <div className='get-started-trading-banner__description'>
-                    <Text size={is_mobile ? 'xs' : 'xm'} color='prominent'>
+                    <Text size={!isDesktop ? 'xs' : 'xm'} color='prominent'>
                         <Localize i18n_default_text='Join over 2.5 million traders' />
                     </Text>
                     <Button
@@ -33,13 +34,13 @@ const GetStartedTradingBanner = observer(() => {
                 </div>
                 <Icon
                     icon={`IcAppstoreLoggedOut${is_eu_user ? 'Eu' : 'NonEu'}Coins${
-                        is_mobile ? 'Responsive' : 'Desktop'
+                        !isDesktop ? 'Responsive' : 'Desktop'
                     }`}
-                    width={is_mobile ? responsiveWidth : desktopWidth}
-                    height={is_mobile ? responsiveHeight : desktopHeight}
+                    width={!isDesktop ? responsiveWidth : desktopWidth}
+                    height={!isDesktop ? responsiveHeight : desktopHeight}
                     className='get-started-trading-banner__image'
                     data_testid={`dt_logged_out_${is_eu_user ? 'eu' : 'non_eu'}_coins_${
-                        is_mobile ? 'responsive' : 'desktop'
+                        !isDesktop ? 'responsive' : 'desktop'
                     }`}
                 />
             </div>

packages/appstore/src/components/loader/options-and-multipliers-skeleton/optionsAndMultipliers.scss

@@ -5,7 +5,7 @@
     justify-content: space-between;
     gap: 4.8rem;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         display: none;
     }
     &__left {

packages/appstore/src/components/trustpilot-widget/trustpilot-widget.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
+import { useDevice } from '@deriv-com/ui';
 import { Icon, Text } from '@deriv/components';
-import { useStore, observer } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 import { TTrustpilotWidgetData } from 'Types';
 import { fetchTrustpilotData } from 'Helpers';
 import TrustpilotStarRating from 'Components/trustpilot-star-rating';
 import './trustpilot-widget.scss';
 
-const TrustpilotWidget = observer(() => {
+const TrustpilotWidget = () => {
+    const { isDesktop } = useDevice();
     const [trustpilotData, setTrustpilotData] = useState<TTrustpilotWidgetData>();
-    const { ui } = useStore();
-    const { is_mobile } = ui;
 
     useEffect(() => {
         const getTrustpilotData = async () => {
@@ -27,7 +26,7 @@ const TrustpilotWidget = observer(() => {
         <div className='trustpilot-widget'>
             <a href='https://www.trustpilot.com/review/deriv.com' target='_blank' rel='noopener noreferrer'>
                 <div className='trustpilot-widget__content'>
-                    {!is_mobile && (
+                    {isDesktop && (
                         <React.Fragment>
                             <Text size='s' color='prominent'>
                                 <Localize i18n_default_text='Our customers say' />
@@ -38,7 +37,7 @@ const TrustpilotWidget = observer(() => {
                         </React.Fragment>
                     )}
                     <TrustpilotStarRating score={trustpilotData.trustScore} />
-                    {!is_mobile && (
+                    {isDesktop && (
                         <Text size='s' color='prominent'>
                             <Localize
                                 i18n_default_text='{{trustScore}} out of 5 based on {{numberOfReviews}} reviews'
@@ -54,6 +53,6 @@ const TrustpilotWidget = observer(() => {
             </a>
         </div>
     );
-});
+};
 
 export default TrustpilotWidget;

packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.scss

@@ -6,13 +6,14 @@
     margin: auto;
     padding: 4rem;
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
+        max-width: 60rem;
         padding: 2rem;
         width: 100%;
     }
 
     &__eu-user {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             min-height: 650px;
         }
     }

packages/appstore/src/modules/traders-hub-logged-out/traders-hub-logged-out.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useDevice } from '@deriv-com/ui';
 import { observer, useStore } from '@deriv/stores';
-import { Div100vhContainer, DesktopWrapper, MobileWrapper, Loading, Text } from '@deriv/components';
+import { Div100vhContainer, Loading, Text } from '@deriv/components';
 import { isEuCountry } from '@deriv/shared';
 import { Localize } from '@deriv/translations';
 import OrderedPlatformSections from 'Components/ordered-platform-sections';
@@ -10,8 +11,8 @@ import TabsOrTitle from 'Components/tabs-or-title';
 import './traders-hub-logged-out.scss';
 
 const TradersHubLoggedOut = observer(() => {
-    const { traders_hub, client, ui } = useStore();
-    const { is_desktop } = ui;
+    const { isDesktop } = useDevice();
+    const { traders_hub, client } = useStore();
     const { clients_country } = client;
     const { setTogglePlatformType, selectRegion, is_eu_user } = traders_hub;
 
@@ -29,23 +30,24 @@ const TradersHubLoggedOut = observer(() => {
     if (!clients_country) return <Loading is_fullscreen />;
 
     return (
-        <Div100vhContainer className='traders-hub-logged-out__mobile' height_offset='50px' is_disabled={is_desktop}>
+        <Div100vhContainer className='traders-hub-logged-out__mobile' height_offset='50px' is_disabled={isDesktop}>
             <div
                 className={classNames('traders-hub-logged-out', {
                     'traders-hub-logged-out__eu-user': is_eu_user,
                 })}
             >
                 <GetStartedTradingBanner />
-                <Text size={is_desktop ? 'm' : 'xsm'} weight='bold' color='prominent'>
+                <Text size={isDesktop ? 'm' : 'xsm'} weight='bold' color='prominent'>
                     <Localize i18n_default_text="Trader's Hub" />
                 </Text>
-                <DesktopWrapper>
+                {isDesktop ? (
                     <OrderedPlatformSections isDesktop />
-                </DesktopWrapper>
-                <MobileWrapper>
-                    <TabsOrTitle />
-                    <OrderedPlatformSections />
-                </MobileWrapper>
+                ) : (
+                    <React.Fragment>
+                        <TabsOrTitle />
+                        <OrderedPlatformSections />
+                    </React.Fragment>
+                )}
             </div>
         </Div100vhContainer>
     );

packages/appstore/src/modules/traders-hub/traders-hub.scss

@@ -23,12 +23,12 @@
     }
 
     &--eu-user {
-        @include mobile {
+        @include mobile-or-tablet-screen {
             min-height: 650px;
         }
 
         &-without-mt5 {
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 min-height: 540px;
             }
         }