From f532cde7e1fa580f4e227f1fafdcdf1658935c96 Mon Sep 17 00:00:00 2001
From: kyranjamie <kyran.burraston@gmail.com>
Date: Mon, 4 Mar 2024 12:55:39 +0100
Subject: [PATCH] fix: item interactive margins

---
 .../components/brc20-token-asset-item.layout.tsx            | 2 +-
 .../crypto-currency-asset-item.layout.tsx                   | 2 +-
 .../stacks-fungible-token-asset-item.layout.tsx             | 2 +-
 .../components/transaction-item/transaction-item.layout.tsx | 2 +-
 src/app/pages/receive/components/receive-item.tsx           | 2 +-
 .../swap/swap-choose-asset/components/swap-asset-item.tsx   | 6 +++++-
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
index 23bbbdae530..fc140fd769d 100644
--- a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -29,7 +29,7 @@ export function Brc20TokenAssetItemLayout({
       label="Not enough BTC in balance"
       side="top"
     >
-      <ItemInteractive onClick={onClick}>
+      <ItemInteractive onClick={onClick} my="space.02">
         <ItemLayout
           flagImg={<Brc20AvatarIcon />}
           titleLeft={token.ticker}
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 0efb73b7727..41d014c4164 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
@@ -35,7 +35,7 @@ export function CryptoCurrencyAssetItemLayout({
     parseCryptoCurrencyAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick}>
+    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={icon}
         titleLeft={title}
diff --git a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
index 79b0f6fc747..50ab3468b3b 100644
--- a/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -21,7 +21,7 @@ export function StacksFungibleTokenAssetItemLayout({
     parseStacksFungibleTokenAssetBalance(assetBalance);
 
   return (
-    <ItemInteractive data-testid={dataTestId} onClick={onClick}>
+    <ItemInteractive data-testid={dataTestId} onClick={onClick} my="space.02">
       <ItemLayout
         flagImg={
           <StacksAssetAvatar
diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
index 921b9f66998..38514a301cf 100644
--- a/src/app/components/transaction-item/transaction-item.layout.tsx
+++ b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -26,7 +26,7 @@ export function TransactionItemLayout({
   txValue,
 }: TransactionItemLayoutProps) {
   return (
-    <ItemInteractive onClick={openTxLink}>
+    <ItemInteractive onClick={openTxLink} my="space.02">
       <ItemLayout
         flagImg={txIcon && txIcon}
         titleLeft={txTitle}
diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
index 0a663cb96d4..8985584ba17 100644
--- a/src/app/pages/receive/components/receive-item.tsx
+++ b/src/app/pages/receive/components/receive-item.tsx
@@ -23,7 +23,7 @@ export function ReceiveItem({
 }: ReceiveItemProps) {
   if (!address) return null;
   return (
-    <ItemInteractive>
+    <ItemInteractive my="space.02">
       <ItemWithButtonsLayout
         flagImg={icon}
         title={title}
diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
index 9eace6bc9b0..4e4a5429d0d 100644
--- a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
+++ b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -23,7 +23,11 @@ export function SwapAssetItem({ asset, onClick }: SwapAssetItemProps) {
   const fallback = getAvatarFallback(asset.name);
 
   return (
-    <ItemInteractive data-testid={SwapSelectors.ChooseAssetListItem} onClick={onClick}>
+    <ItemInteractive
+      data-testid={SwapSelectors.ChooseAssetListItem}
+      onClick={onClick}
+      my="space.02"
+    >
       <ItemLayout
         flagImg={
           <Avatar.Root>