From 42a1ac3fef89f0aaee31cbcabea91d7d01c77568 Mon Sep 17 00:00:00 2001
From: Matthew Pereira <matthewdavidpereira@gmail.com>
Date: Thu, 21 Mar 2024 14:39:15 -0700
Subject: [PATCH] improve styles

---
 .../app/pools/_components/PoolDetails.tsx     |  9 +--
 packages/nextjs/app/subgraph/page.tsx         | 61 ++++++++++---------
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/packages/nextjs/app/pools/_components/PoolDetails.tsx b/packages/nextjs/app/pools/_components/PoolDetails.tsx
index 66ecac8f..91203977 100644
--- a/packages/nextjs/app/pools/_components/PoolDetails.tsx
+++ b/packages/nextjs/app/pools/_components/PoolDetails.tsx
@@ -35,18 +35,19 @@ export const PoolDetails = ({ poolAddress }: { poolAddress: string }) => {
     <div className="w-full">
       <div className="overflow-x-auto rounded-lg bg-base-200 p-5">
         <h5 className="text-xl font-bold mb-3">Pool Attributes</h5>
+
         <div className="border border-base-100 rounded-lg">
           <table className="table text-lg">
-            <thead>
-              <tr className="border-b border-base-100 text-base-content text-lg">
+            {/* <thead>
+              <tr className="text-lg border-b border-base-100 text-base-content">
                 <th className="border-r border-base-100">Attribute</th>
                 <th>Details</th>
               </tr>
-            </thead>
+            </thead> */}
             <tbody className="bg-base-200">
               {detailsRows.map(({ attribute, detail }, index) => (
                 <tr key={attribute} className={`${index < detailsRows.length - 1 ? "border-b border-base-100" : ""}`}>
-                  <td className="border-r border-base-100">{attribute}</td>
+                  <td>{attribute}</td>
                   <td>{detail}</td>
                 </tr>
               ))}
diff --git a/packages/nextjs/app/subgraph/page.tsx b/packages/nextjs/app/subgraph/page.tsx
index 7d0c20dc..6cad9eec 100644
--- a/packages/nextjs/app/subgraph/page.tsx
+++ b/packages/nextjs/app/subgraph/page.tsx
@@ -45,36 +45,41 @@ const Subgraph: NextPage = () => {
             </p>
           </div>
           <div className="flex w-full">
-            <div className="overflow-x-auto rounded-lg bg-base-200 w-full">
+            <div className="overflow-x-auto rounded-lg bg-base-200 w-full p-5">
               {data ? (
-                <table className="table text-lg">
-                  <thead>
-                    <tr className="text-lg bg-base-100 border-b border-accent">
-                      <th className="border-r border-accent">Address</th>
-                      <th className="border-r border-accent">Name</th>
-                      <th className="border-r border-accent">Symbol</th>
-                      <th className="border-r border-accent">Tokens</th>
-                      <th>Total Shares</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {data.pools.map((pool: any, index: number) => (
-                      <tr key={index} className={`${index < data.pools.length - 1 ? "border-b border-accent" : ""}`}>
-                        <td className="border-r border-accent">
-                          <Address address={pool.address} />
-                        </td>
-                        <td className="border-r border-accent">{pool.name}</td>
-                        <td className="border-r border-accent">{pool.symbol}</td>
-                        <td className="border-r border-accent">
-                          {pool.tokens.map((token: any, index: number) => (
-                            <div key={index}>{token.symbol}</div>
-                          ))}
-                        </td>
-                        <td>{pool.totalShares}</td>
+                <div className="border border-base-100 rounded-lg">
+                  <table className="table text-lg">
+                    <thead>
+                      <tr className="text-lg border-b border-base-100">
+                        <th className="border-r border-base-100">Address</th>
+                        <th className="border-r border-base-100">Name</th>
+                        <th className="border-r border-base-100">Symbol</th>
+                        <th className="border-r border-base-100">Tokens</th>
+                        <th>Total Shares</th>
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
+                    </thead>
+                    <tbody>
+                      {data.pools.map((pool: any, index: number) => (
+                        <tr
+                          key={index}
+                          className={`${index < data.pools.length - 1 ? "border-b border-base-100" : ""}`}
+                        >
+                          <td className="border-r border-base-100">
+                            <Address address={pool.address} />
+                          </td>
+                          <td className="border-r border-base-100">{pool.name}</td>
+                          <td className="border-r border-base-100">{pool.symbol}</td>
+                          <td className="border-r border-base-100">
+                            {pool.tokens.map((token: any, index: number) => (
+                              <div key={index}>{token.symbol}</div>
+                            ))}
+                          </td>
+                          <td>{pool.totalShares}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
               ) : (
                 <div className="w-full h-96">
                   <SkeletonLoader />