fix: edited styles of status banner

Author: Dhruv-deriv

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

@@ -52,7 +52,7 @@ const getStatusBadgeConfig = (
             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)' />,
                             setIsVerificationModalVisible ? (

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

@@ -8,10 +8,9 @@
         padding: 2px 7px;
         color: var(--status-info);
         border-radius: 4px;
-        border: 1.5px solid var(--status-info);
         align-items: center;
         white-space: nowrap;
-
+        background-color: var(--status-info-transparent);
         &--migrated_with_position,
         &--migrated_without_position,
         &--pending,
@@ -21,10 +20,12 @@
             color: var(--status-warning);
             font-size: var(--text-size-xxxs);
             align-items: center;
+            background-color: var(--status-warning-transparent);
         }
         &--failed {
             border-color: var(--status-danger);
             color: var(--status-danger);
+            background-color: var(--status-danger-transparent);
         }
 
         &--icon {

packages/shared/src/styles/themes.scss

@@ -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