From ff4f3e3023c317120d1e417184abeb9dfd91233c Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Wed, 26 Apr 2023 14:06:34 -0400
Subject: [PATCH] :art: cleanup and styling of switcher dropdown

---
 static/css/styles.css           | 170 +++++++++++++-------------------
 templates/includes/_header.html |  13 ++-
 2 files changed, 78 insertions(+), 105 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index 3b1b7f83..a32d4da6 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -865,14 +865,6 @@ input[type=file] {
   pointer-events: none;
 }
 
-.visible {
-  visibility: visible;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
 .collapse {
   visibility: collapse;
 }
@@ -998,10 +990,6 @@ input[type=file] {
   margin: 0px;
 }
 
-.-m-\[1000px\] {
-  margin: -1000px;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -1282,10 +1270,6 @@ input[type=file] {
   height: 3rem;
 }
 
-.h-0 {
-  height: 0px;
-}
-
 .max-h-\[470px\] {
   max-height: 470px;
 }
@@ -1334,10 +1318,6 @@ input[type=file] {
   width: 200px;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-32 {
   width: 8rem;
 }
@@ -1346,6 +1326,10 @@ input[type=file] {
   width: 30px;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-\[90\%\] {
   width: 90%;
 }
@@ -1378,10 +1362,6 @@ input[type=file] {
   width: 0.25rem;
 }
 
-.w-0 {
-  width: 0px;
-}
-
 .min-w-0 {
   min-width: 0px;
 }
@@ -1612,6 +1592,12 @@ input[type=file] {
   margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1754,15 +1740,20 @@ input[type=file] {
   background-color: rgb(221 231 236 / 0.6);
 }
 
-.bg-charcoal {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-green\/10 {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-charcoal {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 42 52 / var(--tw-bg-opacity));
+}
+
 .bg-orange {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
@@ -1772,11 +1763,6 @@ input[type=file] {
   background-color: rgb(23 42 52 / 0.6);
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(5 26 38 / var(--tw-bg-opacity));
@@ -1800,15 +1786,6 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
-.bg-stone {
-  --tw-bg-opacity: 1;
-  background-color: rgb(221 231 236 / var(--tw-bg-opacity));
-}
-
-.bg-slate\/60 {
-  background-color: rgb(49 74 87 / 0.6);
-}
-
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1827,10 +1804,6 @@ input[type=file] {
   --tw-gradient-to: #FF9F00;
 }
 
-.fill-slate\/80 {
-  fill: rgb(49 74 87 / 0.8);
-}
-
 .fill-gold {
   fill: #F4CA1F;
 }
@@ -2152,6 +2125,10 @@ input[type=file] {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .font-thin {
   font-weight: 100;
 }
@@ -2160,10 +2137,6 @@ input[type=file] {
   font-weight: 300;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -2265,6 +2238,21 @@ input[type=file] {
   color: rgb(229 231 235 / var(--tw-text-opacity));
 }
 
+.text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
+.text-sky-400 {
+  --tw-text-opacity: 1;
+  color: rgb(56 189 248 / var(--tw-text-opacity));
+}
+
+.text-sky-500 {
+  --tw-text-opacity: 1;
+  color: rgb(14 165 233 / var(--tw-text-opacity));
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -2382,23 +2370,23 @@ input[type=file] {
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
-.hover\:fill-orange:hover {
-  fill: #FF9F00;
-}
-
 .hover\:text-orange:hover {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
 }
 
+.hover\:text-gold:hover {
+  --tw-text-opacity: 1;
+  color: rgb(244 202 31 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-gold:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 202 31 / var(--tw-text-opacity));
+.hover\:text-gold\/60:hover {
+  color: rgb(244 202 31 / 0.6);
 }
 
 .focus\:text-charcoal:focus {
@@ -2422,50 +2410,18 @@ input[type=file] {
   color: rgb(255 159 0 / var(--tw-text-opacity));
 }
 
-.dark .dark\:visible {
-  visibility: visible;
-}
-
-.dark .dark\:invisible {
-  visibility: hidden;
-}
-
-.dark .dark\:-m-\[1000px\] {
-  margin: -1000px;
-}
-
-.dark .dark\:-m-0 {
-  margin: -0px;
-}
-
 .dark .dark\:inline-block {
   display: inline-block;
 }
 
-.dark .dark\:inline-flex {
-  display: inline-flex;
+.dark .dark\:inline {
+  display: inline;
 }
 
 .dark .dark\:hidden {
   display: none;
 }
 
-.dark .dark\:h-0 {
-  height: 0px;
-}
-
-.dark .dark\:h-auto {
-  height: auto;
-}
-
-.dark .dark\:h-\[16px\] {
-  height: 16px;
-}
-
-.dark .dark\:w-0 {
-  width: 0px;
-}
-
 .dark .dark\:border-slate {
   --tw-border-opacity: 1;
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
@@ -2481,14 +2437,6 @@ input[type=file] {
   background-color: rgb(23 42 52 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:fill-white\/40 {
-  fill: rgb(255 255 255 / 0.4);
-}
-
-.dark .dark\:font-semibold {
-  font-weight: 600;
-}
-
 .dark .dark\:font-medium {
   font-weight: 500;
 }
@@ -2506,15 +2454,25 @@ input[type=file] {
   color: rgb(255 255 255 / 0.4);
 }
 
-.dark .dark\:text-stone {
-  --tw-text-opacity: 1;
-  color: rgb(221 231 236 / var(--tw-text-opacity));
-}
-
 .dark .dark\:text-white\/60 {
   color: rgb(255 255 255 / 0.6);
 }
 
+.dark .dark\:text-sky-700 {
+  --tw-text-opacity: 1;
+  color: rgb(3 105 161 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-sky-600 {
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity));
+}
+
+.dark .dark\:text-charcoal {
+  --tw-text-opacity: 1;
+  color: rgb(23 42 52 / var(--tw-text-opacity));
+}
+
 .dark .dark\:ring-gray-500 {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
@@ -2530,6 +2488,14 @@ input[type=file] {
   color: rgb(244 202 31 / var(--tw-text-opacity));
 }
 
+.dark .dark\:hover\:text-gold\/60:hover {
+  color: rgb(244 202 31 / 0.6);
+}
+
+.dark .dark\:hover\:text-gold\/80:hover {
+  color: rgb(244 202 31 / 0.8);
+}
+
 @media (min-width: 640px) {
   .sm\:mt-24 {
     margin-top: 6rem;
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 7c4f6af4..fea65ce1 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -25,7 +25,7 @@
             <a href="/libraries/" class="font-semibold dark:font-medium text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Libraries</a>
             <a href="#" class="font-semibold dark:font-medium text-charcoal dark:text-white hover:text-orange dark:hover:text-orange">Releases</a>
           </nav>
-          <nav class="items-center space-x-3 w-1/4 text-right" x-data="{ 'searchOpen': false }">
+          <nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
             <span class="relative">
               <i class="text-charcoal dark:text-white/50 hover:text-orange dark:hover:text-orange fas fa-search inline-flex -mt-1 cursor-pointer" @click="searchOpen = !searchOpen"></i>
               <div x-show="searchOpen"
@@ -48,7 +48,7 @@
                 <form action="https://www.google.com/search" method="get" name="searchform" target="_blank">
                   <input name="sitesearch" type="hidden" value="boost.org">
                   <input autocomplete="on"
-                         class="py-2 px-3 text-xs text-charcoal dark:text-white rounded-lg border-gray-300 dark:border-slate bg-white dark:charcoal"
+                         class="py-2 px-3 text-xs text-charcoal dark:text-charcoal rounded-lg border-gray-300 dark:border-slate bg-white dark:bg-charcoal"
                          name="q"
                          placeholder="Search Boost.org"
                          required="required"
@@ -67,7 +67,12 @@
 
             <!-- theme switcher -->
             <span x-data="{ 'modeOpen': false }" class="relative">
-              <i class="fas fa-sun inline-block cursor-pointer text-orange dark:text-white/50 hover:text-gold dark:hover:text-gold" @click="modeOpen = !modeOpen"></i>
+              <span class="dark:hidden">
+                <i class="fas fa-sun inline-block cursor-pointer text-sky-500 dark:text-white/50 hover:text-gold dark:hover:text-gold" @click="modeOpen = !modeOpen"></i>
+              </span>
+              <span class="hidden dark:inline">
+                <i class="fas fa-moon inline-block cursor-pointer text-orange dark:text-sky-600 hover:text-gold/60 dark:hover:text-gold/80" @click="modeOpen = !modeOpen"></i>
+              </span>
 
               <div
                 x-show="modeOpen" x-cloak
@@ -98,6 +103,7 @@
                   :class="{'font-bold': mode === 'light', 'font-thin': mode !== 'light' }"
                   class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
                   >
+                  <i class="fas fa-sun inline-block text-gold mr-1"></i>
                   Light Mode
                 </a>
 
@@ -106,6 +112,7 @@
                   :class="{'font-bold': mode === 'dark', 'font-thin': mode !== 'dark' }"
                   class="cursor-pointer block py-2 text-xs text-charcoal dark:text-white hover:text-orange dark:hover:text-orange dark:hover:text-orange dark:hover:text-orange"
                   >
+                  <i class="fas fa-moon inline-block text-sky-600 mr-1"></i>
                   Dark Mode
                 </a>
               </div>