Add background texture and improve header logo

src/components/layout/AppLayout.tsx

@@ -17,7 +17,7 @@ export function AppLayout({ pathName, children }: PropsWithChildren<Props>) {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>{`Hyperlane Explorer | ${getHeadTitle(pathName)}`}</title>
       </Head>
-      <div className="h-full min-h-screen w-full min-w-screen bg-gray-100">
+      <div id="app-content" className="h-full min-h-screen w-full min-w-screen">
         <div className="max-w-5xl mx-auto flex flex-col justify-between min-h-screen">
           <Header pathName={pathName} />
           <main className="w-full flex-1">{children}</main>

src/components/nav/Header.tsx

@@ -7,6 +7,7 @@ import BookIcon from '../../images/icons/book.svg';
 import HamburgerIcon from '../../images/icons/hamburger.svg';
 import HouseIcon from '../../images/icons/house.svg';
 import InfoIcon from '../../images/icons/info-circle.svg';
+import Explorer from '../../images/logos/hyperlane-explorer.svg';
 import Logo from '../../images/logos/hyperlane-logo.svg';
 import Name from '../../images/logos/hyperlane-name.svg';
 import { MiniSearchBar } from '../search/MiniSearchBar';
@@ -26,11 +27,9 @@ export function Header({ pathName }: { pathName: string }) {
       <div className="flex items-center justify-between">
         <Link href="/" className="flex items-center">
           <div className="flex items-center scale-90 sm:scale-100">
-            <Image src={Logo} width={22} height={22} alt="" />
-            <Image src={Name} width={110} height={22} alt="Hyperlane" className="mt-0.5 ml-2" />
-            <h1 className="ml-2 font-serif text-[1.75rem] xs:text-[1.65rem] leading-[0.5rem] text-blue-500">
-              Explorer
-            </h1>
+            <Image src={Logo} width={22} alt="" />
+            <Image src={Name} width={110} alt="Hyperlane" className="mt-0.5 ml-2" />
+            <Image src={Explorer} width={108} alt="Explorer" className="mt-0.5 ml-2" />
           </div>
         </Link>
         <nav

src/images/logos/hyperlane-explorer.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122 32"><path d="M.97 22.92h2.74V4.15H.98V3.08h17.68v5.96h-1.07c-.04-.75-.1-1.42-.19-2-.08-.6-.25-1.1-.52-1.51-.53-.84-1.6-1.3-3.23-1.38H7.4v8.58h3.41a3.5 3.5 0 0 0 1.78-.36c.42-.26.68-.7.77-1.33l.04-.58.05-.61h1.15v7.05h-1.15a37.27 37.27 0 0 1-.1-1.4c-.08-.63-.34-1.07-.77-1.32a3.4 3.4 0 0 0-1.77-.38H7.4v9.13h5.85c2.4 0 3.85-1.1 4.36-3.32.15-.64.24-1.3.29-1.97h1.06V24H.97v-1.08Z" fill="#025AA1"/><path d="M21.1 22.93H23l4.28-5.08-5.07-6.77h-1.36v-1.07h7.3v1.07H26.2l3.23 4.27 3.51-4.27h-1.9v-1.07h4.98v1.07h-1.56l-4.34 5.18 5.08 6.67h1.38V24h-7.24v-1.07h1.75L28 18.76l-3.45 4.17h1.82V24H21.1v-1.07Z" fill="#025AA1"/><path d="M42.66 11.5c1.05-1.14 2.67-1.72 4.84-1.72a6.38 6.38 0 0 1 4.29 1.73c1.28 1.28 1.91 3.07 1.91 5.38 0 2.3-.66 4.12-1.98 5.43a6.63 6.63 0 0 1-4.84 1.95 7.61 7.61 0 0 1-3.38-.75 4.6 4.6 0 0 1-.84-.52v7.59h2.47v1.07h-8.08v-1.07h2.05V11.11h-2.18V10h5.74v1.5Zm3.65 11.6c2.38 0 3.57-2 3.57-6.02 0-2.98-.65-4.86-1.93-5.63a3.15 3.15 0 0 0-1.71-.4 4 4 0 0 0-2.01.6 4.7 4.7 0 0 0-1.57 1.5v8.39a4.9 4.9 0 0 0 2.7 1.45c.32.07.64.1.95.1Z" fill="#025AA1"/><path d="M55.17 22.93h2.13V2.06h-2.23V.98h5.85v21.95h2.3V24h-8.05v-1.07Z" fill="#025AA1"/><path d="M64.12 17c0-2.15.69-3.9 2.05-5.22a7.1 7.1 0 0 1 5.16-2c2.08 0 3.79.67 5.13 2A6.98 6.98 0 0 1 78.48 17c0 2.15-.67 3.9-2.01 5.25a6.89 6.89 0 0 1-5.13 2.02 7.07 7.07 0 0 1-5.18-2.02A7.08 7.08 0 0 1 64.12 17Zm7.18 6.14c1.84 0 2.92-1.25 3.24-3.76.1-.75.14-1.55.14-2.4 0-1.93-.22-3.37-.66-4.33a2.79 2.79 0 0 0-2.72-1.72c-1.84 0-2.92 1.21-3.24 3.64-.09.73-.14 1.54-.14 2.4 0 1.93.22 3.4.66 4.38a2.8 2.8 0 0 0 2.72 1.79Z" fill="#025AA1"/><path d="M85.71 11.9a6.76 6.76 0 0 1 4.76-2.12c.55 0 1.03.18 1.45.55.42.36.63.83.63 1.4s-.18 1.03-.54 1.39c-.35.35-.78.53-1.3.53a1.8 1.8 0 0 1-1.3-.52 1.8 1.8 0 0 1-.51-1.31c0-.21.03-.43.1-.64a7.2 7.2 0 0 0-3.29 2.03v9.74h3V24h-8.62v-1.05h2.04V11.08h-2.05v-1.07h5.63v1.89Z" fill="#025AA1"/><path d="M107 21.6c-1.43 1.78-3.47 2.67-6.11 2.67a7.6 7.6 0 0 1-5.16-2.07 7.05 7.05 0 0 1-2.06-5.23c0-2.12.7-3.85 2.08-5.18a7.3 7.3 0 0 1 5.28-2c3.13 0 5.1 1.32 5.91 3.94.27.84.4 1.78.4 2.83h-9.9v.41c0 2.82.8 4.67 2.4 5.55.53.3 1.18.45 1.92.45 1.66 0 3.17-.67 4.52-2.02l.72.66Zm-3.34-6.16a7.15 7.15 0 0 0-.67-3.33c-.42-.78-1.13-1.17-2.1-1.17-1.98 0-3.1 1.5-3.38 4.5h6.15Z" fill="#025AA1"/><path d="M114.92 11.9a6.76 6.76 0 0 1 4.75-2.12c.55 0 1.03.18 1.45.55.42.36.63.83.63 1.4s-.18 1.03-.53 1.39c-.36.35-.79.53-1.3.53s-.94-.17-1.3-.52c-.34-.35-.52-.8-.52-1.31 0-.21.04-.43.11-.64a7.2 7.2 0 0 0-3.3 2.03v9.74h3V24h-8.61v-1.05h2.03V11.08h-2.05v-1.07h5.64v1.89Z" fill="#025AA1"/></svg>

src/styles/globals.css

@@ -34,6 +34,24 @@ select:focus {
   outline: none;
 }
 
+/*
+Background 
+==========
+*/
+#app-content::before {
+  content: '';
+  position: fixed;
+  z-index: -1;
+  display: block;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f3f4f6;
+  background-image: url("/background-texture.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+}
+
 /*
 Text and shadows
 ================