[Wallet] george / Fix UI inconsistencies in CashierWalletHeader compo…

…nent (#11145)

* style: 💄 fix icon xl size, jurisdiction badge, text xl line-height size

* style: 💄 add gap in mobile view

* style: 🎨 replace svg fiat currency icons with proper ones

packages/wallets/src/components/Base/WalletText/WalletText.scss

@@ -35,7 +35,7 @@ $desktop-font-size-map: (
     ),
     'xl': (
         size: 2.4rem,
-        line_height: 3.4rem,
+        line_height: 3.6rem,
     ),
     '2xl': (
         size: 3.2rem,

packages/wallets/src/components/WalletCardIcon/WalletCardIcon.tsx

@@ -36,7 +36,7 @@ const typeToWidthMapper = {
         lg: { desktop: 48, mobile: 32 },
         md: { desktop: 24, mobile: 24 },
         sm: { desktop: 16, mobile: 16 },
-        xl: { desktop: 56, mobile: 48 },
+        xl: { desktop: 64, mobile: 48 },
     },
 };
 

packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.scss

@@ -1,21 +1,20 @@
 .wallets-list-card {
     &__badge {
         display: flex;
-        padding: 0rem 0.4rem;
+        padding-inline: 0.4rem;
         justify-content: center;
         align-items: center;
-        gap: 0.4rem;
+        height: 1.4rem;
         border-radius: 0.2rem;
-        border: 0.1rem solid var(--system-light-1-prominent-text, #333);
+        outline: 0.1rem solid var(--system-light-1-prominent-text, #333);
+
+        @include mobile {
+            height: 1.2rem;
+        }
 
         &--demo {
-            display: flex;
-            padding: 0.1rem 0.6rem;
-            justify-content: center;
-            align-items: center;
-            gap: 0.4rem;
-            border-radius: 0.2rem;
             background: var(--status-light-information, #377cfc);
+            outline: none;
         }
     }
 }

packages/wallets/src/components/WalletListCardBadge/WalletListCardBadge.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { THooks } from '../../types';
 import { WalletText } from '../Base';
 import './WalletListCardBadge.scss';
@@ -9,17 +10,17 @@ type TProps = {
 };
 
 const WalletListCardBadge: React.FC<TProps> = ({ isDemo, label }) => {
-    const className = isDemo ? 'wallets-list-card__badge--demo' : 'wallets-list-card__badge';
+    const className = classNames('wallets-list-card__badge', {
+        'wallets-list-card__badge--demo': isDemo,
+    });
 
     const formattedLabel = label === 'virtual' ? 'Demo' : label?.toUpperCase() || 'SVG';
 
     return (
         <div className={className}>
-            <div className='wallets-list-card__name'>
-                <WalletText color={isDemo ? 'white' : 'black'} size='2xs' weight='bold'>
-                    {formattedLabel}
-                </WalletText>
-            </div>
+            <WalletText color={isDemo ? 'white' : 'black'} size='2xs' weight='bold'>
+                {formattedLabel}
+            </WalletText>
         </div>
     );
 };

packages/wallets/src/features/cashier/components/WalletCashierHeader/WalletCashierHeader.scss

@@ -30,19 +30,21 @@
     &__top-left-info {
         display: flex;
         flex-direction: column;
-        gap: 0.6rem;
+
+        @include mobile {
+            gap: 0.4rem;
+        }
     }
 
     &__details {
         display: flex;
-        gap: 2.4rem;
+        gap: 0.8rem;
         align-items: center;
 
         @include mobile {
             opacity: 1;
             max-height: 2rem;
             transition: opacity 0.25s ease, max-height 0.25s ease;
-            gap: 0.8rem;
 
             &--hide-details {
                 max-height: 0;