From c7b36152a810f40407a7f9136c9c51c55242dfa5 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 28 Jul 2021 19:16:02 -0300
Subject: [PATCH] Burnt fees new layout

---
 src/transaction/Details.tsx     |  2 +-
 src/transaction/RewardSplit.tsx | 63 +++++++++++++++++++++------------
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 1a1cd64..d7491f8 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -190,7 +190,7 @@ const Details: React.FC<DetailsProps> = ({
         </>
       )}
       <InfoRow title="Transaction Fee">
-        <div className="space-y-2">
+        <div className="space-y-3">
           <div>
             <FormattedBalance value={txData.fee} /> Ether
           </div>
diff --git a/src/transaction/RewardSplit.tsx b/src/transaction/RewardSplit.tsx
index 37069fc..a9ffd85 100644
--- a/src/transaction/RewardSplit.tsx
+++ b/src/transaction/RewardSplit.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBurn, faCoins } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleRight,
+  faBurn,
+  faCoins,
+} from "@fortawesome/free-solid-svg-icons";
 import FormattedBalance from "../components/FormattedBalance";
 import { TransactionData } from "../types";
 
@@ -16,37 +20,50 @@ const RewardSplit: React.FC<RewardSplitProps> = ({ txData }) => {
     100;
 
   return (
-    <div className="inline-flex space-x-2">
-      <span className="flex space-x-1 text-orange-500">
-        <span title="Burnt fees">
-          <FontAwesomeIcon icon={faBurn} size="1x" />
-        </span>
-        <span>
-          <span className="line-through">
-            <FormattedBalance value={burntFees} />
-          </span>{" "}
-          Ether
-        </span>
-      </span>
-      <span className="flex space-x-1">
-        <span className="text-yellow-300" title="Miner fees">
-          <FontAwesomeIcon icon={faCoins} size="1x" />
-        </span>
-        <span>
-          <FormattedBalance value={minerReward} /> Ether
-        </span>
-      </span>
-      <div className="self-center w-40 border rounded border-gray-200">
+    <div className="space-y-2">
+      <div
+        className="self-center w-40 border rounded border-gray-200"
+        title="Burnt Fees Percentage"
+      >
         <div className="w-full h-5 rounded bg-orange-500 relative">
           <div
             className="absolute top-0 right-0 bg-yellow-200 h-full rounded-r"
             style={{ width: `${100 - burntPerc}%` }}
           ></div>
-          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-gray-600">
+          <div className="w-full h-full absolute flex mix-blend-multiply text-sans text-orange-800">
             <span className="m-auto">{burntPerc}%</span>
           </div>
         </div>
       </div>
+      <div className="flex items-baseline space-x-1 text-sm">
+        <span className="text-gray-500">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" />
+        </span>
+        <span className="flex space-x-1 text-orange-500">
+          <span title="Burnt fees">
+            <FontAwesomeIcon icon={faBurn} size="1x" />
+          </span>
+          <span>
+            <span className="line-through">
+              <FormattedBalance value={burntFees} />
+            </span>{" "}
+            Ether
+          </span>
+        </span>
+      </div>
+      <div className="flex items-baseline space-x-1 text-sm">
+        <span className="text-gray-500">
+          <FontAwesomeIcon icon={faAngleRight} size="1x" />
+        </span>
+        <span className="flex space-x-1">
+          <span className="text-yellow-300" title="Miner fees">
+            <FontAwesomeIcon icon={faCoins} size="1x" />
+          </span>
+          <span>
+            <FormattedBalance value={minerReward} /> Ether
+          </span>
+        </span>
+      </div>
     </div>
   );
 };