From c804b192846049bcb86d7278bcd2a96a90e7caae Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 6 Apr 2022 00:27:35 -0300
Subject: [PATCH] Revamp token transfer list table

---
 src/TokenTransferItem.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index 0869a17..f616922 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
+import { faSackDollar } from "@fortawesome/free-solid-svg-icons/faSackDollar";
 import TransactionAddress from "./components/TransactionAddress";
 import ValueHighlighter from "./components/ValueHighlighter";
 import FormattedBalance from "./components/FormattedBalance";
@@ -26,12 +27,8 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
 }) => {
   return (
     <div className="flex items-baseline space-x-2 px-2 py-1 truncate hover:bg-gray-100">
-      <span className="text-gray-500">
-        <FontAwesomeIcon icon={faCaretRight} size="1x" />
-      </span>
-      <div className="grid grid-cols-7 gap-x-1 w-full">
-        <div className="col-span-2 flex space-x-1">
-          <span className="font-bold">From</span>
+      <div className="grid grid-cols-4 gap-x-1 w-full items-baseline">
+        <div className="flex items-baseline space-x-1">
           <TransactionAddress
             address={t.from}
             addressCtx={AddressContext.FROM}
@@ -39,8 +36,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             showCodeIndicator
           />
         </div>
-        <div className="col-span-2 flex space-x-1">
-          <span className="font-bold">To</span>
+        <div className="flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faCaretRight} size="1x" />
+          </span>
           <TransactionAddress
             address={t.to}
             addressCtx={AddressContext.TO}
@@ -48,8 +47,10 @@ const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
             showCodeIndicator
           />
         </div>
-        <div className="col-span-3 flex space-x-1">
-          <span className="font-bold">For</span>
+        <div className="col-span-2 flex items-baseline space-x-1">
+          <span className="text-gray-500">
+            <FontAwesomeIcon icon={faSackDollar} size="1x" />
+          </span>
           <span>
             <ValueHighlighter value={t.value}>
               <FormattedBalance