UI refresh for search page (#1072)

app/search/layout.tsx

@@ -7,7 +7,7 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense>
-      <div className="mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row">
+      <div className="mx-auto flex flex-col py-6 text-black dark:text-white md:flex-row">
         <div className="order-first flex-none md:w-1/6">
           <Collections />
         </div>

components/carousel.tsx

@@ -1,7 +1,6 @@
 import { getCollectionProducts } from 'lib/shopify';
-import Image from 'next/image';
 import Link from 'next/link';
-import Label from './label';
+import { GridTileImage } from './grid/tile';
 
 export async function Carousel() {
   // Collections that start with `hidden-*` are hidden from the search page.
@@ -18,19 +17,17 @@ export async function Carousel() {
             href={`/product/${product.handle}`}
             className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3"
           >
-            {product.featuredImage ? (
+            <GridTileImage
-              <Image
               alt={product.title}
-                className="h-full object-contain"
+              labels={{
-                fill
+                isSmall: true,
-                sizes="33vw"
+                title: product.title,
-                src={product.featuredImage.url}
+                amount: product.priceRange.maxVariantPrice.amount,
-              />
+                currencyCode: product.priceRange.maxVariantPrice.currencyCode
-            ) : null}
+              }}
-            <Label
+              src={product.featuredImage?.url}
-              title={product.title}
+              width={600}
-              amount={product.priceRange.maxVariantPrice.amount}
+              height={600}
-              currencyCode={product.priceRange.maxVariantPrice.currencyCode}
             />
           </Link>
         ))}

components/grid/tile.tsx

@@ -22,7 +22,7 @@ export function GridTileImage({
   return (
     <div
       className={clsx(
-        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white dark:bg-black',
+        'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border bg-white hover:border-blue-600 dark:bg-black',
         active !== undefined && active
           ? 'border-2 border-blue-600'
           : 'border-gray-200 dark:border-gray-800',

components/layout/search/filter/index.tsx

@@ -19,9 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
   return (
     <>
       <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
-        {title ? (
+        {title ? <h3 className="hidden text-xs text-gray-500 md:block">{title}</h3> : null}
-          <h3 className="hidden font-semibold text-black dark:text-white md:block">{title}</h3>
-        ) : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>

components/layout/search/filter/item.tsx

@@ -21,13 +21,15 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
   }, [pathname, item.path]);
 
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
+    <li className="mt-2 flex text-black dark:text-white" key={item.title}>
       <Link
         href={createUrl(item.path, newParams)}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
+        className={clsx(
-          'text-gray-600 dark:text-gray-400': !active,
+          'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100',
-          'font-semibold text-black dark:text-white': active
+          {
-        })}
+            'underline underline-offset-4': active
+          }
+        )}
       >
         {item.title}
       </Link>
@@ -57,13 +59,12 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
       : pathname;
 
   return (
-    <li className="mt-2 flex text-sm text-gray-400" key={item.title}>
+    <li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
       <Link
         prefetch={false}
         href={href}
-        className={clsx('w-full hover:text-gray-800 dark:hover:text-gray-100', {
+        className={clsx('w-full', {
-          'text-gray-600 dark:text-gray-400': !active,
+          'underline underline-offset-4': active
-          'font-semibold text-black dark:text-white': active
         })}
       >
         {item.title}