From ef2dddb98eefb29b387713bbf4714aa5e4a42124 Mon Sep 17 00:00:00 2001 From: Sergei Baranovski <120570511+sergei-deriv@users.noreply.github.com> Date: Fri, 14 Jun 2024 05:56:06 +0300 Subject: [PATCH] fix: creation banner and adding mt5 account (#15659) --- .../common-mistake-examples.scss | 10 +- .../ProofOfAddress/proof-of-address-form.tsx | 15 +- packages/account/src/Styles/account.scss | 154 +++++++++--------- .../real-account-creation-banner.scss | 2 +- .../real-account-creation-banner.tsx | 12 +- 5 files changed, 99 insertions(+), 94 deletions(-) diff --git a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss index 2336f29e78e4..5edc9aa93c05 100644 --- a/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss +++ b/packages/account/src/Components/poa/common-mistakes/common-mistake-examples.scss @@ -7,11 +7,17 @@ row-gap: 1.6rem; margin-bottom: 2.4rem; - @include desktop { + @include tablet-screen { + grid-template-columns: repeat(2, 1fr); + row-gap: 3.2rem; + } + + @include desktop-screen { grid-template-columns: repeat(3, 1fr); column-gap: calc((100% - 23.7rem * 3) / 2); row-gap: 3.2rem; } + &-layout { background-color: var(--transparent-danger); gap: 1.6rem; @@ -25,7 +31,7 @@ width: 23.7rem; height: 21.8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-inline: auto; } } diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx index 04d5a4d4f669..b1c594e4c8cc 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-form.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Formik, FormikErrors, FormikHelpers, FormikValues } from 'formik'; +import { useDevice } from '@deriv-com/ui'; import { Loading, Button, Text, ThemedScrollbars, FormSubmitButton, Modal, HintBox } from '@deriv/components'; import { useFileUploader } from '@deriv/hooks'; import { validAddress, validPostCode, validLetterSymbol, validLength, getLocation, WS } from '@deriv/shared'; @@ -44,7 +45,8 @@ const ProofOfAddressForm = observer( step_index, className, }: Partial) => { - const { client, notifications, ui } = useStore(); + const { isDesktop } = useDevice(); + const { client, notifications } = useStore(); const { account_settings, fetchResidenceList, fetchStatesList, getChangeableFields, states_list, is_eu } = client; const { @@ -52,7 +54,6 @@ const ProofOfAddressForm = observer( removeNotificationMessage, removeNotificationByKey, } = notifications; - const { is_mobile } = ui; const [document_files, setDocumentFiles] = React.useState([]); const [file_selection_error, setFileSelectionError] = React.useState(null); const [is_loading, setIsLoading] = React.useState(true); @@ -271,7 +272,7 @@ const ProofOfAddressForm = observer( } const setOffset = (status: { msg: string }) => { const mobile_scroll_offset = status?.msg ? '200px' : '154px'; - return is_mobile && !is_for_cfd_modal ? mobile_scroll_offset : '80px'; + return !isDesktop && !is_for_cfd_modal ? mobile_scroll_offset : '80px'; }; return ( @@ -283,12 +284,12 @@ const ProofOfAddressForm = observer( > {({ status, handleSubmit, isSubmitting, isValid }) => ( <> - + {form_state.should_show_form && (
@@ -297,7 +298,7 @@ const ProofOfAddressForm = observer( className='account-form_poa-submit-error' icon='IcAlertDanger' message={ - + {!status?.msg && is_resubmit && ( )} @@ -342,7 +343,7 @@ const ProofOfAddressForm = observer( !!file_selection_error } label={localize('Continue')} - is_absolute={is_mobile} + is_absolute={!isDesktop} is_loading={isSubmitting} /> diff --git a/packages/account/src/Styles/account.scss b/packages/account/src/Styles/account.scss index ea754d80524e..a0aa110fe395 100644 --- a/packages/account/src/Styles/account.scss +++ b/packages/account/src/Styles/account.scss @@ -8,7 +8,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0 16px; .dc-page-overlay__content { - @include mobile { + @include mobile-or-tablet-screen { overflow-x: hidden; overflow-y: auto; } @@ -162,7 +162,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include desktop { + @include desktop-screen { & .da-self-exclusion__wrapper { width: calc(100vw - 33rem); } @@ -172,7 +172,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include desktop { + @include desktop-screen { grid-template-rows: 5.2rem calc(100vh - 4.8rem - 3.6rem - 5.2rem); overflow: hidden; } @@ -205,7 +205,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 100%; width: 100%; - @include desktop { + @include desktop-screen { &__financial-assessment { .account-form__fieldset { margin-top: 0.8rem; @@ -235,7 +235,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; margin-top: 0.3rem; - @include mobile { + @include mobile-or-tablet-screen { border-top-color: var(--general-disabled); } } @@ -269,7 +269,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 1.6rem; max-width: 67.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } } @@ -338,7 +338,7 @@ $MIN_HEIGHT_FLOATING: calc( top: 1rem; } - @include mobile { + @include mobile-or-tablet-screen { .dc-checkbox { &__box, & .dc-icon { @@ -377,14 +377,14 @@ $MIN_HEIGHT_FLOATING: calc( } &__personal-details { - @include desktop { + @include desktop-screen { .account__scrollbars_container { padding-top: 2.4rem; padding-bottom: 2.4rem; } } - @include mobile { + @include mobile-or-tablet-screen { .account__scrollbars_container { &--grid-layout { display: flex; @@ -423,13 +423,13 @@ $MIN_HEIGHT_FLOATING: calc( .account__scrollbars_container { &--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } } - @include desktop { + @include desktop-screen { padding-bottom: 0; } } @@ -464,7 +464,7 @@ $MIN_HEIGHT_FLOATING: calc( flex-wrap: wrap; } - @include mobile { + @include mobile-or-tablet-screen { flex-wrap: wrap; margin-bottom: 2.4rem; } @@ -496,7 +496,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { width: 100%; margin-right: unset; margin-bottom: 2.4rem; @@ -535,7 +535,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { height: fit-content; width: 100%; padding: 2.4rem 1.8rem 2rem; @@ -550,13 +550,13 @@ $MIN_HEIGHT_FLOATING: calc( display: flex; grid-column-gap: 0.8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; flex-direction: column; } &__fieldset { - @include mobile { + @include mobile-or-tablet-screen { width: inherit; max-width: 40rem; @@ -586,7 +586,7 @@ $MIN_HEIGHT_FLOATING: calc( &__password-wrapper { & .account__scrollbars_container--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } @@ -652,7 +652,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 4rem; margin-top: 3.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 1.6rem 0; padding: 1.6rem; } @@ -663,7 +663,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 12.8rem; height: 12.8rem; - @include desktop { + @include desktop-screen { margin-top: 8rem; } } @@ -689,18 +689,18 @@ $MIN_HEIGHT_FLOATING: calc( &-full-width { width: calc(100vw - 33rem); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } - @include mobile { + @include mobile-or-tablet-screen { overflow-x: hidden; overflow-y: auto; } } - @include mobile { + @include mobile-or-tablet-screen { line-height: 2rem; text-align: center; } @@ -731,14 +731,14 @@ $MIN_HEIGHT_FLOATING: calc( &-leave-confirm, &-submit-success { - @include desktop { + @include desktop-screen { .dc-btn--primary { width: 13rem; margin-left: 0.8rem; } } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; width: 100%; margin-top: 1.2rem; @@ -764,7 +764,7 @@ $MIN_HEIGHT_FLOATING: calc( @include typeface(--paragraph-left-bold-black, none); color: var(--text-prominent); - @include mobile { + @include mobile-or-tablet-screen { font-size: 1.2rem; color: var(--text-general); } @@ -782,7 +782,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 5rem; margin: 0 0.6rem; - @include mobile { + @include mobile-or-tablet-screen { margin: 1.1rem 0; } } @@ -795,12 +795,12 @@ $MIN_HEIGHT_FLOATING: calc( margin-left: 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { margin-left: unset; } } - @include desktop { + @include desktop-screen { max-width: 54.6rem; } } @@ -809,7 +809,7 @@ $MIN_HEIGHT_FLOATING: calc( .dashboard__message-content { margin-top: 8rem; - @include mobile { + @include mobile-or-tablet-screen { margin-top: 4rem; } } @@ -845,7 +845,7 @@ $MIN_HEIGHT_FLOATING: calc( height: 100%; } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; overflow-y: auto; overflow-x: hidden; @@ -856,7 +856,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 1.5rem; margin-left: 1.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-right: 1.2rem; } } @@ -866,7 +866,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 40rem; margin: 2.7rem auto 0; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; max-width: 40rem; } @@ -891,7 +891,7 @@ $MIN_HEIGHT_FLOATING: calc( &__timeline { padding: 0 1.4rem; - @include mobile { + @include mobile-or-tablet-screen { margin-left: 1.2rem; } } @@ -972,7 +972,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { &__list { width: 90%; margin: 1rem auto; @@ -1021,7 +1021,7 @@ $MIN_HEIGHT_FLOATING: calc( } .leave-confirm { - @include mobile { + @include mobile-or-tablet-screen { &__message-icon { width: 93px; } @@ -1039,7 +1039,7 @@ $MIN_HEIGHT_FLOATING: calc( .submit-success { margin-top: 100px; - @include mobile { + @include mobile-or-tablet-screen { &__message-icon { width: 96px; height: 90px; @@ -1072,7 +1072,7 @@ $MIN_HEIGHT_FLOATING: calc( overflow-y: hidden; } - @include mobile { + @include mobile-or-tablet-screen { height: 100%; } } @@ -1109,7 +1109,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { height: 100%; margin: 0; } @@ -1143,7 +1143,7 @@ $MIN_HEIGHT_FLOATING: calc( &-dashboard { width: calc(100vw - 33rem); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; button { @@ -1157,7 +1157,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 2.4rem; align-self: center; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1178,7 +1178,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-right: 0.5em; flex: 1; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } } @@ -1192,7 +1192,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-bottom: 4em; // The gap for the error message is dependent on the font-size, better to be `em` instead of `rem` } - @include mobile { + @include mobile-or-tablet-screen { min-width: 100%; } } @@ -1389,7 +1389,7 @@ $MIN_HEIGHT_FLOATING: calc( font-weight: bold; } - @include mobile { + @include mobile-or-tablet-screen { &:not(:first-child):not(:last-child) { margin: 0; } @@ -1405,7 +1405,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { display: grid; grid-gap: 2.4rem; grid-template-columns: 1fr 1fr 1fr; @@ -1453,7 +1453,7 @@ $MIN_HEIGHT_FLOATING: calc( } .dc-modal__container_sent-email__modal { - @include mobile { + @include mobile-or-tablet-screen { height: 42rem !important; overflow-y: scroll !important; } @@ -1511,7 +1511,7 @@ $MIN_HEIGHT_FLOATING: calc( @include typeface(--paragraph-center-bold-red, none); } - @include mobile { + @include mobile-or-tablet-screen { width: 300px; height: 272px; } @@ -1536,7 +1536,7 @@ $MIN_HEIGHT_FLOATING: calc( &-field { margin-bottom: 3.2rem; - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 2.4rem; } @@ -1561,7 +1561,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0.5rem 0 0.8rem; } - @include mobile { + @include mobile-or-tablet-screen { &:first-child { & > p { padding-top: 2.4rem; @@ -1579,7 +1579,7 @@ $MIN_HEIGHT_FLOATING: calc( padding-left: 3%; list-style-type: disc; - @include mobile { + @include mobile-or-tablet-screen { padding-left: 5%; } @@ -1608,7 +1608,7 @@ $MIN_HEIGHT_FLOATING: calc( align-self: flex-end; background-color: transparent; - @include mobile { + @include mobile-or-tablet-screen { align-self: center; } } @@ -1619,7 +1619,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-inline-end: 10px; float: right; - @include mobile { + @include mobile-or-tablet-screen { margin-top: -8px; margin-inline-end: 10px; float: right; @@ -1630,7 +1630,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 2.4rem; float: right; - @include mobile { + @include mobile-or-tablet-screen { float: none; margin: 2.4rem auto 3.2rem; } @@ -1675,7 +1675,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-top: 0.8rem; &-wrapper { - @include mobile { + @include mobile-or-tablet-screen { margin-bottom: 5.6rem; } } @@ -1692,7 +1692,7 @@ $MIN_HEIGHT_FLOATING: calc( } } - @include mobile { + @include mobile-or-tablet-screen { width: calc(100% - 3rem); margin: 0 auto; @@ -1705,7 +1705,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 0.8rem 0; background-color: var(--general-main-1); - @include mobile { + @include mobile-or-tablet-screen { position: fixed; bottom: 0; left: 0; @@ -1729,7 +1729,7 @@ $MIN_HEIGHT_FLOATING: calc( /* stylelint-disable */ .dc-modal__container_closing-account-reasons { - @include mobile { + @include mobile-or-tablet-screen { max-height: 70vh; } @@ -1747,7 +1747,7 @@ $MIN_HEIGHT_FLOATING: calc( padding: 3.2rem; width: 440px; - @include mobile { + @include mobile-or-tablet-screen { width: unset; } @@ -1759,7 +1759,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 10.3rem; } - @include mobile { + @include mobile-or-tablet-screen { background: unset; } } @@ -1845,7 +1845,7 @@ $MIN_HEIGHT_FLOATING: calc( margin: 1.6rem 2.4rem; } - @include mobile { + @include mobile-or-tablet-screen { &__button { margin: 1.6rem; } @@ -1865,7 +1865,7 @@ $MIN_HEIGHT_FLOATING: calc( position: absolute; width: 87%; - @include mobile { + @include mobile-or-tablet-screen { width: 70%; } } @@ -1876,7 +1876,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; overflow: hidden; - @include mobile { + @include mobile-or-tablet-screen { margin-top: 2.4rem; } @@ -1887,14 +1887,14 @@ $MIN_HEIGHT_FLOATING: calc( display: flex; flex-direction: column; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; flex-direction: column; padding: 1.6rem; margin-bottom: 0.8rem; } - @include desktop { + @include desktop-screen { width: 80%; padding: 2.4rem; } @@ -1943,7 +1943,7 @@ $MIN_HEIGHT_FLOATING: calc( align-items: center; margin-top: 3rem; - @include mobile { + @include mobile-or-tablet-screen { display: flex; } @@ -1953,7 +1953,7 @@ $MIN_HEIGHT_FLOATING: calc( width: 100%; flex-grow: 4; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1964,7 +1964,7 @@ $MIN_HEIGHT_FLOATING: calc( align-self: flex-start; flex-grow: 1; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -1974,19 +1974,19 @@ $MIN_HEIGHT_FLOATING: calc( -webkit-text-fill-color: var(--text-loss-danger); } - @include desktop { + @include desktop-screen { .dc-input { width: unset; } } - @include mobile { + @include mobile-or-tablet-screen { .dc-input { margin-bottom: 1rem; } } - @include mobile { + @include mobile-or-tablet-screen { flex-direction: column; padding-bottom: 1rem; } @@ -2000,7 +2000,7 @@ $MIN_HEIGHT_FLOATING: calc( color: var(--text-less-prominent); -webkit-text-fill-color: var(--text-less-prominent); - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } } @@ -2008,13 +2008,13 @@ $MIN_HEIGHT_FLOATING: calc( &-photo { margin-bottom: 35px; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; margin-left: 0; margin-top: 1.6rem; } - @include desktop { + @include desktop-screen { .dc-input { flex-grow: 8; } @@ -2049,7 +2049,7 @@ $MIN_HEIGHT_FLOATING: calc( margin-right: 25px; overflow: visible; - @include mobile { + @include mobile-or-tablet-screen { margin-right: 8px; } @@ -2081,7 +2081,7 @@ $MIN_HEIGHT_FLOATING: calc( padding: 2rem auto !important; width: 72%; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; } @@ -2109,7 +2109,7 @@ $MIN_HEIGHT_FLOATING: calc( } & .account__scrollbars_container--grid-layout { - @include mobile { + @include mobile-or-tablet-screen { display: flex; flex-direction: column; } @@ -2124,7 +2124,7 @@ $MIN_HEIGHT_FLOATING: calc( &-img { padding: 2.4rem 0; - @include mobile { + @include mobile-or-tablet-screen { width: 100%; height: auto; } @@ -2158,7 +2158,7 @@ $MIN_HEIGHT_FLOATING: calc( position: relaitve; background-color: var(--status-warning-transparent); - @include mobile { + @include mobile-or-tablet-screen { width: 32.8rem; margin: 1rem; } diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss index 785498651f19..33456b730287 100644 --- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss +++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.scss @@ -10,7 +10,7 @@ } &__content { - @include mobile { + @include mobile-or-tablet-screen { padding: 1.4rem 1.6rem; width: 25rem; } diff --git a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx index 5d7496054639..6743a00a2995 100644 --- a/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx +++ b/packages/appstore/src/components/real-account-creation-banner/real-account-creation-banner.tsx @@ -1,19 +1,17 @@ import React, { useEffect } from 'react'; -import './real-account-creation-banner.scss'; +import { useDevice } from '@deriv-com/ui'; import { getUrlBase, Jurisdiction } from '@deriv/shared'; import { Analytics } from '@deriv-com/analytics'; import { Localize } from '@deriv/translations'; import { Text, Button } from '@deriv/components'; import { observer, useStore } from '@deriv/stores'; +import './real-account-creation-banner.scss'; const RealAccountCreationBanner = observer(() => { - const { - ui: { is_mobile }, - } = useStore(); - + const { isDesktop } = useDevice(); const { ui } = useStore(); const { openRealAccountSignup, is_dark_mode_on } = ui; - const device = is_mobile ? 'mobile' : 'desktop'; + const device = !isDesktop ? 'mobile' : 'desktop'; const handleClick = () => { Analytics.trackEvent('ce_tradershub_banner', { @@ -42,7 +40,7 @@ const RealAccountCreationBanner = observer(() => { />
- +