Merge pull request #942 from Spiteless/ts.highlight_nav_links

Add highlighting to Nav links, ThemeSwitch dropdown

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

@@ -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,13 +37,14 @@ 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>
     <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)
@@ -55,8 +56,10 @@ 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>{resolvedTheme === 'dark' ? <Moon /> : <Sun />}</Menu.Button>
+          <Menu.Button>
+            {mounted ? resolvedTheme === 'dark' ? <Moon /> : <Sun /> : <Blank />}
+          </Menu.Button>
         </div>
         <Transition
           as={Fragment}
@@ -72,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">
+                    {({ active }) => (
-                      <div className="mr-2">
+                      <button
-                        <Sun />
+                        className={`${
-                      </div>
+                          active ? 'bg-primary-600 text-white' : ''
-                      Light
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-                    </button>
+                      >
+                        <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">
+                    {({ active }) => (
-                      <div className="mr-2">
+                      <button
-                        <Moon />
+                        className={`${
-                      </div>
+                          active ? 'bg-primary-600 text-white' : ''
-                      Dark
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-                    </button>
+                      >
+                        <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">
+                    {({ active }) => (
-                      <div className="mr-2">
+                      <button
-                        <Monitor />
+                        className={`${
-                      </div>
+                          active ? 'bg-primary-600 text-white' : ''
-                      System
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-                    </button>
+                      >
+                        <div className="mr-2">
+                          <Monitor />
+                        </div>
+                        System
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
               </div>