From b4a952292fb79f08809b79b25b4113a9653001f2 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Wed, 6 Mar 2024 10:38:18 +0100
Subject: [PATCH] fix: regression on stacking layout

---
 .../crypto-currency-asset-item.layout.tsx         | 15 ++++++++++-----
 .../asset-list/components/stacks-asset-list.tsx   |  7 +------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index 41d014c4164..6d8f0e40e8a 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
+import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -57,10 +58,14 @@ export function CryptoCurrencyAssetItemLayout({
         }
         captionRight={
           !rightElement && (
-            <>
-              <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
-              {additionalUsdBalanceInfo}
-            </>
+            <Caption>
+              <Flex alignItems="center" gap="space.02" color="inherit">
+                <BulletSeparator>
+                  <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
+                  {additionalUsdBalanceInfo}
+                </BulletSeparator>
+              </Flex>
+            </Caption>
           )
         }
       />
diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx
index f92f68276d1..e764a9c2237 100644
--- a/src/app/features/asset-list/components/stacks-asset-list.tsx
+++ b/src/app/features/asset-list/components/stacks-asset-list.tsx
@@ -6,7 +6,6 @@ import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/cry
 import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
-import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { Caption } from '@app/ui/components/typography/caption';
 
 import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list';
@@ -22,16 +21,12 @@ export function StacksAssetList({ account }: StacksAssetListProps) {
 
   const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
     <styled.span>
-      <BulletOperator mr="space.01" pos="relative" />
       {ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked
     </styled.span>
   ) : undefined;
 
   const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
-    <Caption ml="4px">
-      <BulletOperator mr="space.01" pos="relative" />
-      {stxUsdLockedBalance} locked
-    </Caption>
+    <Caption>{stxUsdLockedBalance} locked</Caption>
   ) : undefined;
 
   return (