From a6109754b419d4160ef6ec890ea74835dbc6b039 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 22 Oct 2021 09:29:54 -0300
Subject: [PATCH] Fix home screen flickering

---
 src/Home.tsx | 15 ++++++++++-----
 src/Logo.tsx |  2 +-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/Home.tsx b/src/Home.tsx
index 04824ce..dc79748 100644
--- a/src/Home.tsx
+++ b/src/Home.tsx
@@ -38,9 +38,11 @@ const Home: React.FC = () => {
   document.title = "Home | Otterscan";
 
   return (
-    <div className="m-auto">
+    <div className="mx-auto flex flex-col h-full">
       {isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
-      <Logo />
+      <div className="m-5 mb-10 flex items-end flex-grow max-h-72">
+        <Logo />
+      </div>
       <form
         className="flex flex-col"
         onSubmit={handleSubmit}
@@ -71,7 +73,9 @@ const Home: React.FC = () => {
         >
           Search
         </button>
-        <div className="mx-auto mt-5 mb-5 text-lg text-link-blue hover:text-link-blue-hover font-bold">
+      </form>
+      <div className="mx-auto h-32">
+        <div className="text-lg text-link-blue hover:text-link-blue-hover font-bold">
           <NavLink to="/special/london">
             <div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
               <span>
@@ -86,14 +90,15 @@ const Home: React.FC = () => {
         </div>
         {latestBlock && (
           <NavLink
-            className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
+            className="flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
             to={blockURL(latestBlock.number)}
           >
             <div>Latest block: {commify(latestBlock.number)}</div>
             <Timestamp value={latestBlock.timestamp} />
           </NavLink>
         )}
-      </form>
+      </div>
+      <div className="flex-grow pb-5"></div>
     </div>
   );
 };
diff --git a/src/Logo.tsx b/src/Logo.tsx
index eb31768..3671e42 100644
--- a/src/Logo.tsx
+++ b/src/Logo.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Otter from "./otter.jpg";
 
 const Logo: React.FC = () => (
-  <div className="mx-auto mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
+  <div className="mx-auto text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
     <img
       className="rounded-full"
       src={Otter}