fix: layout issue when stacking, ref #4851

leather-io · Jan 24, 2024 · 6489805 · 6489805
1 parent 988e23f
commit 6489805
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/src/app/components/caption-dot-separator.tsx b/src/app/components/caption-dot-separator.tsx
@@ -1,13 +1,9 @@
 import { cloneElement, isValidElement } from 'react';
 
-import { BoxProps, styled } from 'leather-styles/jsx';
+import { Circle, CircleProps } from 'leather-styles/jsx';
 
-function CaptionSeparatorDot(props: BoxProps) {
-  return (
-    <styled.span color="accent.text-subdued" fontSize="10px" {...props}>
-      •
-    </styled.span>
-  );
+export function CaptionSeparatorDot(props: CircleProps) {
+  return <Circle display="inline-flex" backgroundColor="currentColor" size="3px" {...props} />;
 }
 
 interface CaptionDotSeparatorProps {

diff --git a/src/app/components/crypto-assets/components/asset-row-grid.tsx b/src/app/components/crypto-assets/components/asset-row-grid.tsx
@@ -22,7 +22,13 @@ export function AssetRowGrid({
     <GridItem textAlign="right">{balance}</GridItem>
   );
   return (
-    <Grid columns={2} gridTemplateColumns="2fr 1fr" gridTemplateRows={2} gap={0}>
+    <Grid
+      columns={2}
+      gridTemplateColumns="2fr 1fr"
+      gridTemplateRows={2}
+      gap={0}
+      whiteSpace="nowrap"
+    >
       <GridItem textAlign="left" whiteSpace="nowrap" overflow="hidden" textOverflow="ellipsis">
         {title}
       </GridItem>

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
@@ -79,11 +79,17 @@ export function CryptoCurrencyAssetItemLayout({
               </styled.span>
             </BasicTooltip>
           }
-          caption={<styled.span textStyle="caption.02">{caption}</styled.span>}
+          caption={
+            <styled.span textStyle="caption.02" color="accent.text-subdued">
+              {caption}
+            </styled.span>
+          }
           usdBalance={
             <Flex justifyContent="flex-end">
               {balance.amount.toNumber() > 0 && address ? (
-                <styled.span textStyle="caption.02">{usdBalance}</styled.span>
+                <styled.span textStyle="caption.02" color="accent.text-subdued">
+                  {usdBalance}
+                </styled.span>
               ) : null}
               {additionalUsdBalanceInfo}
             </Flex>

diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx
@@ -1,5 +1,8 @@
+import { styled } from 'leather-styles/jsx';
+
 import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
+import { CaptionSeparatorDot } from '@app/components/caption-dot-separator';
 import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
@@ -20,11 +23,17 @@ export function StacksAssetList({ account }: StacksAssetListProps) {
     useStxBalance();
 
   const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
-    <>({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked)</>
+    <styled.span>
+      <CaptionSeparatorDot mr="space.01" pos="relative" top="-2px" />
+      {ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked
+    </styled.span>
   ) : undefined;
 
   const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
-    <Caption ml="4px">({stxUsdLockedBalance} locked)</Caption>
+    <Caption ml="4px">
+      <CaptionSeparatorDot mr="space.01" pos="relative" top="-1px" />
+      {stxUsdLockedBalance} locked
+    </Caption>
   ) : undefined;
 
   return (