UI updates (#362)

* feat: update favicon * feat: small UI tweaks * feat: improve optical alignment for title * feat: align footer with title
bgd-labs · Feb 14, 2024 · e0353cc · e0353cc
1 parent 179f064
commit e0353cc
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/ui/src/app/favicon.ico b/ui/src/app/favicon.ico
diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx
@@ -47,12 +47,9 @@ const addresses = flattenObject(addressBook);
 export default function Home() {
   return (
     <>
-      <main className="flex min-h-screen flex-col items-center justify-start pl-4 pr-2 py-6 sm:py-10">
-        <h1 className="leading-4 text-center mb-5">
-          <div className="text-4xl font-heading font-bold">Aave</div>
-          <div className="text-[10px] uppercase font-semibold text-brand-500 tracking-wider">
-            Address Book
-          </div>
+      <main className="flex min-h-screen flex-col items-center justify-start pl-4 pr-2 py-8 sm:py-16">
+        <h1 className="leading-4 text-center mb-6">
+          <div className="text-5xl font-heading font-bold -translate-x-1">Aave</div>
         </h1>
         <Search addresses={addresses} />
         <Footer />

diff --git a/ui/src/components/Footer.tsx b/ui/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 export const Footer = () => {
   return (
-    <div className="flex items-center justify-center text-sm text-brand-500 mt-auto">
+    <div className="flex items-center justify-center text-sm text-brand-500 mt-auto -translate-x-1">
       <div>
         <div className="mb-2 text-center">by BGD Labs</div>
         <div className="flex justify-center gap-1">

diff --git a/ui/src/components/Search.tsx b/ui/src/components/Search.tsx
@@ -79,7 +79,8 @@ export const Search = ({ addresses }: { addresses: Address[] }) => {
           type="text"
           value={search}
           onChange={(e) => setSearch(e.target.value)}
-          className="outline-none py-3 px-11 w-full text-xl border border-4 border-transparent focus:border-blue-100 transition-all ring-inset focus:ring-1	ring-blue-300"
+          className="rounded-none outline-none py-3 px-11 w-full text-xl border border-4 border-transparent focus:border-blue-100 transition-all ring-inset focus:ring-1	ring-blue-300 placeholder:text-brand-500"
+          placeholder="Search..."
         />
       </Box>
       {results.length !== 0 &&

diff --git a/ui/src/components/SearchResult.tsx b/ui/src/components/SearchResult.tsx
@@ -21,7 +21,7 @@ export const SearchResult = ({ result }: { result: FuseResult<Address> }) => {
   };
 
   return (
-    <Box isHoverable>
+    <Box className="border-b-brand-900" isHoverable>
       <a
         className="px-3 pt-4 pb-4 flex gap-3 cursor-pointer"
         href={result.item.link}
@@ -43,7 +43,10 @@ export const SearchResult = ({ result }: { result: FuseResult<Address> }) => {
             {result.item.value}
           </div>
         </div>
-        <button className="ml-auto px-4 opacity-30 hover:opacity-100" onClick={handleCopyClick}>
+        <button
+          className="ml-auto px-4 opacity-30 hover:opacity-100"
+          onClick={handleCopyClick}
+        >
           <span className="flex h-6 w-6 overflow-hidden">
             <svg
               className={cn(