Skip to content

Commit

Permalink
[WALL] Aizad/WALL-4397/Wallet migration banner and pop up window for …
Browse files Browse the repository at this point in the history 
…Arabic language is misaligned (deriv-com#15817)

* chore: updated content for RTL languages

* chore: update wallets upgarde modal

* chore: fix stylelint

* chore: fix stylelint pt.2

* chore: update using inset-inline and style for tablet view

* chore: update modal with inset

* chore: remove unused css styles

* chore: fix test cases
  • Loading branch information
@aizad-deriv
aizad-deriv authored Jul 12, 2024
1 parent 7926d83 commit 0d0d513
Show file tree
Hide file tree
Showing 8 changed files with 98 additions and 95 deletions.
18 changes: 9 additions & 9 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';

const WalletBannerUnsuccessful = observer(() => {
const WalletsBannerUnsuccessful = observer(() => {
const { traders_hub, ui } = useStore();
const { is_mobile } = ui;
const { is_desktop } = ui;
const { toggleWalletsUpgrade } = traders_hub;

return (
<div className='wallets-banner__container wallets-banner-unsuccessful'>
<div className='wallets-banner wallets-banner-unsuccessful'>
<div className='wallets-banner__content wallets-banner-unsuccessful__content'>
<Localize
i18n_default_text='<0>Setup unsuccessful</0>'
components={[
<Text
key={0}
line_height={is_mobile ? 's' : 'm'}
size={is_mobile ? 'xs' : 'sm'}
line_height={is_desktop ? 'm' : 's'}
size={is_desktop ? 'sm' : 'xs'}
weight='bold'
/>,
]}
Expand All @@ -26,13 +26,13 @@ const WalletBannerUnsuccessful = observer(() => {
<Localize
i18n_default_text='<0>We’re unable to upgrade you to Wallets at this time and are working to get this fixed as soon as we can. Please </0><1>try again</1><0>.</0>'
components={[
<Text key={0} line_height='s' size={is_mobile ? 'xxxs' : 'xs'} />,
<Text key={0} line_height='s' size={is_desktop ? 'xs' : 'xxxs'} />,
<Text
key={1}
className='wallets-banner-unsuccessful__clickable-text'
color='red'
line_height='s'
size={is_mobile ? 'xxxs' : 'xs'}
size={is_desktop ? 'xs' : 'xxxs'}
weight='bold'
onClick={() => toggleWalletsUpgrade(true)}
/>,
Expand All @@ -42,7 +42,7 @@ const WalletBannerUnsuccessful = observer(() => {
</div>
<Icon
icon='IcAppstoreWalletsUpgradeUnsuccessful'
width={is_mobile ? 192 : 272}
width={is_desktop ? 272 : 192}
height='100%'
className='wallets-banner-unsuccessful__image'
data_testid='dt_wallets_upgrade_unsuccessful'
Expand All @@ -51,4 +51,4 @@ const WalletBannerUnsuccessful = observer(() => {
);
});

export default WalletBannerUnsuccessful;
export default WalletsBannerUnsuccessful;
14 changes: 7 additions & 7 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@ import { Localize, localize } from '@deriv/translations';

const WalletsBannerUpgrade = observer(() => {
const { traders_hub, ui } = useStore();
const { is_mobile } = ui;
const { is_desktop, is_mobile } = ui;
const { toggleWalletsUpgrade } = traders_hub;

return (
<div className='wallets-banner__container wallets-banner-upgrade'>
<div className='wallets-banner wallets-banner-upgrade'>
<div className='wallets-banner__content wallets-banner-upgrade__content'>
<div>
<Localize
i18n_default_text='<0>Wallets</0><1> — A smarter way to manage your funds</1>'
components={[
<Text key={0} weight='bold' size={is_mobile ? 'xs' : 'm'} />,
<Text key={1} size={is_mobile ? 'xs' : 'm'} />,
<Text key={0} weight='bold' size={is_desktop ? 'm' : 'xs'} />,
<Text key={1} size={is_desktop ? 'm' : 'xs'} />,
]}
/>
</div>
Expand All @@ -29,9 +29,9 @@ const WalletsBannerUpgrade = observer(() => {
/>
</div>
<Icon
icon={`IcAppstoreWalletsUpgradeCoins${is_mobile ? '' : 'Horizontal'}`}
width={is_mobile ? 220 : 448}
height={is_mobile ? 220 : '100%'}
icon={`IcAppstoreWalletsUpgradeCoins${is_desktop ? 'Horizontal' : ''}`}
width={is_desktop ? 448 : 220}
height={is_desktop ? '100%' : 220}
className='wallets-banner-upgrade__image'
data_testid={`dt_wallets_upgrade_coins${is_mobile ? '' : '_horizontal'}`}
/>
Expand Down
16 changes: 8 additions & 8 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import { Localize } from '@deriv/translations';

const WalletsBannerUpgrading = observer(() => {
const { ui } = useStore();
const { is_mobile } = ui;
const { is_desktop, is_mobile } = ui;

return (
<div className='wallets-banner__container wallets-banner-upgrading'>
<div className='wallets-banner wallets-banner-upgrading'>
<div className='wallets-banner__content wallets-banner-upgrading__content'>
<div className='wallets-banner-upgrading__loading' data-testid='dt_wallets_loading_dots'>
<span className='wallets-banner-upgrading__dot' />
Expand All @@ -20,8 +20,8 @@ const WalletsBannerUpgrading = observer(() => {
components={[
<Text
key={0}
line_height={is_mobile ? 's' : 'm'}
size={is_mobile ? 'xs' : 'sm'}
line_height={is_desktop ? 'm' : 's'}
size={is_desktop ? 'sm' : 'xs'}
weight='bold'
/>,
]}
Expand All @@ -33,15 +33,15 @@ const WalletsBannerUpgrading = observer(() => {
className='wallets-banner-upgrading__description'
key={0}
line_height='s'
size={is_mobile ? 'xxxs' : 'xs'}
size={is_desktop ? 'xs' : 'xxxs'}
/>,
]}
/>
</div>
<Icon
icon={`IcAppstoreWalletsUpgradeCoins${is_mobile ? '' : 'Horizontal'}`}
width={is_mobile ? 220 : 448}
height={is_mobile ? 220 : '100%'}
icon={`IcAppstoreWalletsUpgradeCoins${is_desktop ? 'Horizontal' : ''}`}
width={is_desktop ? 448 : 220}
height={is_desktop ? '100%' : 220}
className='wallets-banner-upgrading__image'
data_testid={`dt_wallets_upgrade_coins${is_mobile ? '' : '_horizontal'}`}
/>
Expand Down
95 changes: 44 additions & 51 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,17 @@
.wallets-banner {
&__container {
position: relative;
height: 18rem;
display: flex;
padding: 2.4rem;
margin-block: 2.4rem;
overflow: hidden;
background-color: var(--general-section-1);
border: 1px solid var(--wallets-banner-border-color);
border-radius: $BORDER_RADIUS * 4;

@include mobile {
height: 14.2rem;
padding: 1.6rem;
border-radius: $BORDER_RADIUS * 2;
}
position: relative;
height: 18rem;
padding: 2.4rem;
margin-block: 2.4rem;
overflow: hidden;
background-color: var(--general-section-1);
border: 1px solid var(--wallets-banner-border-color);
border-radius: $BORDER_RADIUS * 4;

@include mobile-or-tablet-screen {
height: 14.2rem;
padding: 1.6rem;
border-radius: $BORDER_RADIUS * 2;
}

&__content {
Expand All @@ -30,28 +27,16 @@
justify-content: center;
gap: 1.6rem;

@include mobile {
@include mobile-or-tablet-screen {
width: 20rem;
}
}

&__button {
padding-inline: 6.7rem;

@include mobile {
padding-inline: 1.6rem;
padding-block: 0.6rem;
}
}

&__image {
position: absolute;
top: 0;
right: 8rem;

@include mobile {
top: -2.6rem;
right: -5.35rem;
@include mobile-or-tablet-screen {
padding: 0.6rem 1.6rem;
}
}
}
Expand All @@ -61,13 +46,13 @@
width: 48.6rem;
justify-content: space-between;

@include mobile {
@include mobile-or-tablet-screen {
width: 20rem;
}
}

&__description {
@include mobile {
@include mobile-or-tablet-screen {
width: 15.1rem;
}
}
Expand All @@ -80,7 +65,7 @@
align-items: center;
gap: 0.6rem;

@include mobile {
@include mobile-or-tablet-screen {
width: 3.2rem;
height: 3.2rem;
}
Expand Down Expand Up @@ -108,22 +93,11 @@
border-radius: 50%;
background-color: var(--wallets-banner-dot-color);

@include mobile {
@include mobile-or-tablet-screen {
height: 0.5rem;
width: 0.5rem;
}
}

&__image {
position: absolute;
top: 0;
right: 8rem;

@include mobile {
top: -2.6rem;
right: -5.35rem;
}
}
}

&-unsuccessful {
Expand All @@ -133,7 +107,7 @@
gap: 0.8rem;
z-index: 1;

@include mobile {
@include mobile-or-tablet-screen {
width: 17rem;
}
}
Expand All @@ -144,16 +118,35 @@

&__image {
position: absolute;
right: 7.5rem;
top: 0;
inset-inline-end: 8rem;
inset-block-start: 0rem;

@include mobile-or-tablet-screen {
inset-inline-end: -3rem;
}

@include mobile {
right: -3rem;
@include rtl {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
}
}
}

.wallets-banner-upgrade__image,
.wallets-banner-upgrading__image {
position: absolute;
inset-inline-end: 8rem;
inset-block-start: 0rem;

@include mobile-or-tablet-screen {
inset-inline-end: -4.5rem;
inset-block-start: -3rem;
}
}

@keyframes loading {
0% {
background-color: var(--wallets-banner-active-dot-color);
Expand Down
6 changes: 3 additions & 3 deletions packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
); // 5.4rem is the height of the header, 3.2rem is the padding-top of the content
padding-bottom: 3.2rem;

@include mobile {
@include mobile-or-tablet-screen {
gap: 1.6rem;
max-width: 28rem;
padding-top: 4.8rem;
Expand All @@ -26,7 +26,7 @@
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 {
@include mobile-or-tablet-screen {
width: 28rem;
min-height: 15.7rem;
}
Expand All @@ -38,7 +38,7 @@
iframe {
aspect-ratio: 16 / 9;
border-radius: $BORDER_RADIUS;
@include mobile {
@include mobile-or-tablet-screen {
border-radius: 4px;
}
}
Expand Down
12 changes: 6 additions & 6 deletions packages/appstore/src/components/modals/wallets-upgrade-modal/wallets-upgrade-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import './wallets-upgrade-modal.scss';
const WalletsUpgradeModal = observer(() => {
const { traders_hub, ui } = useStore();
const { is_real_wallets_upgrade_on, toggleWalletsUpgrade } = traders_hub;
const { is_mobile, is_desktop } = ui;
const { is_desktop } = ui;
const { is_eligible, startMigration } = useWalletMigration();
const isWalletMigrationModalClosed = localStorage.getItem('is_wallet_migration_modal_closed');
const [modalOpen, setModalOpen] = React.useState(!isWalletMigrationModalClosed);
Expand All @@ -30,7 +30,7 @@ const WalletsUpgradeModal = observer(() => {
<Modal
className='wallets-upgrade-modal'
is_open={(is_eligible && modalOpen) || is_real_wallets_upgrade_on}
width={is_mobile ? '32.8rem' : '77.6rem'}
width={is_desktop ? '77.6rem' : '32.8rem'}
title=' '
toggleModal={closeModal}
>
Expand All @@ -51,10 +51,10 @@ const WalletsUpgradeModal = observer(() => {
/>
</div>
<div className='wallets-upgrade-modal__text'>
<Text align='center' size={is_mobile ? 's' : 'm'} weight='bold'>
<Text align='center' size={is_desktop ? 'm' : 's'} weight='bold'>
<Localize i18n_default_text='Introducing Wallets' />
</Text>
<Text align='center' size={is_mobile ? 'xs' : 's'}>
<Text align='center' size={is_desktop ? 's' : 'xs'}>
<Localize
i18n_default_text='Use Wallets to manage your funds across different currencies effortlessly.'
components={[<br key={0} />]}
Expand All @@ -64,8 +64,8 @@ const WalletsUpgradeModal = observer(() => {
</div>
<div
className={classNames({
'wallets-upgrade-modal__footer--desktop': !is_mobile,
'wallets-upgrade-modal__footer--mobile': is_mobile,
'wallets-upgrade-modal__footer--desktop': is_desktop,
'wallets-upgrade-modal__footer--mobile': !is_desktop,
})}
>
<Button large={is_desktop} onClick={handleMigration} primary text={localize('Enable now')} />
Expand Down
Loading

0 comments on commit 0d0d513

Please sign in to comment.