From f3213b3c6939eaf66ff5472b29a29e01a6ea5338 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 14 Jul 2021 15:35:53 -0300
Subject: [PATCH] Fix spacing and alignment due to addresss highlight feature

---
 src/TokenTransferItem.tsx           |  8 ++--
 src/Transaction.tsx                 |  4 +-
 src/components/InternalTransfer.tsx | 64 +++++++++++++++--------------
 src/search/ResultHeader.tsx         |  4 +-
 4 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index b341f0d..4b1fc62 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -21,20 +21,20 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
     <span className="text-gray-500">
       <FontAwesomeIcon icon={faCaretRight} size="1x" />
     </span>
-    <div className="grid grid-cols-5">
-      <div className="flex space-x-2">
+    <div className="grid grid-cols-5 gap-x-1">
+      <div className="flex space-x-1">
         <span className="font-bold">From</span>
         <AddressHighlighter address={t.from}>
           <AddressOrENSName address={t.from} />
         </AddressHighlighter>
       </div>
-      <div className="flex space-x-2">
+      <div className="flex space-x-1">
         <span className="font-bold">To</span>
         <AddressHighlighter address={t.to}>
           <AddressOrENSName address={t.to} />
         </AddressHighlighter>
       </div>
-      <div className="col-span-3 flex space-x-2">
+      <div className="col-span-3 flex space-x-1">
         <span className="font-bold">For</span>
         <span>
           <FormattedBalance
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 4235c3e..6c646fb 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -209,7 +209,7 @@ const Transaction: React.FC = () => {
                   <Timestamp value={txData.timestamp} />
                 </InfoRow>
                 <InfoRow title="From">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.from}>
                       <AddressOrENSName
                         address={txData.from}
@@ -220,7 +220,7 @@ const Transaction: React.FC = () => {
                   </div>
                 </InfoRow>
                 <InfoRow title="Interacted With (To)">
-                  <div className="flex items-baseline space-x-2">
+                  <div className="flex items-baseline space-x-2 -ml-1">
                     <AddressHighlighter address={txData.to}>
                       <AddressOrENSName
                         address={txData.to}
diff --git a/src/components/InternalTransfer.tsx b/src/components/InternalTransfer.tsx
index e2f19d1..c135a43 100644
--- a/src/components/InternalTransfer.tsx
+++ b/src/components/InternalTransfer.tsx
@@ -25,36 +25,40 @@ const InternalTransfer: React.FC<InternalTransferProps> = ({
         <FontAwesomeIcon icon={faAngleRight} size="1x" /> TRANSFER
       </span>
       <span>{ethers.utils.formatEther(transfer.value)} Ether</span>
-      <span className="text-gray-500">From</span>
-      <AddressHighlighter address={transfer.from}>
-        <div
-          className={`flex items-baseline space-x-1 ${
-            fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {fromMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.from} />
-        </div>
-      </AddressHighlighter>
-      <span className="text-gray-500">To</span>
-      <AddressHighlighter address={transfer.to}>
-        <div
-          className={`flex items-baseline space-x-1 px-2 py-1 ${
-            toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
-          }`}
-        >
-          {toMiner && (
-            <span className="text-yellow-400" title="Miner address">
-              <FontAwesomeIcon icon={faCoins} size="1x" />
-            </span>
-          )}
-          <AddressLink address={transfer.to} />
-        </div>
-      </AddressHighlighter>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">From</span>
+        <AddressHighlighter address={transfer.from}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              fromMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {fromMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.from} />
+          </div>
+        </AddressHighlighter>
+      </div>
+      <div className="flex items-baseline">
+        <span className="text-gray-500">To</span>
+        <AddressHighlighter address={transfer.to}>
+          <div
+            className={`flex items-baseline space-x-1 ${
+              toMiner ? "rounded px-2 py-1 bg-yellow-100" : ""
+            }`}
+          >
+            {toMiner && (
+              <span className="text-yellow-400" title="Miner address">
+                <FontAwesomeIcon icon={faCoins} size="1x" />
+              </span>
+            )}
+            <AddressLink address={transfer.to} />
+          </div>
+        </AddressHighlighter>
+      </div>
     </div>
   );
 };
diff --git a/src/search/ResultHeader.tsx b/src/search/ResultHeader.tsx
index 0b63c90..13880bd 100644
--- a/src/search/ResultHeader.tsx
+++ b/src/search/ResultHeader.tsx
@@ -15,8 +15,8 @@ const ResultHeader: React.FC<ResultHeaderProps> = ({
     <div>Method</div>
     <div>Block</div>
     <div>Age</div>
-    <div className="col-span-2">From</div>
-    <div className="col-span-2">To</div>
+    <div className="col-span-2 ml-1">From</div>
+    <div className="col-span-2 ml-1">To</div>
     <div className="col-span-2">Value</div>
     <div>
       <button