Merge pull request #126 from horuslabsio/address_page_responsiveness

chore: address book page responsiveness
horuslabsio · Aug 11, 2024 · 34d0388 · 34d0388
2 parents ae98a94 + d4faf65
commit 34d0388
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 230 deletions.
diff --git a/frontend/src/app/address-book/address-table-header.tsx b/frontend/src/app/address-book/address-table-header.tsx
@@ -18,17 +18,17 @@ export default function AddressTableHeader() {
     router.push(currentUrl.toString());
   }
   return (
-    <div className="grid grid-cols-[1fr_1.3fr_1.95fr] gap-x-[2px] text-sm">
-      <div className="flex items-center gap-x-3 rounded-tl-[12px] bg-[--table-header] px-[10px] py-4">
+    <div className="grid grid-cols-[107px_150px_282px] gap-x-[2px] text-xs md:grid-cols-[1fr_1.3fr_1.95fr] md:text-sm">
+      <div className="flex items-center gap-x-3 rounded-tl-[12px] bg-[--table-header] px-[10px] py-3 md:py-4">
         Name{" "}
         <button onClick={handleSort}>
           <Sort />
         </button>
       </div>
-      <div className="!rounded-none bg-[--table-header] px-[10px] py-4">
+      <div className="!rounded-none bg-[--table-header] px-[10px] py-3 md:py-4">
         Description
       </div>
-      <div className="rounded-tr-[12px] bg-[--table-header] px-[10px] py-4">
+      <div className="rounded-tr-[12px] bg-[--table-header] px-[10px] py-3 md:py-4">
         Address
       </div>
     </div>

diff --git a/frontend/src/app/address-book/address-table-row.tsx b/frontend/src/app/address-book/address-table-row.tsx
@@ -11,9 +11,9 @@ export default function AddressTableRow({
       href={address}
       target="_blank"
       rel="noopener noreferrer"
-      className="grid w-full cursor-pointer grid-cols-[1fr_1.3fr_1.95fr] gap-x-[2px] text-md text-[--headings] transition-all duration-300 hover:rounded hover:bg-button-secondary hover:text-text-secondary"
+      className="grid w-full cursor-pointer grid-cols-[107px_150px_282px] gap-x-[2px] break-words text-xs text-[--headings] transition-all duration-300 md:grid-cols-[1fr_1.3fr_1.95fr] md:text-md md:hover:rounded md:hover:bg-button-secondary md:hover:text-text-secondary"
     >
-      <div className="px-[10px] py-4">{name}</div>
+      <div className="px-[10px] py-4 underline md:no-underline">{name}</div>
       <div className="px-[10px] py-4">{description}</div>
       <div className="truncate px-[10px] py-4">{address}</div>
     </Link>

diff --git a/frontend/src/app/address-book/address-table.tsx b/frontend/src/app/address-book/address-table.tsx
@@ -33,11 +33,13 @@ function AddressTable({ addresses }: { addresses: AddressBookResource[] }) {
 
   return (
     <div>
-      <AddressTableHeader />
-      <div className="flex flex-col gap-y-[2px] py-4">
-        {filteredAddresses.slice(from, to).map((address) => (
-          <AddressTableRow address={address} key={address.id} />
-        ))}
+      <div className="w-full overflow-x-auto">
+        <AddressTableHeader />
+        <div className="flex flex-col gap-y-3 py-1 md:gap-y-[2px] md:py-4">
+          {filteredAddresses.slice(from, to).map((address) => (
+            <AddressTableRow address={address} key={address.id} />
+          ))}
+        </div>
       </div>
       <div className="mt-[34px] flex w-full justify-end">
         <Pagination count={filteredAddresses.length} />

diff --git a/frontend/src/app/address-book/columns.tsx b/frontend/src/app/address-book/columns.tsx
diff --git a/frontend/src/app/address-book/data-table-v1.tsx b/frontend/src/app/address-book/data-table-v1.tsx
diff --git a/frontend/src/app/address-book/page.tsx b/frontend/src/app/address-book/page.tsx
@@ -1,16 +1,14 @@
 "use client";
 import { useEffect, useState } from "react";
 import useTheme from "../components/ui_components/hooks/useTheme";
-import { Resource, columns } from "./columns";
-import { DataTable } from "./data-table-v1";
+import logoImage from "../../../public/assets/logo.svg";
 import { AddressBookResource } from "../types";
 import { addressBookResources, searchResources } from "../utils";
 import { useDebounce } from "../hooks";
 import Image from "next/image";
 import searchIcon from "../../../public/assets/search-icon.svg";
 import AddressTable from "./address-table";
 import ThemeSwitch from "../components/header/Theme";
-import Search from "svg/Search";
 
 export default function Page() {
   const { theme, changeTheme } = useTheme();
@@ -37,36 +35,38 @@ export default function Page() {
 
   return (
     <div className="relative w-full">
-      <div className="w-full bg-primary-gradient px-[100px] py-[30px]">
-        <div className="relative mb-[95px] flex flex-wrap items-center justify-between">
-          <div className="flex items-center gap-x-[9px]">
-            <div className="w-[18.75rem]">
-              <img
-                src="/assets/logo.svg"
+      <div className="w-full bg-[url('/assets/header-bg.svg')] bg-cover bg-[0px] bg-no-repeat px-6 py-8 md:px-24 md:py-10">
+        <div className="mx-auto max-w-[--header-max-w]">
+          <div className="relative mb-[87px] flex flex-wrap items-center justify-between md:mb-[95px]">
+            <div className="flex items-center gap-x-[3.76px] md:gap-x-[9px]">
+              <Image
+                src={logoImage}
                 alt="logo"
-                className="h-full w-full"
+                className="h-[20.5px] w-[153px] md:h-[48px] md:w-[360px]"
               />
+              <h4 className="border-l-[1.25px] border-[#141925] px-1 py-[2px] text-xs uppercase italic leading-[14px] text-accent-secondary md:border-l-[1.75px] md:px-2 md:py-1 md:text-[24px] md:leading-7">
+                addressbook
+              </h4>
             </div>
-            <h4 className="border-l-[1.75px] border-[#141925] px-2 py-1 text-[24px] uppercase italic leading-7 text-accent-secondary">
-              ADDRESSBOOK
-            </h4>
+            <ThemeSwitch className="grid" action={changeTheme} theme={theme} />
           </div>
-          <ThemeSwitch action={changeTheme} theme={theme} />
-        </div>
-        <div className="relative mx-auto w-fit">
-          <input
-            type="text"
-            className="w-[800px] rounded-2xl bg-[--link-card] px-6 py-5 pl-[60px] text-l leading-[30px] text-accent-secondary placeholder:text-text-primary dark:text-white"
-            placeholder="Search keywords, contract addreses"
-            name="search"
-            onChange={(e) => setSearch(e.target.value)}
-          />
-          <div className="absolute left-6 top-[22px] z-10 h-6 w-6">
-            <Search />
+          <div className="relative mx-auto md:w-fit">
+            <input
+              type="text"
+              className="w-full rounded-[10px] bg-[#F7F7F7] px-4 py-3 pl-10 text-base text-accent-secondary placeholder:text-text-primary md:w-[800px] md:rounded-[16px] md:px-6 md:py-5 md:pl-[60px] md:text-l md:leading-[30px]"
+              placeholder="Search keywords, contract addreses"
+              name="search"
+              onChange={(e) => setSearch(e.target.value)}
+            />
+            <Image
+              src={searchIcon}
+              className="absolute left-4 top-[14px] z-10 h-5 w-5 md:left-6 md:top-6 md:h-6 md:w-6"
+              alt="search"
+            />
           </div>
         </div>
       </div>
-      <div className="h-full w-full px-9 pb-[74px] pt-4 text-[--headings]">
+      <div className="h-full px-4 pb-6 pt-3 text-[--headings] md:px-9 md:pb-[74px] md:pt-4">
         <AddressTable
           addresses={
             filteredAddresses.length > 0 && search.length > 0