removed ibc/page. updated ibc pages and components to use new stylings.

penumbra-zone · Aug 15, 2024 · e596400 · e596400
1 parent aa02b98
commit e596400
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 44 deletions.
diff --git a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx b/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>

diff --git a/apps/web/src/app/(main)/ibc/channels/page.tsx b/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"

diff --git a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx b/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>

diff --git a/apps/web/src/app/(main)/ibc/clients/page.tsx b/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"

diff --git a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx b/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>

diff --git a/apps/web/src/app/(main)/ibc/page.tsx b/apps/web/src/app/(main)/ibc/page.tsx
diff --git a/apps/web/src/components/ibc/Channel/index.tsx b/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>

diff --git a/apps/web/src/components/ibc/Client/index.tsx b/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>

diff --git a/apps/web/src/components/ibc/Connection/index.tsx b/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>