From 46fb942cfa94a892a2b17195eeb2476a9f41a782 Mon Sep 17 00:00:00 2001
From: StephDietz <steph.dietz@vercel.com>
Date: Wed, 12 Jul 2023 14:25:08 -0500
Subject: [PATCH] side nav design updates

---
 app/search/layout.tsx                     |  2 +-
 components/layout/search/filter/index.tsx |  4 +---
 components/layout/search/filter/item.tsx  | 19 ++++++++++---------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index 872276d7e..f7f83ec77 100644
--- a/app/search/layout.tsx
+++ b/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>
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index d740faeaa..646c9bf6b 100644
--- a/components/layout/search/filter/index.tsx
+++ b/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 ? (
-          <h3 className="hidden font-semibold text-black dark:text-white md:block">{title}</h3>
-        ) : null}
+        {title ? <h3 className="hidden text-xs text-gray-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />
         </ul>
diff --git a/components/layout/search/filter/item.tsx b/components/layout/search/filter/item.tsx
index 1a3b73ad3..847493eb2 100644
--- a/components/layout/search/filter/item.tsx
+++ b/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', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
-        })}
+        className={clsx(
+          'w-full text-sm underline-offset-4 hover:underline dark:hover:text-gray-100',
+          {
+            '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', {
-          'text-gray-600 dark:text-gray-400': !active,
-          'font-semibold text-black dark:text-white': active
+        className={clsx('w-full', {
+          'underline underline-offset-4': active
         })}
       >
         {item.title}