Fix home screen flickering
This commit is contained in:
parent
1d044cee85
commit
a6109754b4
13
src/Home.tsx
13
src/Home.tsx
|
@ -38,9 +38,11 @@ const Home: React.FC = () => {
|
||||||
document.title = "Home | Otterscan";
|
document.title = "Home | Otterscan";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="m-auto">
|
<div className="mx-auto flex flex-col h-full">
|
||||||
{isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
|
{isScanning && <CameraScanner turnOffScan={() => setScanning(false)} />}
|
||||||
|
<div className="m-5 mb-10 flex items-end flex-grow max-h-72">
|
||||||
<Logo />
|
<Logo />
|
||||||
|
</div>
|
||||||
<form
|
<form
|
||||||
className="flex flex-col"
|
className="flex flex-col"
|
||||||
onSubmit={handleSubmit}
|
onSubmit={handleSubmit}
|
||||||
|
@ -71,7 +73,9 @@ const Home: React.FC = () => {
|
||||||
>
|
>
|
||||||
Search
|
Search
|
||||||
</button>
|
</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">
|
<NavLink to="/special/london">
|
||||||
<div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
|
<div className="flex space-x-2 items-baseline text-orange-500 hover:text-orange-700 hover:underline">
|
||||||
<span>
|
<span>
|
||||||
|
@ -86,14 +90,15 @@ const Home: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
{latestBlock && (
|
{latestBlock && (
|
||||||
<NavLink
|
<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)}
|
to={blockURL(latestBlock.number)}
|
||||||
>
|
>
|
||||||
<div>Latest block: {commify(latestBlock.number)}</div>
|
<div>Latest block: {commify(latestBlock.number)}</div>
|
||||||
<Timestamp value={latestBlock.timestamp} />
|
<Timestamp value={latestBlock.timestamp} />
|
||||||
</NavLink>
|
</NavLink>
|
||||||
)}
|
)}
|
||||||
</form>
|
</div>
|
||||||
|
<div className="flex-grow pb-5"></div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
import Otter from "./otter.jpg";
|
import Otter from "./otter.jpg";
|
||||||
|
|
||||||
const Logo: React.FC = () => (
|
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
|
<img
|
||||||
className="rounded-full"
|
className="rounded-full"
|
||||||
src={Otter}
|
src={Otter}
|
||||||
|
|
Loading…
Reference in New Issue