diff --git a/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx b/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx index 9896b9e17d46..4b1946c5399b 100644 --- a/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx @@ -2,9 +2,15 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import { mockStore, StoreProvider } from '@deriv/stores'; +import { useDevice } from '@deriv-com/ui'; import WalletsBannerUpgrade from '../wallets-banner-upgrade'; import WalletsBannerUpgrading from '../wallets-banner-upgrading'; +jest.mock('@deriv-com/ui', () => ({ + ...jest.requireActual('@deriv-com/ui'), + useDevice: jest.fn(() => ({ isDesktop: true })), +})); + describe('', () => { const mockRootStore = mockStore({ traders_hub: { @@ -25,7 +31,6 @@ describe('', () => { }); it('Should render image properly for desktop', () => { - mockRootStore.ui.is_mobile = false; render(, { wrapper: ({ children }) => {children}, }); @@ -37,7 +42,7 @@ describe('', () => { }); it('Should render image properly for mobile', () => { - mockRootStore.ui.is_mobile = true; + (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true }); render(, { wrapper: ({ children }) => {children}, }); @@ -81,7 +86,6 @@ describe('', () => { }); it('Should render image properly for desktop', () => { - mockRootStore.ui.is_mobile = false; render(, { wrapper: ({ children }) => {children}, }); @@ -93,7 +97,7 @@ describe('', () => { }); it('Should render image properly for mobile', () => { - mockRootStore.ui.is_mobile = true; + (useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true }); render(, { wrapper: ({ children }) => {children}, }); diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx index 515cb9618963..79b975bfff08 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx @@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics'; import { Icon, Text } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; +import { useDevice } from '@deriv-com/ui'; const trackAnalyticsEvent = ( action: TEvents['ce_tradershub_banner']['action'], @@ -18,10 +19,28 @@ const trackAnalyticsEvent = ( }; const WalletsBannerUnsuccessful = observer(() => { - const { traders_hub, ui } = useStore(); - const { is_desktop } = ui; + const { traders_hub } = useStore(); + const { isDesktop, isMobile, isTablet } = useDevice(); const { is_demo, toggleWalletsUpgrade } = traders_hub; const account_mode = is_demo ? 'demo' : 'real'; + let titleFontSize, descriptionFontSize, iconHeight, iconWidth; + + if (isTablet) { + titleFontSize = 's'; + descriptionFontSize = 'xxs'; + iconHeight = 112; + iconWidth = 192; + } else if (isDesktop) { + titleFontSize = 'sm'; + descriptionFontSize = 'xs'; + iconHeight = 142; + iconWidth = 242; + } else { + titleFontSize = 'xs'; + descriptionFontSize = 'xxxs'; + iconHeight = 112; + iconWidth = 192; + } React.useEffect(() => { trackAnalyticsEvent('open', account_mode); @@ -38,25 +57,20 @@ const WalletsBannerUnsuccessful = observer(() => { , + , ]} />
, + , , @@ -66,8 +80,8 @@ const WalletsBannerUnsuccessful = observer(() => {
diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx index 79880cf0cccd..2d86a4e8aab6 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx @@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics'; import { Button, Icon, Text } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { Localize, localize } from '@deriv/translations'; +import { useDevice } from '@deriv-com/ui'; const trackAnalyticsEvent = ( action: TEvents['ce_tradershub_banner']['action'], @@ -22,10 +23,25 @@ type TProps = { }; const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => { - const { traders_hub, ui } = useStore(); - const { is_desktop, is_mobile } = ui; + const { traders_hub } = useStore(); + const { isDesktop, isMobile, isTablet } = useDevice(); const { is_demo, toggleWalletsUpgrade } = traders_hub; const account_mode = is_demo ? 'demo' : 'real'; + let titleFontSize, iconHeight, iconWidth; + + if (isTablet) { + titleFontSize = 'xsm'; + iconHeight = 98; + iconWidth = 234; + } else if (isDesktop) { + titleFontSize = 'm'; + iconHeight = 154; + iconWidth = 368; + } else { + titleFontSize = 'xs'; + iconHeight = 138; + iconWidth = 156; + } React.useEffect(() => { trackAnalyticsEvent('open', account_mode); @@ -43,8 +59,8 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => { , - , + , + , ]} /> @@ -58,11 +74,11 @@ const WalletsBannerUpgrade: React.FC = observer(({ is_upgrading }) => { /> ); diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx index b800b61d0a64..a158ddc37e2b 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx @@ -3,11 +3,30 @@ import { Analytics } from '@deriv-com/analytics'; import { Icon, Text } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; import { Localize } from '@deriv/translations'; +import { useDevice } from '@deriv-com/ui'; const WalletsBannerUpgrading = observer(() => { - const { traders_hub, ui } = useStore(); + const { traders_hub } = useStore(); const { is_demo } = traders_hub; - const { is_desktop, is_mobile } = ui; + const { isDesktop, isMobile, isTablet } = useDevice(); + let titleFontSize, descriptionFontSize, iconHeight, iconWidth; + + if (isTablet) { + titleFontSize = 's'; + descriptionFontSize = 'xxs'; + iconHeight = 98; + iconWidth = 234; + } else if (isDesktop) { + titleFontSize = 'sm'; + descriptionFontSize = 'xs'; + iconHeight = 154; + iconWidth = 368; + } else { + titleFontSize = 'xs'; + descriptionFontSize = 'xxxs'; + iconHeight = 138; + iconWidth = 156; + } React.useEffect(() => { Analytics.trackEvent('ce_tradershub_banner', { @@ -30,12 +49,7 @@ const WalletsBannerUpgrading = observer(() => { , + , ]} /> { className='wallets-banner-upgrading__description' key={0} line_height='s' - size={is_desktop ? 'xs' : 'xxxs'} + size={descriptionFontSize} />, ]} /> ); diff --git a/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss b/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss index 4168c79fec4c..d01b1719355e 100644 --- a/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss +++ b/packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss @@ -1,8 +1,13 @@ .wallets-banner { position: relative; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.2rem; height: 18rem; - padding: 2.4rem; margin-block: 2.4rem; + padding-block: 2.4rem; + padding-inline-start: 2.4rem; overflow: hidden; background-color: var(--general-section-1); border: 1px solid var(--wallets-banner-border-color); @@ -10,8 +15,9 @@ @include mobile-or-tablet-screen { height: 14.2rem; - padding: 1.6rem; border-radius: $BORDER_RADIUS * 2; + padding-block: 1.6rem; + padding-inline-start: 1.6rem; } &__content { @@ -24,11 +30,18 @@ &-upgrade { &__content { width: 55.7rem; + min-width: 55.7rem; justify-content: center; gap: 1.6rem; - @include mobile-or-tablet-screen { - width: 20rem; + @include mobile-screen { + width: 19rem; + min-width: 19rem; + } + + @include tablet-screen { + width: 25.6rem; + min-width: 25.6rem; } } @@ -44,16 +57,30 @@ &-upgrading { &__content { width: 48.6rem; + min-width: 48.6rem; justify-content: space-between; + gap: 0.8rem; - @include mobile-or-tablet-screen { + @include mobile-screen { width: 20rem; + min-width: 20rem; + } + + @include tablet-screen { + width: 27.3rem; + min-width: 27.3rem; } } &__description { - @include mobile-or-tablet-screen { + @include mobile-screen { width: 15.1rem; + min-width: 15.1rem; + } + + @include tablet-screen { + width: 27.3rem; + min-width: 27.3rem; } } @@ -65,7 +92,7 @@ align-items: center; gap: 0.6rem; - @include mobile-or-tablet-screen { + @include mobile-screen { width: 3.2rem; height: 3.2rem; } @@ -93,7 +120,7 @@ border-radius: 50%; background-color: var(--wallets-banner-dot-color); - @include mobile-or-tablet-screen { + @include mobile-screen { height: 0.5rem; width: 0.5rem; } @@ -103,12 +130,19 @@ &-unsuccessful { &__content { width: 48.6rem; + min-width: 48.6rem; justify-content: center; gap: 0.8rem; z-index: 1; - @include mobile-or-tablet-screen { + @include mobile-screen { width: 17rem; + min-width: 17rem; + } + + @include tablet-screen { + width: 29.5rem; + min-width: 29.5rem; } } @@ -117,14 +151,15 @@ } &__image { - position: absolute; - inset-inline-end: 8rem; - inset-block-start: 0rem; + width: fit-content; + min-width: 24.2rem; + overflow: hidden; + margin-inline-end: 8rem; @include mobile-or-tablet-screen { - inset-inline-end: -3rem; + min-width: 19.2rem; + margin-inline-end: 2.4rem; } - @include rtl { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); @@ -137,13 +172,20 @@ .wallets-banner-upgrade__image, .wallets-banner-upgrading__image { - position: absolute; - inset-inline-end: 8rem; - inset-block-start: 0rem; + width: fit-content; + min-width: 36.8rem; + overflow: hidden; + margin-inline-end: 8rem; - @include mobile-or-tablet-screen { - inset-inline-end: -4.5rem; - inset-block-start: -3rem; + @include mobile-screen { + min-width: 15.6rem; + margin-block-start: 0.4rem; + margin-inline-end: unset; + } + + @include tablet-screen { + min-width: 23.4rem; + margin-inline-end: 2.4rem; } } diff --git a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss index 5e70547f5044..8e44dc5a3128 100644 --- a/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss +++ b/packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss @@ -5,18 +5,27 @@ flex-direction: column; align-items: center; gap: 3.2rem; - max-width: 63.8rem; - margin: 0 auto; - padding-top: calc( + min-width: 61.6rem; + padding-inline: 8rem; + padding-block-start: calc( 5.4rem + 3.2rem ); // 5.4rem is the height of the header, 3.2rem is the padding-top of the content - padding-bottom: 3.2rem; + padding-block-end: 3.2rem; - @include mobile-or-tablet-screen { + @include mobile-screen { gap: 1.6rem; - max-width: 28rem; - padding-top: 4.8rem; - padding-bottom: 1.6rem; + min-width: 28.8rem; + padding-block-start: 4.8rem; + padding-block-end: 1.6rem; + padding-inline: 2rem; + } + + @include tablet-screen { + gap: 1.6rem; + min-width: 40rem; + padding-block-start: 4.8rem; + padding-block-end: 1.6rem; + padding-inline: 2rem; } } @@ -26,9 +35,14 @@ min-height: 32rem; filter: drop-shadow(0px 4px 6px rgba(14, 14, 14, 0.03)) drop-shadow(0px 12px 16px rgba(14, 14, 14, 0.08)); - @include mobile-or-tablet-screen { - width: 28rem; - min-height: 15.7rem; + @include mobile-screen { + width: 27.9rem; + min-height: 16.1rem; + } + + @include tablet-screen { + width: 38.6rem; + min-height: 22.2rem; } } @@ -74,6 +88,7 @@ & .dc-modal-body { padding: 0; + overflow: scroll; } } diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg index c3aa39ff5fe5..f4435c29ddaa 100644 --- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg +++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins-horizontal.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg index 4204eb3c6454..daf4253a6cd7 100644 --- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg +++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-coins.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg index 77cb1954da8c..cf243be0ffcb 100644 --- a/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg +++ b/packages/components/src/components/icon/appstore/ic-appstore-wallets-upgrade-unsuccessful.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file