feat: Add hover highlight classes to Nav links and svgs

Author: trillium

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>

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}

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"

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>