Merge pull request #119 from penumbra-zone/first-pass-client-redesign

initial redesign + dark theme
penumbra-zone · Jun 29, 2024 · 50a8843 · 50a8843
2 parents 7cb5e04 + e4b8d56
commit 50a8843
Show file tree

Hide file tree

Showing 36 changed files with 247 additions and 220 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "install": "^0.13.0",
     "lucide-react": "^0.284.0",
     "next": "13.5.4",
+    "next-themes": "^0.3.0",
     "npm": "^10.8.0",
     "pg": "^8.11.5",
     "react": "^18",

diff --git a/src/app/block/[ht]/page.tsx b/src/app/block/[ht]/page.tsx
@@ -15,7 +15,7 @@ interface PageProps {
 const Page : FC<PageProps> = ({ params }) => {
   const { ht } = params;
 
-  const { data: blockData , isFetched, isError } = useQuery({
+  const { data: blockData , isError } = useQuery({
     queryFn: async () => {
       console.log(`Fetching: GET /api/block?q=${ht}`);
       const { data } = await axios.get(`/api/block?q=${ht}`);
@@ -44,25 +44,19 @@ const Page : FC<PageProps> = ({ params }) => {
 
   // TODO: Replace with data table component views once those are fleshed out.
   return (
-    <div>
-      {isFetched ? (
-        <div>
-          {blockData ? (
-          <div className="flex flex-col gap-5 pt-5 items-center">
-            <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
-            <div className="sm:w-11/12 w-full">
-              <Block height={ht} {...blockData}/>
-            </div>
+    <div className="bg-primary rounded-sm shadow-md">
+      {blockData ? (
+        <div className="flex flex-col gap-5 pt-5 items-center">
+          <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
+          <div className="sm:w-11/12 w-full">
+            <Block height={ht} {...blockData}/>
           </div>
-          ) : (
-            <div>
-              <p className="font-semibold">No block event</p>
-              <p>To be frank... You shouldn&apos;t be able to see this.</p>
-            </div>
-          )}
         </div>
       ) : (
-        <p>Loading...</p>
+        <div>
+          <p className="font-semibold">No block event</p>
+          <p>To be frank... You shouldn&apos;t be able to see this.</p>
+        </div>
       )}
     </div>
   );

diff --git a/src/app/blocks/page.tsx b/src/app/blocks/page.tsx
@@ -5,7 +5,7 @@ export const dynamic = "force-dynamic";
 const Page = () => {
 
   return (
-    <div className="flex flex-col gap-5 pt-5">
+    <div className="bg-primary flex flex-col gap-5 pt-5">
       <h1 className="sm:text-2xl font-bold self-center">Recent Blocks</h1>
       <BlocksTable className="self-center sm:w-2/3 w-full"/>
     </div>

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,64 +1,75 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+
+/* TODO: global vars that still need to be defined/handled for the light theme:
+   - [ ] --secondary and its foreground
+   - [ ] --accent and its foreground
+   - [ ] --destructive and its foreground
+   - [ ] --input
+   - [ ] --ring
+*/
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 0 0% 100% / 1.0;
+    --foreground: 0 0% 4% / 1.0;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100% / 0.6;
+    --card-foreground: 0 0% 4% / 1.0;
+
+    --popover: 0 0% 100% / 1.0;
+    --popover-foreground: 0 0% 4% / 1.0;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 0 0% 100% / 0.6;
+    --primary-foreground: 0 0% 9%  / 1.0;
 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 0 0% 96% / 1.0;
+    --muted-foreground: 0 0% 45% / 1.0;
 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
+    --link: 285 28% 49% / 1.0;
+
+    --border: 0 0% 90% / 1.0;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
 
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 0 0% 0% / 1.0;
+    --foreground: 0 0% 98% / 1.0;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 0 0% 0% / 0.6;  
+    --card-foreground: 0 0% 98% / 1.0;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 0 0% 0% / 1.0;
+    --popover-foreground: 0 0% 98% / 1.0;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 0 0% 0% / 0.6;
+    --primary-foreground: 0 0% 96% / 1.0;
 
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 270 34% 17%;
+    --muted-foreground: 0 0% 45% / 1.0;
 
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
+
+    --link: 283 37% 73% / 1.0;
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
@@ -82,4 +93,4 @@
       padding-right: 0.5rem;
     }
   }
-}
+}
diff --git a/src/app/ibc/channel/[id]/page.tsx b/src/app/ibc/channel/[id]/page.tsx
@@ -38,13 +38,13 @@ const Page : FC<PageProps> = ({ params }) => {
   }
 
   return (
-    <div>
+    <div className="bg-primary rounded-sm shadow-md">
       {isFetched ? (
         <div className="flex flex-col items-center gap-5 pt-5">
           <h1 className="sm:text-2xl text-lg font-bold">IBC Channel</h1>
         {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
         data  ? (
-          <div className="sm:w-11/12 w-full bg-white rounded-sm shadow-md">
+          <div className="sm:w-11/12 w-full">
             <div className="flex flex-col justify-start p-5 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>

diff --git a/src/app/ibc/channels/page.tsx b/src/app/ibc/channels/page.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const Page = () => {
-  const { data , isFetched, isError } = useQuery({
+  const { data , isError } = useQuery({
     queryFn: async () => {
       console.log("Fetching: GET /api/ibc/channels");
       const { data } = await axios.get("/api/ibc/channels");
@@ -30,20 +30,11 @@ const Page = () => {
 
   // TODO: clean this up.
   return (
-    <div>
-      {isFetched ? (
-        <div className="flex flex-col gap-5 pt-5 items-center">
-          <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
-        {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        data  ? (
-          <ChannelsTable className="sm:w-11/12 w-full" data={data} />
-        ) : (
-          <p>No results</p>
-        )}
-       </div>
-      ) : (
-        <p>loading...</p>
-      )}
+    <div className="bg-primary flex flex-col gap-5 pt-5 items-center">
+      <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
+      {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        data ? <ChannelsTable className="sm:w-11/12 w-full" data={data} /> : <p>No results</p>
+      }
     </div>
   );
 };

diff --git a/src/app/ibc/client/[id]/page.tsx b/src/app/ibc/client/[id]/page.tsx
@@ -46,11 +46,11 @@ const Page : FC<PageProps> = ({ params }) => {
   // const header = events.find(({ key }) => key === "header")?.value ?? "NONE";
 
   return (
-    <div>
+    <div className="bg-primary rounded-sm shadow-md">
       {isFetched ? (
         <div className="flex flex-col items-center gap-5 pt-5">
           <h1 className="sm:text-2xl text-lg font-bold">IBC Client</h1>
-          <div className="sm:w-11/12 w-full bg-white rounded-sm shadow-md">
+          <div className="sm:w-11/12 w-full">
             <div className="flex flex-col justify-start p-5 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>

diff --git a/src/app/ibc/clients/page.tsx b/src/app/ibc/clients/page.tsx
@@ -1,10 +1,11 @@
 "use client";
+
 import ClientsTable from "@/components/ibc/clients/ClientsTable";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const Page = () => {
-  const { data , isFetched, isError } = useQuery({
+  const { data , isError } = useQuery({
     queryFn: async () => {
       console.log("Fetching: GET /api/ibc/clients");
       const { data } = await axios.get("/api/ibc/clients");
@@ -28,22 +29,13 @@ const Page = () => {
   }
 
   return (
-    <div>
-      {isFetched ? (
-        <div className="flex flex-col gap-5 pt-5 items-center">
-          <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
-        {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        data  ? (
-          <ClientsTable className="sm:w-11/12 w-full" data={data}/>
-        ) : (
-          <p>No results</p>
-        )}
-       </div>
-      ) : (
-        <p>loading...</p>
-      )}
+    <div className="bg-primary flex flex-col gap-5 pt-5 items-center">
+      <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
+      {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        data ? <ClientsTable className="sm:w-11/12 w-full" data={data}/> : <p>No results</p>
+      }
     </div>
   );
 };
 
-export default Page;
+export default Page;
diff --git a/src/app/ibc/connection/[id]/page.tsx b/src/app/ibc/connection/[id]/page.tsx
@@ -40,11 +40,11 @@ const Page : FC<PageProps> = ({ params }) => {
   const { connection_id: connectionId, client_id: clientId, channel_ids: channelIds } = data[0];
 
   return (
-    <div>
+    <div className="bg-primary rounded-sm shadow-md">
       {isFetched ? (
         <div className="flex flex-col items-center gap-5 pt-5">
           <h1 className="sm:text-2xl text-lg font-bold">IBC Connection</h1>
-          <div className="sm:w-11/12 w-full bg-white rounded-sm shadow-md">
+          <div className="sm:w-11/12 w-full">
             <div className="flex flex-col justify-start p-5 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>

diff --git a/src/app/ibc/connections/page.tsx b/src/app/ibc/connections/page.tsx
@@ -5,7 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 
 const Page = () => {
-  const { data , isFetched, isError } = useQuery({
+  const { data , isError } = useQuery({
     queryFn: async () => {
       console.log("Fetching: GET /api/ibc/connections");
       const { data } = await axios.get("/api/ibc/connections");
@@ -29,20 +29,11 @@ const Page = () => {
   }
 
   return (
-    <div>
-      {isFetched ? (
-        <div className="flex flex-col gap-5 items-center pt-5">
-          <h1 className="sm:text-2xl font-bold">IBC Connections</h1>
-        {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-        data  ? (
-          <ConnectionsTable className="sm:w-1/2 w-full" data={data} />
-        ) : (
-          <p>No results</p>
-        )}
-       </div>
-      ) : (
-        <p>loading...</p>
-      )}
+    <div className="bg-primary flex flex-col gap-5 items-center pt-5">
+      <h1 className="sm:text-2xl font-bold">IBC Connections</h1>
+      {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        data ? <ConnectionsTable className="sm:w-1/2 w-full" data={data} /> : <p>No results</p>
+      }
     </div>
   );
 };

diff --git a/src/app/ibc/page.tsx b/src/app/ibc/page.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Page = () => {
   return (
-    <div className="flex flex-col gap-5 items-center pt-5">
+    <div className="flex flex-col gap-5 items-center pt-5 bg-primary">
       <h1 className="text-lg font-bold">Available IBC data to explore</h1>
       <div className="flex w-full justify-around">
         <p className="font-bold underline">
@@ -25,4 +25,4 @@ const Page = () => {
   );
 };
 
-export default Page;
+export default Page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,16 +22,17 @@ export default function RootLayout({
     <html
       lang="en"
       className={cn(
-        "bg-white text-slate-900 dark:bg-slate-900 dark:text-white antialiased",
         ioveskaSans.variable,
         ioveskaTerm.variable,
       )}
+      // Necessary for next-themes: https://github.com/pacocoursey/next-themes?tab=readme-ov-file#with-app
+      suppressHydrationWarning
     >
-      <body className="min-w-full min-h-screen">
+      <body className="bg-gradient-repeat-radial min-w-full min-h-screen">
         <Providers>
           <Navbar />
           <div className="flex flex-col container xs-container justify-start min-h-[640px]">
-            <div className="bg-slate-100 p-1 sm:p-2 rounded-lg border-solid border-[1px] border-slate-200 shadow-sm mb-auto">
+            <div className="p-1 sm:p-2 mb-auto">
               {children}
             </div>
             <div className="self-center py-5">