From 7bad98965ac601d9e8a39be4492c1eea1ec62473 Mon Sep 17 00:00:00 2001
From: Stephanie Dietz <49788645+StephDietz@users.noreply.github.com>
Date: Tue, 11 Jul 2023 14:04:41 -0500
Subject: [PATCH] New header UI (#1067)

---
 app/layout.tsx                      |  2 +-
 components/layout/navbar/index.tsx  | 72 ++++++++++++++++-------------
 components/layout/navbar/search.tsx |  9 ++--
 components/logo-square.tsx          |  4 +-
 4 files changed, 45 insertions(+), 42 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index dca2c624f..74bbc1866 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -33,7 +33,7 @@ const inter = Inter({
 export default async function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.variable}>
-      <body className="bg-white text-black selection:bg-teal-300 dark:bg-black dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
+      <body className="bg-gray-50 text-black selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
         <Navbar />
         <Suspense>
           <main>{children}</main>
diff --git a/components/layout/navbar/index.tsx b/components/layout/navbar/index.tsx
index 8d036b315..ba483a2cc 100644
--- a/components/layout/navbar/index.tsx
+++ b/components/layout/navbar/index.tsx
@@ -1,51 +1,57 @@
-import Link from 'next/link';
-import { Suspense } from 'react';
-
 import Cart from 'components/cart';
 import CartIcon from 'components/icons/cart';
-import LogoIcon from 'components/icons/logo';
+import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
 import { Menu } from 'lib/shopify/types';
+import Link from 'next/link';
+import { Suspense } from 'react';
 import MobileMenu from './mobile-menu';
 import Search from './search';
+const { SITE_NAME } = process.env;
 
 export default async function Navbar() {
   const menu = await getMenu('next-js-frontend-header-menu');
 
   return (
-    <nav className="relative flex items-center justify-between bg-white p-4 dark:bg-black lg:px-6">
-      <div className="block w-1/3 md:hidden">
+    <nav className="relative flex items-center justify-between p-4 lg:px-6">
+      <div className="block flex-none md:hidden">
         <MobileMenu menu={menu} />
       </div>
-      <div className="flex justify-self-center md:w-1/3 md:justify-self-start">
-        <div className="md:mr-4">
-          <Link href="/" aria-label="Go back home">
-            <LogoIcon className="h-8 transition-transform hover:scale-110" />
+      <div className="flex w-full items-center">
+        <div className="flex w-full md:w-1/3">
+          <Link
+            href="/"
+            aria-label="Go back home"
+            className="mr-2 flex w-full items-center justify-center md:w-auto lg:mr-6"
+          >
+            <LogoSquare />
+            <div className="ml-2 flex-none text-sm font-medium uppercase md:hidden lg:block">
+              {SITE_NAME}
+            </div>
           </Link>
+          {menu.length ? (
+            <ul className="hidden text-sm md:flex md:items-center">
+              {menu.map((item: Menu) => (
+                <li key={item.title}>
+                  <Link
+                    href={item.path}
+                    className="mr-3 text-gray-500 underline-offset-4 hover:text-black hover:underline dark:hover:text-gray-400 lg:mr-8"
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+        <div className="hidden justify-center md:flex md:w-1/3">
+          <Search />
+        </div>
+        <div className="flex justify-end md:w-1/3">
+          <Suspense fallback={<CartIcon className="h-6" />}>
+            <Cart />
+          </Suspense>
         </div>
-        {menu.length ? (
-          <ul className="hidden md:flex md:items-center">
-            {menu.map((item: Menu) => (
-              <li key={item.title}>
-                <Link
-                  href={item.path}
-                  className="rounded-lg px-2 py-1 text-gray-800 hover:text-gray-500 dark:text-gray-200 dark:hover:text-gray-400"
-                >
-                  {item.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-      <div className="hidden w-1/3 md:block">
-        <Search />
-      </div>
-
-      <div className="flex w-1/3 justify-end">
-        <Suspense fallback={<CartIcon className="h-6" />}>
-          <Cart />
-        </Suspense>
       </div>
     </nav>
   );
diff --git a/components/layout/navbar/search.tsx b/components/layout/navbar/search.tsx
index 7d8e44cde..100c2bb62 100644
--- a/components/layout/navbar/search.tsx
+++ b/components/layout/navbar/search.tsx
@@ -26,20 +26,17 @@ export default function Search() {
   }
 
   return (
-    <form
-      onSubmit={onSubmit}
-      className="relative m-0 flex w-full items-center border border-gray-200 bg-transparent p-0 dark:border-gray-500"
-    >
+    <form onSubmit={onSubmit} className="relative w-full lg:w-[320px]">
       <input
         type="text"
         name="search"
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="w-full px-4 py-2 text-black dark:bg-black dark:text-gray-100"
+        className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-gray-800 dark:border-gray-800 dark:bg-transparent dark:text-gray-500 dark:placeholder:text-gray-500"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
-        <MagnifyingGlassIcon className="h-5" />
+        <MagnifyingGlassIcon className="h-4" />
       </div>
     </form>
   );
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
index 28f8c818b..62551d710 100644
--- a/components/logo-square.tsx
+++ b/components/logo-square.tsx
@@ -1,11 +1,11 @@
 import clsx from 'clsx';
 import LogoIcon from './icons/logo';
 
-export default function LogoSquare({ size }: { size: 'sm' | undefined }) {
+export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
   return (
     <div
       className={clsx(
-        'flex items-center justify-center border border-gray-200 dark:border-gray-700',
+        'flex flex-none items-center justify-center border border-gray-200 dark:border-gray-700',
         {
           'h-[40px] w-[40px] rounded-xl': !size,
           'h-[30px] w-[30px] rounded-lg': size === 'sm'
