Merge pull request #172 from penumbra-zone/layout-groups

Update common layout for main content while `/`, (index) uses root layout exclusively + clean up more stylings.

apps/web/src/app/block/[ht]/page.tsx → apps/web/src/app/(main)/block/[ht]/page.tsx

@@ -28,15 +28,15 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 rounded-sm shadow-md">
-      <div className="flex flex-col gap-5 pt-5 items-center">
-        <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
-        <HydrationBoundary state={dehydrate(queryClient)}>
-          <div className="sm:w-11/12 w-full">
-            <Block {...{endpoint, queryName, ht }}/>
-          </div>
-        </HydrationBoundary>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">Block Summary</h1>
       </div>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <div className="sm:w-11/12 w-full">
+          <Block {...{ endpoint, queryName, ht }} />
+        </div>
+      </HydrationBoundary>
     </div>
   );
 };

apps/web/src/app/blocks/page.tsx → apps/web/src/app/(main)/blocks/page.tsx

@@ -27,11 +27,13 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5">
-      <h1 className="sm:text-2xl font-bold self-center">Recent Blocks</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">Recent Blocks</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <BlocksTable
-          className="self-center sm:w-2/3 w-full"
+          className="sm:w-11/12 w-full"
           queryName={queryName}
           defaultQueryOptions={defaultQueryOptions}
           endpoint={endpoint}

apps/web/src/app/ibc/channel/[id]/page.tsx → apps/web/src/app/(main)/ibc/channel/[id]/page.tsx

@@ -26,10 +26,13 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Channel</h1>
+    <div className="flex flex-col gap-8 items-center ">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Channel</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        {/* TODO: don't forget to remove this extra pb-8 once Channel is cleaned up. */}
+        <div className="sm:w-11/12 w-full pb-8">
           <Channel {...{endpoint, queryName, channelId}}/>
         </div>
       </HydrationBoundary>

apps/web/src/app/ibc/channels/page.tsx → apps/web/src/app/(main)/ibc/channels/page.tsx

@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
-      <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Channels</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ChannelsTable
           className="sm:w-11/12 w-full"

apps/web/src/app/ibc/client/[id]/page.tsx → apps/web/src/app/(main)/ibc/client/[id]/page.tsx

@@ -26,10 +26,12 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Client</h1>
+    <div className="flex flex-col gap-8 items-center ">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Client</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="sm:w-11/12 w-full pb-8">
           <Client {...{endpoint, queryName, clientId}}/>
         </div>
       </HydrationBoundary>

apps/web/src/app/ibc/clients/page.tsx → apps/web/src/app/(main)/ibc/clients/page.tsx

@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
-      <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Clients</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ClientsTable
           className="sm:w-11/12 w-full"

apps/web/src/app/ibc/connection/[id]/page.tsx → apps/web/src/app/(main)/ibc/connection/[id]/page.tsx

@@ -27,10 +27,12 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Connection</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Connection</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="sm:w-11/12 w-full pb-8">
           <Connection {...{endpoint, queryName, connectionId}}/>
         </div>
       </HydrationBoundary>

apps/web/src/app/(main)/layout.tsx

@@ -0,0 +1,11 @@
+export default function MainLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="bg-primary/60 pt-8 rounded-lg border">
+      {children}
+    </div>
+  );
+}

apps/web/src/app/transaction/[hash]/page.tsx → apps/web/src/app/(main)/transaction/[hash]/page.tsx

@@ -28,8 +28,10 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">Transaction Summary</h1>
+    <div className="flex flex-col gap-8 items-center ">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">Transaction Summary</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <div className="sm:w-11/12 w-full">
           <Transaction {...{endpoint, queryName, hash}}/>

apps/web/src/app/transactions/page.tsx → apps/web/src/app/(main)/transactions/page.tsx

@@ -28,8 +28,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
-      <h1 className="sm:text-2xl font-bold">Recent Transactions</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">Recent Transactions</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <TransactionsTable
           className="sm:w-11/12 w-full"

apps/web/src/components/Block/index.tsx

@@ -22,31 +22,48 @@ export const Block : FC<BlockProps> = ({ endpoint, queryName, ht }) => {
   const { created_at, tx_hashes, events } = data;
 
   return (
-    <div>
-      <div className="flex flex-wrap justify-between sm:p-5 p-2 sm:gap-y-10 gap-y-5 w-full">
-        <div className="flex flex-wrap justify-start w-full">
-          <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
-          <pre className="sm:w-0 w-full">{ht}</pre>
-        </div>
-        <div className="flex flex-wrap justify-start w-full">
-          <p className="w-1/6 font-semibold">Timestamp</p>
-          <pre className="sm:w-0 w-full">{created_at}</pre>
-        </div>
-        <div className="flex justify-start flex-wrap w-full">
-          <p className="sm:w-1/6 w-full font-bold">Transactions</p>
-          {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
-          {tx_hashes.length !== 0 ? tx_hashes.map((hash, i) => (
-              <Link href={`/transaction/${hash}`} key={i}><pre className="underline sm:max-w-full max-w-[200px] overflow-hidden overflow-ellipsis sm:text-base">{hash}</pre></Link>
-          )) : <p className="sm:w-0 w-full overflow-hidden text-ellipsis">None</p>}
-        </div>
-        <div className="flex justify-start flex-wrap w-full gap-y-5">
-          <p className="font-bold text-base">Block Event Attributes</p>
-          {events.length !== 0 ? events.map(({ type, attributes }, i) => (
-            <div key={i} className="flex flex-col sm:items-start items-center w-full gap-y-1">
-              <ABCIEventsTable className="sm:w-2/3 w-full" type={type} attributes={attributes}/>
+    <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
+      <div className="flex flex-wrap justify-start w-full">
+        <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
+        <pre className="sm:w-0 w-full">{ht}</pre>
+      </div>
+      <div className="flex flex-wrap justify-start w-full">
+        <p className="w-1/6 font-semibold">Timestamp</p>
+        <pre className="sm:w-0 w-full">{created_at}</pre>
+      </div>
+      <div className="flex justify-start flex-wrap w-full">
+        <p className="sm:w-1/6 w-full font-bold">Transactions</p>
+        {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
+        {tx_hashes.length !== 0 ? (
+          tx_hashes.map((hash, i) => (
+            <Link href={`/transaction/${hash}`} key={i}>
+              <pre className="underline sm:max-w-full max-w-[200px] overflow-hidden overflow-ellipsis sm:text-base">
+                {hash}
+              </pre>
+            </Link>
+          ))
+        ) : (
+          <p className="sm:w-0 w-full overflow-hidden text-ellipsis">None</p>
+        )}
+      </div>
+      <div className="flex justify-start flex-wrap w-full gap-y-5">
+        <p className="font-bold text-base">Block Event Attributes</p>
+        {events.length !== 0 ? (
+          events.map(({ type, attributes }, i) => (
+            <div
+              key={i}
+              className="flex flex-col sm:items-start items-center w-full gap-y-1"
+            >
+              <ABCIEventsTable
+                className="sm:w-2/3 w-full"
+                type={type}
+                attributes={attributes}
+              />
             </div>
-          )) : <p>None</p>}
-        </div>
+          ))
+        ) : (
+          <p>None</p>
+        )}
       </div>
     </div>
   );

apps/web/src/components/Transaction/index.tsx

@@ -21,7 +21,7 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
 
   const [ txResult, penumbraTx ] = data;
   return (
-    <div className="flex flex-wrap justify-between sm:p-5 p-2 sm:gap-y-10 gap-y-5 w-full">
+    <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Hash</p>
         {/* TODO: this width on smaller screens is pretty arbitrary and there's a few instances of this now through the codebase. revisit and implement as consistent tailwind variables. */}

apps/web/src/components/ibc/Channel/index.tsx

@@ -22,7 +22,7 @@ export const Channel : FC<ChannelProps> = ({ endpoint, queryName, channelId }) =
   });
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Channel ID</p>
         <pre className="sm:w-0 w-full">{channelId}</pre>

apps/web/src/components/ibc/Client/index.tsx

@@ -34,7 +34,7 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
   // const header = events.find(({ key }) => key === "header")?.value ?? "NONE";
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Client ID</p>
         <pre className="sm:w-0 w-full">{client_id}</pre>

apps/web/src/components/ibc/Connection/index.tsx

@@ -27,7 +27,7 @@ export const Connection : FC<ConnectionProps> = ({ endpoint, queryName, connecti
   const { connection_id, client_id, channel_ids } = data.at(0) ?? { connection_id: "", client_id: "", channel_ids: [] };
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Connection ID</p>
         <pre className="sm:w-0 w-full">{connection_id}</pre>