Block route styling and improved components

apps/explorer/src/app/components/blocks/home/blocks-refetch.tsx

@@ -0,0 +1,11 @@
+interface BlocksRefetchProps {
+  refetch: () => void;
+}
+
+export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
+  return (
+    <button onClick={() => refetch()} className="underline mb-28">
+      Refresh to see latest blocks
+    </button>
+  );
+};

apps/explorer/src/app/components/blocks/home/blocks-table.tsx

@@ -12,7 +12,7 @@ interface BlocksProps {
 
 export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
   if (!data?.result) {
-    return <>No block data</>;
+    return <div className="mb-28">Awaiting block data</div>;
   }
 
   return (
@@ -20,23 +20,26 @@ export const BlocksTable = ({ data, showTransactions }: BlocksProps) => {
       {data.result?.block_metas?.map((block, index) => {
         return (
           <React.Fragment key={index}>
-            <tr>
-              <td>
-                <Link to={`/blocks/${block.header?.height}`}>
+            <tr className="bg-neutral-850 border-b-4 border-b-black">
+              <td className="pl-4">
+                <Link
+                  to={`/blocks/${block.header?.height}`}
+                  className="text-vega-yellow"
+                >
                   {block.header?.height}
                 </Link>
               </td>
-              <td>
+              <td className="px-8 text-center">
                 {block.num_txs === '1'
                   ? '1 transaction'
                   : `${block.num_txs} transactions`}
               </td>
-              <td>
+              <td className="px-8 text-center">
                 <Link to={`/validators/${block.header?.proposer_address}`}>
                   {block.header.proposer_address}
                 </Link>
               </td>
-              <td>
+              <td className="text-center pr-28 text-neutral-300">
                 <SecondsAgo date={block.header?.time} />
               </td>
             </tr>

apps/explorer/src/app/components/blocks/index.tsx

@@ -1 +1,2 @@
 export { BlocksTable } from './home/blocks-table';
+export { BlocksRefetch } from './home/blocks-refetch';

apps/explorer/src/app/components/jump-to-block/index.tsx

@@ -20,8 +20,20 @@ export const JumpToBlock = () => {
 
   return (
     <form onSubmit={handleSubmit}>
-      <input type={'tel'} name={'blockNumber'} placeholder={'Block number'} />
-      <input type={'submit'} value={'Go'} />
+      <label
+        htmlFor="block-input"
+        className="block uppercase text-h5 font-bold"
+      >
+        Jump to block
+      </label>
+      <input
+        id="block-input"
+        type={'tel'}
+        name={'blockNumber'}
+        placeholder={'Block number'}
+        className="form-input"
+      />
+      <input className="form-submit" type={'submit'} value={'Go'} />
     </form>
   );
 };

apps/explorer/src/app/components/table/index.tsx

@@ -1,13 +1 @@
-import React from 'react';
-
-interface TableProps {
-  children: React.ReactNode;
-}
-
-export const Table = ({ children }: TableProps) => {
-  return (
-    <table>
-      <tbody>{children}</tbody>
-    </table>
-  );
-};
+export { Table } from './table';

apps/explorer/src/app/components/table/table.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface TableProps {
+  children: React.ReactNode;
+}
+
+export const Table = ({ children }: TableProps) => {
+  return (
+    <div className="overflow-x-auto whitespace-nowrap mb-28">
+      <table className="w-full">
+        <tbody>{children}</tbody>
+      </table>
+    </div>
+  );
+};

apps/explorer/src/app/routes/blocks/home/index.tsx

@@ -1,7 +1,7 @@
 import { DATA_SOURCES } from '../../../config';
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlockchainResponse } from '../tendermint-blockchain-response';
-import { BlocksTable } from '../../../components/blocks';
+import { BlocksTable, BlocksRefetch } from '../../../components/blocks';
 import { JumpToBlock } from '../../../components/jump-to-block';
 
 const Blocks = () => {
@@ -15,8 +15,8 @@ const Blocks = () => {
   return (
     <>
       <section>
-        <h1>Blocks</h1>
-        <button onClick={() => refetch()}>Refresh to see latest blocks</button>
+        <h1 className="route-header">Blocks</h1>
+        <BlocksRefetch refetch={refetch} />
         <BlocksTable data={data} />
       </section>
 

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -1,7 +1,7 @@
 import useFetch from '../../../hooks/use-fetch';
 import { TendermintBlockchainResponse } from '../../blocks/tendermint-blockchain-response';
 import { DATA_SOURCES } from '../../../config';
-import { BlocksTable } from '../../../components/blocks';
+import { BlocksTable, BlocksRefetch } from '../../../components/blocks';
 import { JumpToBlock } from '../../../components/jump-to-block';
 
 const Txs = () => {
@@ -16,7 +16,7 @@ const Txs = () => {
     <>
       <section>
         <h1>Transactions</h1>
-        <button onClick={() => refetch()}>Refresh to see latest blocks</button>
+        <BlocksRefetch refetch={refetch} />
         <BlocksTable data={data} showTransactions={true} />
       </section>
 

apps/explorer/src/styles.css

@@ -1,4 +1,18 @@
 /* You can add global styles to this file, and also import other style files */
 @tailwind base;
 @tailwind components;
+
+.route-header {
+  @apply font-alpha text-h3 uppercase mt-12 mb-28;
+}
+
+/* Used for text, tel input */
+.form-input {
+  @apply bg-neutral-800 border-white border px-8 py-4 placeholder-neutral-300;
+}
+
+.form-submit {
+  @apply border-white border px-28 py-4;
+}
+
 @tailwind utilities;

libs/tailwindcss-config/src/theme.js

@@ -86,6 +86,7 @@ module.exports = {
   },
   backgroundColor: ({ theme }) => ({
     transparent: 'transparent',
+    neutral: theme('colors.neutral'),
     dark: theme('colors.dark'),
     black: '#000',
     white: theme('colors.white'),