From 1101b2c2660fcf8cb4a917217d3813ee34414190 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Wed, 19 Jun 2024 13:07:13 -0700
Subject: [PATCH 1/5] feat: Create Blank svg as placeholder while ThemeSwitch
 mounts

---
 components/ThemeSwitch.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 178ec46..7f66b19 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -44,6 +44,7 @@ const Monitor = () => (
     <line x1="10" y1="13" x2="10" y2="17"></line>
   </svg>
 )
+const Blank = () => <svg className="h-6 w-6" />
 
 const ThemeSwitch = () => {
   const [mounted, setMounted] = useState(false)

From 3044443bf189e4a8d0f6357c18e3a2acb87ae2f4 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Wed, 19 Jun 2024 13:09:12 -0700
Subject: [PATCH 2/5] feat: Render Blank icon if theme isn't mounted yet

---
 components/ThemeSwitch.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 7f66b19..45bde0c 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -57,7 +57,9 @@ const ThemeSwitch = () => {
     <div className="mr-5">
       <Menu as="div" className="relative inline-block text-left">
         <div>
-          <Menu.Button>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
+          <Menu.Button>
+            {mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
+          </Menu.Button>
         </div>
         <Transition
           as={Fragment}

From 8665738d27acdbc5e4029fb3c7f8f510c464ea52 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Wed, 19 Jun 2024 13:11:36 -0700
Subject: [PATCH 3/5] feat: Add hover highlight classes to Nav links and svgs

---
 components/Header.tsx       | 3 ++-
 components/MobileNav.tsx    | 9 ++++++---
 components/SearchButton.tsx | 3 ++-
 components/ThemeSwitch.tsx  | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 362b7cd..3cd13aa 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -32,7 +32,8 @@ const Header = () => {
             <Link
               key={link.title}
               href={link.href}
-              className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
+              className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
+              sm:block"
             >
               {link.title}
             </Link>
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index b777b82..7cc2f17 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -26,7 +26,8 @@ const MobileNav = () => {
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="h-8 w-8 text-gray-900 dark:text-gray-100"
+          className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100
+          dark:hover:text-primary-400"
         >
           <path
             fillRule="evenodd"
@@ -46,7 +47,8 @@ const MobileNav = () => {
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
               fill="currentColor"
-              className="text-gray-900 dark:text-gray-100"
+              className="text-gray-900 hover:text-primary-500 dark:text-gray-100
+              dark:hover:text-primary-400"
             >
               <path
                 fillRule="evenodd"
@@ -61,7 +63,8 @@ const MobileNav = () => {
             <div key={link.title} className="px-12 py-4">
               <Link
                 href={link.href}
-                className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
+                className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100
+                dark:hover:text-primary-400"
                 onClick={onToggleNav}
               >
                 {link.title}
diff --git a/components/SearchButton.tsx b/components/SearchButton.tsx
index 3685066..9492caf 100644
--- a/components/SearchButton.tsx
+++ b/components/SearchButton.tsx
@@ -18,7 +18,8 @@ const SearchButton = () => {
           viewBox="0 0 24 24"
           strokeWidth={1.5}
           stroke="currentColor"
-          className="h-6 w-6 text-gray-900 dark:text-gray-100"
+          className="h-6 w-6 text-gray-900 hover:text-primary-500 dark:text-gray-100
+          dark:hover:text-primary-400"
         >
           <path
             strokeLinecap="round"
diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 45bde0c..0b2408f 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -56,7 +56,7 @@ const ThemeSwitch = () => {
   return (
     <div className="mr-5">
       <Menu as="div" className="relative inline-block text-left">
-        <div>
+        <div className="hover:text-primary-500 dark:hover:text-primary-400">
           <Menu.Button>
             {mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
           </Menu.Button>

From 44b5637398c664c5074c3a43c91638578968330f Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Wed, 19 Jun 2024 13:19:52 -0700
Subject: [PATCH 4/5] feat: Adapt svg classes to use color of parent, add
 group:hover

---
 components/ThemeSwitch.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 0b2408f..792c921 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -9,7 +9,7 @@ const Sun = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     fill="currentColor"
-    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+    className="group:hover:text-gray-100 h-6 w-6"
   >
     <path
       fillRule="evenodd"
@@ -23,7 +23,7 @@ const Moon = () => (
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 20 20"
     fill="currentColor"
-    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+    className="group:hover:text-gray-100 h-6 w-6"
   >
     <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
   </svg>
@@ -37,7 +37,7 @@ const Monitor = () => (
     stroke-width="2"
     stroke-linecap="round"
     stroke-linejoin="round"
-    className="h-6 w-6 text-gray-900 dark:text-gray-100"
+    className="group:hover:text-gray-100 h-6 w-6"
   >
     <rect x="3" y="3" width="14" height="10" rx="2" ry="2"></rect>
     <line x1="7" y1="17" x2="13" y2="17"></line>

From ee996476d04f19711c9dc8dc8c3cfc9194ef2dc8 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Wed, 19 Jun 2024 13:20:47 -0700
Subject: [PATCH 5/5] feat: Refactor menu items with { active } to use
 headlessui highlighting

---
 components/ThemeSwitch.tsx | 54 +++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 792c921..9f59b0f 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -75,32 +75,50 @@ const ThemeSwitch = () => {
               <div className="p-1">
                 <RadioGroup.Option value="light">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Sun />
-                      </div>
-                      Light
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Sun />
+                        </div>
+                        Light
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
                 <RadioGroup.Option value="dark">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Moon />
-                      </div>
-                      Dark
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Moon />
+                        </div>
+                        Dark
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
                 <RadioGroup.Option value="system">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Monitor />
-                      </div>
-                      System
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Monitor />
+                        </div>
+                        System
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
               </div>