fix: [lw-12560] align banxa banner with latest figma

Author: vetalcore

apps/browser-extension-wallet/src/views/browser-view/components/TopUpWallet/SvgBtcComponentTransparent.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React, { SVGProps } from 'react';
 
-// TODO: Mode to lace UI toolkit
+// TODO: Move to lace UI toolkit
 const SvgBtcComponentTransparent = (props: SVGProps<SVGSVGElement>) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={25} height={25} fill="none" {...props}>
+  <svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
-      d="M10 6V4M14 6V4M14 6H7M14 6C15.6569 6 17 7.34315 17 9C17 10.6569 15.6569 12 14 12M9 18L9 12M9 6V12M10 20V18M14 20V18M9 12H15C16.6569 12 18 13.3431 18 15C18 16.6569 16.6569 18 15 18H7"
-      stroke="#FFFFFF"
+      d="M4.66361 3.03V0.329999H5.81561V3.03H4.66361ZM2.25161 3.03V0.329999H3.40361V3.03H2.25161ZM4.66361 16.764V14.064H5.81561V16.764H4.66361ZM2.25161 16.764V14.064H3.40361V16.764H2.25161ZM0.595609 15V2.148H3.54761C4.55561 2.148 5.39561 2.25 6.06761 2.454C6.75161 2.658 7.26161 2.994 7.59761 3.462C7.94561 3.93 8.11961 4.554 8.11961 5.334C8.11961 5.838 8.03561 6.288 7.86761 6.684C7.71161 7.068 7.47161 7.392 7.14761 7.656C6.83561 7.908 6.44561 8.082 5.97761 8.178V8.268C6.45761 8.352 6.88361 8.508 7.25561 8.736C7.63961 8.964 7.93961 9.288 8.15561 9.708C8.38361 10.128 8.49761 10.674 8.49761 11.346C8.49761 12.126 8.32961 12.792 7.99361 13.344C7.66961 13.884 7.20161 14.298 6.58961 14.586C5.97761 14.862 5.24561 15 4.39361 15H0.595609ZM3.87161 7.62C4.85561 7.62 5.52761 7.446 5.88761 7.098C6.25961 6.738 6.44561 6.21 6.44561 5.514C6.44561 4.806 6.21761 4.302 5.76161 4.002C5.31761 3.69 4.60361 3.534 3.61961 3.534H2.21561V7.62H3.87161ZM2.21561 8.97V13.632H4.08761C5.08361 13.632 5.77961 13.41 6.17561 12.966C6.57161 12.522 6.76961 11.94 6.76961 11.22C6.76961 10.764 6.67961 10.368 6.49961 10.032C6.33161 9.696 6.04361 9.438 5.63561 9.258C5.22761 9.066 4.66961 8.97 3.96161 8.97H2.21561Z"
+      fill="white"
     />
   </svg>
 );

apps/browser-extension-wallet/src/views/browser-view/components/TopUpWallet/TopUpWallet.module.scss

@@ -8,11 +8,12 @@
   align-self: start;
   border-radius: size_unit(2);
   background: var(--primary-gradient);
-  display: flex;  
-  align-items: center; 
-  justify-content: center;   
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0 size_unit(1);
   height: 20px;
+  margin-bottom: 10px;
 }
 .badgeCaption {
   color: var(--color-white, #fff) !important;
@@ -26,10 +27,6 @@
   color: var(--light-mode-dark-grey, var(--dark-mode-light-grey, #6f7786));
 }
 
-.disclaimerShort {
-  color: var(--light-mode-mid-grey, var(--dark-mode-light-grey, #c0c0c0)) !important;
-}
-
 .disclaimerFullWrapper {
   text-align: center;
 }

apps/browser-extension-wallet/src/views/browser-view/components/TopUpWallet/TopUpWalletCard.tsx

@@ -12,29 +12,27 @@ export const TopUpWalletCard = (): React.ReactElement => {
 
   return (
     <Card.Outlined className={styles.card} data-testid="top-up-wallet-card">
-      <Flex flexDirection="column" mx="$20" my="$20" gap="$6" alignItems="stretch">
+      <Flex flexDirection="column" mx="$20" my="$28" py="$2" alignItems="stretch">
         <div className={styles.titleBadge} data-testid="top-up-wallet-card-badge">
           <Text.Label className={styles.badgeCaption} weight="$medium">
             {t('browserView.assets.topupWallet.card.badge')}
           </Text.Label>
         </div>
-        <Flex my="$10">
-          <Text.SubHeading weight="$bold" data-testid="top-up-wallet-card-title">
-            {t('browserView.assets.topupWallet.card.title')}
-          </Text.SubHeading>
-        </Flex>
-        <Flex flexDirection="column" alignItems="stretch" gap="$16" mt="$10">
+        <Text.SubHeading weight="$bold" data-testid="top-up-wallet-card-title">
+          {t('browserView.assets.topupWallet.card.title')}
+        </Text.SubHeading>
+        <Flex flexDirection="column" alignItems="stretch" gap="$16">
           <Text.Body.Normal weight="$medium" color="secondary" data-testid="top-up-wallet-card-subtitle">
             {!isBitcoin
               ? t('browserView.assets.topupWallet.buyButton.title')
               : t('browserView.assets.topupWallet.buyButtonBtc.title')}
           </Text.Body.Normal>
           <TopUpWalletButton />
-          <Text.Label weight="$medium" className={styles.disclaimerShort} data-testid="top-up-wallet-card-disclaimer">
+          <Text.Body.Normal weight="$medium" color="secondary" data-testid="top-up-wallet-card-disclaimer">
             {!isBitcoin
               ? t('browserView.assets.topupWallet.disclaimer.short')
               : t('browserView.assets.topupWallet.disclaimer.shortBtc')}
-          </Text.Label>
+          </Text.Body.Normal>
         </Flex>
       </Flex>
     </Card.Outlined>