chore: wip mobile updates

allo-protocol · Sep 19, 2023 · d279ce6 · d279ce6
1 parent 41e63bf
commit d279ce6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
         <body>
           <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
             <Navbar />
-            <div className="px-10">
+            <div className="lg:px-8 px-1 sm:px-2 md:px-6">
               <div className={inter.className}>{children}</div>
             </div>
           </div>

diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx
@@ -2,8 +2,12 @@
 // eslint-disable-file react/jsx-key
 import Table from "../Table";
 import { TTableData } from "@/types/types";
-import { Address, convertBytesToShortString, truncatedString } from "../Address";
-import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils";
+import { Address } from "../Address";
+import {
+  convertChainIdToNetworkName,
+  formatAmount,
+  shortenPoolName,
+} from "@/utils/utils";
 import Link from "next/link";
 // import Status from "../Status";
 
@@ -25,9 +29,13 @@ const Pool = (data: any) => {
     ],
     rows: Object.values(data.data).map((pool: any) => {
       return [
-        <Link href={`/pool/${pool.chainId}/${pool.poolId}`}>
-          {truncatedString(pool.poolId)}
-        </Link>,,
+        <Link
+          className="text-green-800 hover:bg-green-200 p-2 rounded-md"
+          href={`/pool/${pool.chainId}/${pool.poolId}`}
+        >
+          {pool.poolId}
+        </Link>,
+        ,
         <Address address={pool.strategy} chainId={pool.chainId} />,
         // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME
         // shortenPoolName("Pool Name is really long"),

diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx
@@ -23,7 +23,7 @@ const PoolDetailPage = ({
           {/* {pool.name} */}
           "Pool Name"
         </h3>
-        <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-500 font-mono">
+        <p className="mt-1 max-w-xs text-sm leading-6 text-gray-500 font-mono">
           {pool.poolId}
         </p>
       </div>

diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx
@@ -15,7 +15,9 @@ const Profile = (data: any) => {
       return [
         // eslint-disable-next-line react/jsx-key
         <Link href={`/profile/${profile.chainId}/${profile.profileId}`}>
-          {truncatedString(profile.profileId)}
+          <span className="text-green-800">
+            {truncatedString(profile.profileId)}
+          </span>
         </Link>,
         // eslint-disable-next-line react/jsx-key
         <Address address={profile.anchor} chainId={profile.chainId} />,

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -19,7 +19,7 @@ const Table = ({ data }: { data: TTableData }) => {
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               <table className="min-w-full divide-y divide-gray-300">
                 <thead>
-                  <tr>
+                  <tr className="hidden md:table-row lg:table-row">
                     {data.headers.map((header, index) => (
                       <th
                         key={"headers-" + index}
@@ -30,6 +30,11 @@ const Table = ({ data }: { data: TTableData }) => {
                       </th>
                     ))}
                   </tr>
+                  <tr className="md:hidden lg:hidden">
+                    <th>ID</th>
+                    {/* TODO: we need to dynamically display Anchor or Address depnding on profile or pool table */}
+                    <th>Anchress</th>
+                  </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200 bg-white">
                   {data.rows.map((row, index) => (