Merge pull request #120 from Dhruv-deriv/dhruv/AccountBannerModification/TRAH-4030

Dhruv/Account-banner-modification/TRAH-4030

Author: amina-deriv

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

@@ -10,39 +10,27 @@ const getMT5StatusBadgeConfig = (mt5_account_status: TMT5AccountStatus) => {
     switch (mt5_account_status) {
         case MT5_ACCOUNT_STATUS.PENDING:
             return {
-                text: (
-                    <Localize
-                        i18n_default_text='<0>Pending verification</0>'
-                        components={[<Text key={0} weight='bold' size='xxxs' color='var(--status-warning)' />]}
-                    />
-                ),
-                icon: 'IcAlertWarning',
+                text: <Localize i18n_default_text='In review' />,
+                icon: 'IcMt5Pending',
             };
         case MT5_ACCOUNT_STATUS.FAILED:
             return {
                 text: (
                     <Localize
-                        i18n_default_text='<0>Verification failed.</0> <1>Why?</1>'
-                        components={[
-                            <Text key={0} weight='bold' size='xxxs' color='var(--status-danger)' />,
-                            <Text key={1} className='link-verification-failed' />,
-                        ]}
+                        i18n_default_text='Failed'
+                        onClick={() => {
+                            //TODO: default jurisdiction;
+                        }}
                     />
                 ),
-                icon: 'IcRedWarning',
+                icon: 'IcMt5Failed',
+                icon_size: '18',
             };
         case MT5_ACCOUNT_STATUS.NEEDS_VERIFICATION: {
             return {
-                text: (
-                    <Localize
-                        i18n_default_text='<0>Needs verification.</0><1>Verify now</1>'
-                        components={[
-                            <Text key={0} weight='bold' size='xxxs' color='var(--status-info)' />,
-                            <Text key={1} className='link-need-verification' />,
-                        ]}
-                    />
-                ),
-                icon: 'IcAlertInfo',
+                text: <Localize i18n_default_text='Needs Verification' />,
+                icon: 'IcMt5Verification',
+                icon_size: '18',
             };
         }
         case MT5_ACCOUNT_STATUS.MIGRATED_WITH_POSITION:

packages/appstore/src/components/containers/trading-app-card.tsx

@@ -87,7 +87,7 @@ const TradingAppCard = ({
         link_to: '',
     };
 
-    const { text: badge_text, icon: badge_icon } = getMT5StatusBadgeConfig(mt5_acc_auth_status);
+    const { text: badge_text, icon: badge_icon, icon_size: badge_size } = getMT5StatusBadgeConfig(mt5_acc_auth_status);
 
     const handleStatusBadgeClick = (mt5_acc_auth_status: string) => {
         switch (mt5_acc_auth_status) {
@@ -229,6 +229,7 @@ const TradingAppCard = ({
                             account_status={mt5_acc_auth_status}
                             icon={badge_icon}
                             text={badge_text}
+                            icon_size={badge_size}
                             onClick={() => {
                                 setAppstorePlatform(platform);
                                 handleStatusBadgeClick(mt5_acc_auth_status);

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

@@ -6,25 +6,40 @@
     &__container {
         display: inline-flex;
         padding: 2px 7px;
-        color: var(--status-info);
         border-radius: 4px;
-        border: 1.5px solid var(--status-info);
         align-items: center;
         white-space: nowrap;
+        font-size: var(--text-size-xxxs);
+
+        &--pending {
+            color: var(--status-warning);
+            background-color: var(--status-warning-transparent);
+            text-decoration: underline;
+            font-weight: bold;
+        }
+
+        &--needs_verification {
+            background-color: var(--status-info-transparent);
+            color: var(--status-info);
+            text-decoration: underline;
+            font-weight: bold;
+        }
 
         &--migrated_with_position,
         &--migrated_without_position,
-        &--pending,
         &--under_maintenance,
         &--unavailable {
-            border-color: var(--status-warning);
+            border: 1.5px solid var(--status-warning);
             color: var(--status-warning);
             font-size: var(--text-size-xxxs);
             align-items: center;
         }
         &--failed {
             border-color: var(--status-danger);
             color: var(--status-danger);
+            font-weight: bold;
+            text-decoration: underline;
+            background-color: var(--status-danger-transparent);
         }
 
         &--icon {
@@ -36,20 +51,3 @@
         }
     }
 }
-
-.link-need-verification {
-    color: var(--status-info);
-    font-weight: bold;
-    cursor: pointer;
-    font-size: var(--text-size-xxxs);
-    padding-left: 0.3rem;
-    text-decoration: underline;
-}
-
-.link-verification-failed {
-    color: var(--status-danger);
-    font-weight: bold;
-    text-decoration: underline;
-    font-size: var(--text-size-xxxs);
-    cursor: pointer;
-}

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

@@ -7,12 +7,14 @@ type TStatusBadgeProps = {
     account_status: string | null;
     icon: string;
     text: ReactNode;
+    icon_size: string;
     onClick?: () => void;
 };
 
 const StatusBadge = ({
     account_status,
     icon,
+    icon_size = '11',
     text,
     className,
     onClick,
@@ -29,10 +31,10 @@ 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' />
+            <Icon icon={icon} size={icon_size} />
         </div>
         {text}
     </div>

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

@@ -157,11 +157,13 @@
         --status-default: #{$color-grey-3};
         --status-adjustment: #{$color-grey-1};
         --status-danger: #{$color-red-1};
+        --status-danger-transparent: #{$alpha-color-red-1};
         --status-success: #{$color-green-1};
         --status-warning: #{$color-yellow};
         --status-warning-transparent: #{$alpha-color-yellow-1};
         --status-transfer: #{$color-orange};
         --status-info: #{$color-blue};
+        --status-info-transparent: #{$alpha-color-blue-1};
         --status-colored-background: #{$color-white};
         --status-alert-background: #{$color-yellow-3};
         // Dashboard