diff --git a/src/App.tsx b/src/App.tsx index e11a960..9c7c1fe 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -53,21 +53,19 @@ const App = () => { -
- - <Route path="/block/:blockNumberOrHash" exact> - <Block /> - </Route> - <Route path="/block/:blockNumber/txs" exact> - <BlockTransactions /> - </Route> - <Route path="/tx/:txhash"> - <Transaction /> - </Route> - <Route path="/address/:addressOrName/:direction?"> - <AddressTransactions /> - </Route> - </div> + <Title /> + <Route path="/block/:blockNumberOrHash" exact> + <Block /> + </Route> + <Route path="/block/:blockNumber/txs" exact> + <BlockTransactions /> + </Route> + <Route path="/tx/:txhash"> + <Transaction /> + </Route> + <Route path="/address/:addressOrName/:direction?"> + <AddressTransactions /> + </Route> </AppConfigContext.Provider> </Route> </Switch> 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} diff --git a/src/StandardFrame.tsx b/src/StandardFrame.tsx index 65fc076..10b5fe8 100644 --- a/src/StandardFrame.tsx +++ b/src/StandardFrame.tsx @@ -1,7 +1,7 @@ import React from "react"; const StandardFrame: React.FC = ({ children }) => ( - <div className="bg-gray-100 px-9 pt-3 pb-12">{children}</div> + <div className="flex-grow bg-gray-100 px-9 pt-3 pb-12">{children}</div> ); export default StandardFrame;