improve styles

balancer · Mar 21, 2024 · 42a1ac3 · 42a1ac3
1 parent eabd0e8
commit 42a1ac3
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 32 deletions.
diff --git 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
@@ -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 />