From a738ad2ae32bc8c36297a281ac14507a06c5574f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 30 Jul 2021 05:18:28 -0300
Subject: [PATCH] Better formatting

---
 src/Home.tsx                    | 12 +++++++++++-
 src/special/london/BlockRow.tsx |  6 +++---
 src/special/london/Blocks.tsx   |  8 +++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index fc969a2..c7a7a3f 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -1,6 +1,8 @@
 import React, { useState, useContext } from "react";
 import { NavLink, useHistory } from "react-router-dom";
 import { ethers } from "ethers";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBurn } from "@fortawesome/free-solid-svg-icons";
 import Logo from "./Logo";
 import Timestamp from "./components/Timestamp";
 import { RuntimeContext } from "./useRuntime";
@@ -56,7 +58,15 @@ const Home: React.FC = () => {
         </button>
         <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
           <NavLink to="/special/london">
-            Check the special dashboard for EIP-1559
+            <div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
+              <span>
+                <FontAwesomeIcon icon={faBurn} />
+              </span>
+              <span>Check the special dashboard for EIP-1559</span>
+              <span>
+                <FontAwesomeIcon icon={faBurn} />
+              </span>
+            </div>
           </NavLink>
         </div>
         {latestBlock && (
diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx
index 890446c..6331cdb 100644
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -34,14 +34,14 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
       >
         {ethers.utils.commify(block.gasUsed.toString())}
       </div>
-      <div className="text-right">
+      <div className="text-right text-gray-400">
         {ethers.utils.commify(gasTarget.toString())}
       </div>
       <div className="text-right">{block.baseFeePerGas?.toString()} wei</div>
       <div className="text-right col-span-2">
         {ethers.utils.commify(ethers.utils.formatEther(totalReward))} Ether
       </div>
-      <div className="text-right">
+      <div className="text-right line-through text-orange-500">
         {ethers.utils.commify(
           ethers.utils.formatUnits(
             block.gasUsed.mul(block.baseFeePerGas!).toString(),
@@ -50,7 +50,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block }) => {
         )}{" "}
         Gwei
       </div>
-      <div className="text-right">
+      <div className="text-right text-gray-400">
         <TimestampAge now={now / 1000} timestamp={block.timestamp} />
       </div>
     </div>
diff --git a/src/special/london/Blocks.tsx b/src/special/london/Blocks.tsx
index e94f01e..6ef00ba 100644
--- a/src/special/london/Blocks.tsx
+++ b/src/special/london/Blocks.tsx
@@ -15,6 +15,7 @@ import {
   faCoins,
   faCube,
   faGasPump,
+  faHistory,
 } from "@fortawesome/free-solid-svg-icons";
 import BlockRow from "./BlockRow";
 import { ExtendedBlock, readBlock } from "../../useErigonHooks";
@@ -168,7 +169,12 @@ const Blocks: React.FC<BlocksProps> = ({ latestBlock, targetBlockNumber }) => {
             </span>
             <span>Burnt fees</span>
           </div>
-          <div className="text-right">Age</div>
+          <div className="text-right flex space-x-1 justify-end items-baseline">
+            <span className="text-gray-500">
+              <FontAwesomeIcon icon={faHistory} />
+            </span>
+            <span>Age</span>
+          </div>
         </div>
         {blocks.map((b, i) => (
           <Transition