fix: regression on stacking layout

leather-io · Mar 6, 2024 · b4a9522 · b4a9522
1 parent 5b37691
commit b4a9522
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 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
@@ -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
@@ -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 (