From 0ace2e1a0f419d51d642154e9b08df80fd30373c Mon Sep 17 00:00:00 2001
From: Fernando Falci <falci@falci.me>
Date: Thu, 25 Apr 2024 12:49:15 +0200
Subject: [PATCH 1/2] chore: use font inter


From b6a9f68c94d68374682a54bde30b2d3386078cd0 Mon Sep 17 00:00:00 2001
From: Aaron Oxborrow <aaron@oxborrow.com>
Date: Thu, 25 Apr 2024 06:16:37 -0700
Subject: [PATCH 2/2] font fix and styling

---
 src/App.jsx                           | 35 +++++++++++++++------------
 src/components/Debug.jsx              |  4 +--
 src/components/search/Search.jsx      | 11 +++------
 src/components/search/SearchInput.jsx |  2 +-
 4 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5b1907b..8605022 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,15 +17,15 @@ function App() {
   const { address } = useAccount();
 
   return (
-    <div className="bg-neutral-50 h-screen flex">
+    <div className="h-screen flex">
       <div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full pt-3">
-        <nav className="w-full flex justify-between gap-2 px-4 py-2 items-center">
+        <nav className="w-full flex justify-between gap-2 px-4 sm:px-8 py-2 items-center">
           <img className="w-36" src={brandLogo} />
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-8">
             {address && (
               <a
                 href={`https://hns.id/account/${address}`}
-                className="text-neutral-700 text-sm font-semibold uppercase hidden md:block hover:text-neutral-500"
+                className="text-neutral-500 text-sm font-semibold uppercase tracking-wide hidden md:block hover:text-neutral-600"
               >
                 My Domains
               </a>
@@ -33,52 +33,57 @@ function App() {
             <ConnectButton />
           </div>
         </nav>
-        <section className="flex-grow w-full flex flex-col items-center p-4 gap-6 text-center">
-          <div className="text-neutral-950 text-4xl lg:text-5xl font-bold leading-none">
+        <section className="flex-grow w-full flex flex-col items-center p-4 gap-4 text-center">
+          <div className="text-neutral-950 text-4xl lg:text-5xl font-extrabold leading-none tracking-tight mt-2">
             {HERO_TEXT}
           </div>
-          <div className="text-neutral-500 text-lg lg:text-2xl font-bold leading-normal">
+          <div className="text-neutral-500 text-xl lg:text-2xl font-medium leading-normal tracking-tight">
             {SUB_TEXT}
           </div>
-          <div className="w-full flex-1 pt-6  max-w-xl text-left">
+          <div className="w-full flex-1 pt-10 max-w-xl text-left">
             <Search />
           </div>
         </section>
-        <footer className="w-full border-t px-4 py-6 flex flex-col lg:flex-row lg:justify-between gap-4">
-          <ul className="flex gap-8 text-neutral-700 text-sm font-medium uppercase">
+        <footer className="w-full mx-auto px-4 sm:px-8 mb-4">
+          <div className="border-t w-full px-3 border-neutral-300 flex flex-col sm:flex-row sm:justify-between gap-4 pt-5 pb-6">
+          <ul className="flex items-center gap-8 text-neutral-500 text-[13px] font-medium uppercase">
             <li>
               <a
-                className="hover:text-neutral-500"
+                className="hover:text-neutral-700"
                 href={`https://twitter.com/${TWITTER_HANDLE}`}
+                target="_blank"
               >
                 Twitter
               </a>
             </li>
             <li>
               <a
-                className="hover:text-neutral-500"
+                className="hover:text-neutral-700"
                 href="https://github.com/namebasehq/wallet-id"
+                target="_blank"
               >
                 GitHub
               </a>
             </li>
             <li>
               <a
-                className="hover:text-neutral-500"
+                className="hover:text-neutral-700"
                 href={`https://opensea.io/collection/handshake-slds?search[stringTraits][0][name]=TLD&search[stringTraits][0][values][0]=${TLD}`}
+                target="_blank"
               >
                 OpenSea
               </a>
             </li>
           </ul>
           <div className="flex items-center gap-3">
-            <div className="text-neutral-400 text-xs font-normal uppercase">
+            <div className="text-neutral-500 text-[11px] font-semibold opacity-50 uppercase">
               powered by
             </div>
-            <a href="https://hns.id">
+            <a href="https://hns.id" target="_blank">
               <img src={hnsLogo} className="w-24" />
             </a>
           </div>
+          </div>
         </footer>
       </div>
     </div>
diff --git a/src/components/Debug.jsx b/src/components/Debug.jsx
index 2597a7d..8eaeaca 100644
--- a/src/components/Debug.jsx
+++ b/src/components/Debug.jsx
@@ -6,14 +6,14 @@ export const Debug = ({ error, data }) => {
 
   return (
     <div className="flex flex-col gap-2 mt-10 text-left">
-      <span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
+      <span className="text-black font-semibold bg-yellow-300 px-4 py-2 rounded-md">
         TESTNET
       </span>
       {error && (
         <div className="p-2 text-red-600 bg-red-100 rounded-md">{error}</div>
       )}
       {data && (
-        <pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg overflow-scroll">
+        <pre className="p-2 text-gray-500 bg-gray-100 ring-1 ring-gray-400 rounded-md overflow-y-auto">
           {JSON.stringify(data, null, 2)}
         </pre>
       )}
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 41408ad..6b49d4e 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -31,15 +31,12 @@ export const Search = () => {
 
   return (
     <>
-      <div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow">
+      <div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow focus-within:border-zinc-400/80 hover:border-zinc-400/80">
         <SearchInput expand={show} onChange={onChange} />
         {show && (
-          <div className="w-full p-3 bg-white rounded-b-2xl inline-flex flex-col lg:flex-row gap-2 flex-1 lg:overflow-scroll">
-            <div className="flex-1 lg:w-full lg:overflow-scroll items-center gap-2 flex">
-              <div
-                className="text-xl font-medium leading-loose lg:w-fit overflow-scroll"
-                style={{ scrollbarWidth: 'none' }}
-              >
+          <div className="w-full py-3 px-4 bg-white rounded-b-2xl inline-flex flex-col sm:flex-row gap-2 flex-1">
+            <div className="flex-1 lg:w-full items-center overflow-hidden gap-2 flex">
+              <div className="text-xl font-medium leading-loose lg:w-fit">
                 <span className="text-neutral-950">{label}</span>
                 <span className="text-neutral-400">.{TLD}</span>
               </div>
diff --git a/src/components/search/SearchInput.jsx b/src/components/search/SearchInput.jsx
index ebc463a..99b9b77 100644
--- a/src/components/search/SearchInput.jsx
+++ b/src/components/search/SearchInput.jsx
@@ -15,7 +15,7 @@ export const SearchInput = ({ expand, onChange }) => {
     >
       <input
         className={cn(
-          'grow shrink basis-0 rounded-t-2xl text-neutral-400 text-base font-medium leading-tight tracking-tight p-5 border-zinc-300 focus:outline-none',
+          'grow shrink basis-0 rounded-t-2xl text-neutral-600 text-base font-medium leading-tight tracking-tight p-4 border-zinc-300 focus:outline-none',
           expand ? 'rounded-t-2xl border-b' : 'rounded-2xl'
         )}
         onChange={handleChange}