From 4acc8be926bd5150d40952d42c63ce8c81b229ee Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 25 Oct 2021 01:44:24 -0300
Subject: [PATCH] UI tweaks

---
 src/address/ContractABI.tsx     | 10 +++++-----
 src/address/DecodedABI.tsx      |  2 +-
 src/address/DecodedFragment.tsx |  7 ++++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/address/ContractABI.tsx b/src/address/ContractABI.tsx
index 086d92c..edd713c 100644
--- a/src/address/ContractABI.tsx
+++ b/src/address/ContractABI.tsx
@@ -12,7 +12,11 @@ type ContractABIProps = {
 const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
   <div className="mb-3">
     <Tab.Group>
-      <Tab.List className="flex space-x-1 mb-1">
+      <Tab.List className="flex items-baseline space-x-1 mb-1">
+        <div className="flex items-baseline space-x-2 text-sm pr-2 py-1">
+          <span>ABI</span>
+          <Copy value={JSON.stringify(abi)} />
+        </div>
         <ModeTab>Decoded</ModeTab>
         <ModeTab>Raw</ModeTab>
       </Tab.List>
@@ -21,10 +25,6 @@ const ContractABI: React.FC<ContractABIProps> = ({ abi }) => (
           <DecodedABI abi={abi} />
         </Tab.Panel>
         <Tab.Panel>
-          <div className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
-            <span>ABI</span>
-            <Copy value={JSON.stringify(abi)} />
-          </div>
           <RawABI abi={abi} />
         </Tab.Panel>
       </Tab.Panels>
diff --git a/src/address/DecodedABI.tsx b/src/address/DecodedABI.tsx
index 1de994d..587538a 100644
--- a/src/address/DecodedABI.tsx
+++ b/src/address/DecodedABI.tsx
@@ -9,7 +9,7 @@ type DecodedABIProps = {
 const DecodedABI: React.FC<DecodedABIProps> = ({ abi }) => {
   const intf = new Interface(abi);
   return (
-    <div className="mt-3 space-y-2">
+    <div className="border">
       {intf.fragments.map((f, i) => (
         <DecodedFragment key={i} intf={intf} fragment={f} />
       ))}
diff --git a/src/address/DecodedFragment.tsx b/src/address/DecodedFragment.tsx
index 33e694c..991865a 100644
--- a/src/address/DecodedFragment.tsx
+++ b/src/address/DecodedFragment.tsx
@@ -6,6 +6,8 @@ import {
   FunctionFragment,
   Interface,
 } from "@ethersproject/abi";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretRight } from "@fortawesome/free-solid-svg-icons/faCaretRight";
 
 type DecodedFragmentProps = {
   intf: Interface;
@@ -34,7 +36,10 @@ const DecodedFragment: React.FC<DecodedFragmentProps> = ({
   }
 
   return (
-    <div className="flex items-baseline space-x-1">
+    <div className="flex items-baseline space-x-2 px-2 py-1 hover:bg-gray-100">
+      <span className="text-gray-500">
+        <FontAwesomeIcon icon={faCaretRight} size="1x" />
+      </span>
       {letter && (
         <span
           className={`flex-shrink-0 text-xs font-code border border-gray-300 rounded-full w-5 h-5 self-center flex items-center justify-center text-white font-bold ${letterBg}`}