fix: fixed banner design

Author: Dhruv-deriv

packages/account/build/webpack.config.js

@@ -16,7 +16,6 @@ module.exports = function (env) {
             'financial-details-config': 'Configs/financial-details-config',
             'get-status-badge-config': 'Configs/get-status-badge-config',
             'personal-details-config': 'Configs/personal-details-config',
-            'poi-poa-docs-submitted': 'Components/poi-poa-docs-submitted/poi-poa-docs-submitted',
             'risk-tolerance-warning-modal': 'Components/trading-assessment/risk-tolerance-warning-modal',
             'sent-email-modal': 'Components/sent-email-modal',
             'terms-of-use-config': 'Configs/terms-of-use-config',

packages/account/src/Configs/get-mt5-status-badge-config.tsx

@@ -12,7 +12,7 @@ const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
             return {
                 text: (
                     <Localize
-                        i18n_default_text='<0>Pending verification</0>'
+                        i18n_default_text='<1>In review</1>'
                         components={[<Text key={0} weight='bold' size='xxxs' color='var(--status-warning)' />]}
                     />
                 ),
@@ -22,7 +22,7 @@ const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
             return {
                 text: (
                     <Localize
-                        i18n_default_text='<0>Verification failed.</0> <1>Why?</1>'
+                        i18n_default_text='<1>Failed</1>'
                         components={[
                             <Text key={0} weight='bold' size='xxxs' color='var(--status-danger)' />,
                             <Text
@@ -41,7 +41,7 @@ const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
             return {
                 text: (
                     <Localize
-                        i18n_default_text='<0>Needs verification.</0><1>Verify now</1>'
+                        i18n_default_text='<1>Needs Verification</1>'
                         components={[
                             <Text key={0} weight='bold' size='xxxs' color='var(--status-info)' />,
                             <Text

packages/appstore/src/components/modals/verification-docs-list-modal/index.ts

@@ -1,3 +1,3 @@
-import FailedVerificationModal from './failed-verification-modal';
+import VerificationDocsListModalContent from './verification-docs-list-modal';
 
-export default FailedVerificationModal;
+export default VerificationDocsListModalContent;

packages/components/src/components/icon/icons.js

@@ -743,6 +743,7 @@ import './mt5/ic-mt5-device-laptop.svg';
 import './mt5/ic-mt5-device-phone.svg';
 import './mt5/ic-mt5-device-tablet.svg';
 import './mt5/ic-mt5-expired.svg';
+import './mt5/ic-mt5-failed.svg';
 import './mt5/ic-mt5-financial-platform.svg';
 import './mt5/ic-mt5-financial-stp-platform.svg';
 import './mt5/ic-mt5-financial-stp.svg';
@@ -756,6 +757,7 @@ import './mt5/ic-mt5-one-password.svg';
 import './mt5/ic-mt5-open-markets.svg';
 import './mt5/ic-mt5-password-updated.svg';
 import './mt5/ic-mt5-password.svg';
+import './mt5/ic-mt5-pending.svg';
 import './mt5/ic-mt5-responsive.svg';
 import './mt5/ic-mt5-standard-financial-bvi.svg';
 import './mt5/ic-mt5-standard-financial-vanuatu.svg';
@@ -775,6 +777,7 @@ import './mt5/ic-mt5-vanuatu-derived.svg';
 import './mt5/ic-mt5-vanuatu-financial.svg';
 import './mt5/ic-mt5-vanuatu-standard.svg';
 import './mt5/ic-mt5-vanuatu.svg';
+import './mt5/ic-mt5-verification.svg';
 import './mt5/ic-mt5-zero-spread.svg';
 import './option/ic-option-accumulators.svg';
 import './option/ic-option-call-put-reset.svg';

packages/components/src/components/icon/mt5/ic-mt5-failed.svg

@@ -12,9 +12,23 @@
         align-items: center;
         white-space: nowrap;
 
+        &--pending {
+            font-size: var(--text-size-xxxs);
+            color: var(--status-warning);
+            background-color: var(--status-warning-transparent);
+            border: 1.5px;
+        }
+
+        &--needs_verification {
+            height: 100%;
+            width: 100%;
+            font-size: var(--text-size-xxxs);
+            background-color: var(--status-info-transparent);
+            border: 1.5px;
+        }
+
         &--migrated_with_position,
         &--migrated_without_position,
-        &--pending,
         &--under_maintenance,
         &--unavailable {
             border-color: var(--status-warning);
@@ -25,6 +39,8 @@
         &--failed {
             border-color: var(--status-danger);
             color: var(--status-danger);
+            background-color: var(--status-danger-transparent);
+            border: 1.5px;
         }
 
         &--icon {

packages/components/src/components/icon/mt5/ic-mt5-pending.svg

@@ -29,7 +29,7 @@ const StatusBadge = ({
         <div
             className={classNames(
                 'switcher-status-badge__container--icon',
-                `switcher-status-badge__container--icon${account_status ?? 'failed'}`
+                `switcher-status-badge__container--icon--${account_status ?? 'failed'}`
             )}
         >
             <Icon icon={icon} size='11' />

packages/components/src/components/icon/mt5/ic-mt5-verification.svg

@@ -107,7 +107,7 @@ export default class TradersHubStore extends BaseStore {
             setIsOnboardingVisited: action.bound,
             setIsFirstTimeVisit: action.bound,
             toggleVerificationModal: action.bound,
-            openVerificationDocsListModalal: action.bound,
+            openVerificationDocsListModal: action.bound,
             toggleRegulatorsCompareModal: action.bound,
             showTopUpModal: action.bound,
             toggleWalletsUpgrade: action.bound,
@@ -767,7 +767,7 @@ export default class TradersHubStore extends BaseStore {
         this.is_verification_docs_list_modal_visible = !this.is_verification_docs_list_modal_visible;
     }
 
-    openVerificationDocsListModalal() {
+    openVerificationDocsListModal() {
         const {
             modules: { cfd },
         } = this.root_store;

packages/components/src/components/status-badge/status-badge.scss

@@ -1087,7 +1087,7 @@ type TTradersHubStore = {
     selectRegion: (region: string) => void;
     closeAccountTransferModal: () => void;
     toggleRegulatorsCompareModal: () => void;
-    openVerificationDocsListModalal: () => void;
+    openVerificationDocsListModal: () => void;
     toggleVerificationModal: () => void;
     modal_data: TModalData;
     financial_restricted_countries: boolean;