fix: activity list items

src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx

@@ -23,13 +23,12 @@
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { BtcIcon } from '@app/ui/components/icons/btc-icon';
+import { Caption } from '@app/ui/components/typography/caption';
 
 import { TransactionItemLayout } from '../transaction-item/transaction-item.layout';
-import { BitcoinTransactionCaption } from './bitcoin-transaction-caption';
 import { BitcoinTransactionIcon } from './bitcoin-transaction-icon';
 import { InscriptionIcon } from './bitcoin-transaction-inscription-icon';
 import { BitcoinTransactionStatus } from './bitcoin-transaction-status';
-import { BitcoinTransactionValue } from './bitcoin-transaction-value';
 
 interface BitcoinTransactionItemProps {
   transaction: BitcoinTx;
@@ -46,7 +45,7 @@
     },
   });
 
   const bitcoinAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
   const caption = useMemo(() => getBitcoinTxCaption(transaction), [transaction]);
@@ -76,13 +75,10 @@
 
   const txCaption = (
     <BulletSeparator>
-      <BitcoinTransactionCaption>{caption}</BitcoinTransactionCaption>
-      {inscriptionData ? (
-        <BitcoinTransactionCaption>{inscriptionData.mime_type}</BitcoinTransactionCaption>
-      ) : null}
+      <Caption>{caption}</Caption>
+      {inscriptionData ? <Caption>{inscriptionData.mime_type}</Caption> : null}
     </BulletSeparator>
   );
-  const txValue = <BitcoinTransactionValue>{value}</BitcoinTransactionValue>;
 
   const title = inscriptionData ? `Ordinal inscription #${inscriptionData.number}` : 'Bitcoin';
   const increaseFeeButton = (
@@ -107,7 +103,7 @@
       }
       txStatus={<BitcoinTransactionStatus transaction={transaction} />}
       txTitle={<TransactionTitle title={title} />}
-      txValue={txValue}
+      txValue={value}
     />
   );
 }

src/app/components/bitcoin-transaction-item/bitcoin-transaction-status.tsx

@@ -1,6 +1,7 @@
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 
-import { PendingLabel } from '@app/components/transaction/pending-label';
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Caption } from '@app/ui/components/typography/caption';
 
 interface BitcoinTransactionStatusProps {
   transaction: BitcoinTx;
@@ -10,5 +11,9 @@ const pendingWaitingMessage =
 
 export function BitcoinTransactionStatus({ transaction }: BitcoinTransactionStatusProps) {
   const isPending = !transaction.status.confirmed;
-  return isPending ? <PendingLabel pendingWaitingMessage={pendingWaitingMessage} /> : null;
+  return isPending ? (
+    <BasicTooltip asChild label={pendingWaitingMessage} side="bottom">
+      <Caption color="warning.label">Pending</Caption>
+    </BasicTooltip>
+  ) : null;
 }

src/app/components/stacks-transaction-item/increase-fee-button.tsx

@@ -26,7 +26,7 @@ export function IncreaseFeeButton(props: IncreaseFeeButtonProps) {
       position="relative"
       px="space.02"
       py="space.01"
-      rounded="8px"
+      rounded="xs"
       type="button"
       zIndex={999}
     >

src/app/components/stacks-transaction-item/stacks-transaction-item.tsx

@@ -1,7 +1,5 @@
 import { createSearchParams, useLocation, useNavigate } from 'react-router-dom';
 
-import { styled } from 'leather-styles/jsx';
-
 import { StacksTx, TxTransferDetails } from '@shared/models/transactions/stacks-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
 
@@ -85,22 +83,16 @@ export function StacksTransactionItem({
     />
   );
   const txStatus = transaction && <StacksTransactionStatus transaction={transaction} />;
-  const txCaption = (
-    <styled.span color="accent.text-subdued" textStyle="caption.02" whiteSpace="nowrap">
-      {caption}
-    </styled.span>
-  );
-  const txValue = <styled.span textStyle="label.02">{value}</styled.span>;
 
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
       rightElement={isOriginator && isPending ? increaseFeeButton : undefined}
-      txCaption={txCaption}
+      txCaption={caption}
       txIcon={txIcon}
       txStatus={txStatus}
       txTitle={<TransactionTitle title={title} />}
-      txValue={txValue}
+      txValue={value}
     />
   );
 }

src/app/components/stacks-transaction-item/stacks-transaction-status.tsx

@@ -1,11 +1,11 @@
-import { styled } from 'leather-styles/jsx';
-
 import { StacksTx } from '@shared/models/transactions/stacks-transaction.model';
 
 import { isPendingTx } from '@app/common/transactions/stacks/transaction.utils';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+import { Caption } from '@app/ui/components/typography/caption';
 
-import { PendingLabel } from '../transaction/pending-label';
+const pendingWaitingMessage =
+  'This transaction is waiting to be confirmed. Depending on network congestion, this may take anywhere from a few minutes, to a couple of hours.';
 
 interface TransactionStatusProps {
   transaction: StacksTx;
@@ -16,12 +16,14 @@ export function StacksTransactionStatus({ transaction }: TransactionStatusProps)
 
   return (
     <>
-      {isPending && <PendingLabel />}
+      {isPending && (
+        <BasicTooltip asChild label={pendingWaitingMessage} side="bottom">
+          <Caption color="warning.label">Pending</Caption>
+        </BasicTooltip>
+      )}
       {isFailed && (
         <BasicTooltip label={transaction.tx_status} side="bottom">
-          <styled.span color="error.label" textStyle="label.03">
-            Failed
-          </styled.span>
+          <Caption color="error.label">Failed</Caption>
         </BasicTooltip>
       )}
     </>

src/app/components/transaction-item/transaction-item.layout.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { HStack, styled } from 'leather-styles/jsx';
 
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { Caption } from '@app/ui/components/typography/caption';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
@@ -25,18 +26,15 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    // TODO: Revisit if needed styles position="relative" zIndex={99}
     <ItemInteractive onClick={openTxLink}>
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
         captionLeft={
-          <>
-            <styled.span color="accent.text-subdued" textStyle="caption.01">
-              {txCaption}
-            </styled.span>
+          <HStack alignItems="center">
+            <Caption>{txCaption}</Caption>
             {txStatus && txStatus}
-          </>
+          </HStack>
         }
         titleRight={
           rightElement ? (

src/app/components/transaction/transaction-title.tsx

@@ -22,10 +22,11 @@ export function TransactionTitle(props: TransactionTitleProps) {
   return (
     <BasicTooltip disabled={!isEllipsisActive} label={title} side="top">
       <Title
-        fontWeight="normal"
+        fontWeight={500}
         overflow="hidden"
         ref={ref}
         textOverflow="ellipsis"
+        textStyle="label.02"
         whiteSpace="nowrap"
       >
         {spamFilter(title)}