From e5927701c01763a67766d20b672ce67569b068c7 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 3 Feb 2023 09:07:10 -0500
Subject: [PATCH 1/4] :bug: fix x-cloak

---
 frontend/styles.css           |  4 +++
 static/css/styles.css         | 50 +++++------------------------------
 templates/libraries/list.html |  9 ++++---
 3 files changed, 16 insertions(+), 47 deletions(-)

diff --git a/frontend/styles.css b/frontend/styles.css
index 36e38075..f1e98c43 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -4,6 +4,10 @@
 @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap");
 
 @layer base {
+  [x-cloak] {
+    display: none !important;
+  }
+
   body {
     color: white;
     @apply font-cairo;
diff --git a/static/css/styles.css b/static/css/styles.css
index 73d8dca6..f2162efb 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -582,6 +582,10 @@ select {
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+[x-cloak] {
+  display: none !important;
+}
+
 body {
   color: white;
   font-family: 'Cairo', sans-serif;
@@ -1339,18 +1343,6 @@ input[type=file] {
   transform-origin: top right;
 }
 
-.scale-95 {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1646,17 +1638,13 @@ input[type=file] {
   background-color: rgb(23 42 52 / 0.6);
 }
 
-.bg-slate {
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
-}
-
 .bg-transparent {
   background-color: transparent;
 }
 
-.bg-opacity-25 {
-  --tw-bg-opacity: 0.25;
+.bg-slate {
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 74 87 / var(--tw-bg-opacity));
 }
 
 .bg-opacity-50 {
@@ -2068,14 +2056,6 @@ input[type=file] {
   color: rgb(255 255 255 / 0.6);
 }
 
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-100 {
-  opacity: 1;
-}
-
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2108,22 +2088,6 @@ input[type=file] {
   transition-duration: 150ms;
 }
 
-.duration-300 {
-  transition-duration: 300ms;
-}
-
-.duration-200 {
-  transition-duration: 200ms;
-}
-
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
 .last\:border-0:last-child {
   border-width: 0px;
 }
diff --git a/templates/libraries/list.html b/templates/libraries/list.html
index d0a9201e..c47a56b1 100644
--- a/templates/libraries/list.html
+++ b/templates/libraries/list.html
@@ -29,10 +29,10 @@
         {% csrf_token %}
         <div>
           <label for="id_categories" hidden="true">Categories:</label>
-          <select  onchange="this.form.submit()"
-                   name="categories"
-                   class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
-                   id="id_categories"
+          <select onchange="this.form.submit()"
+                  name="categories"
+                  class="mb-3 md:mb-0 w-full md:w-auto cursor-pointer block sm:inline-block text-sm uppercase rounded-md bg-black text-orange border border-slate pl-5 pr-11 py-2"
+                  id="id_categories"
           >
             <option>Filter by category</option>
             {% for c in categories %}
@@ -42,6 +42,7 @@
         </div>
       </form>
     </div>
+    <!-- command palatte for search -->
     {% include "libraries/includes/search_command_palatte.html" %}
   </div>
 

From a216a1a0732d64920c74c799a584873f9f9b99bd Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 3 Feb 2023 09:08:18 -0500
Subject: [PATCH 2/4] :bug: fix click to close modal

---
 templates/libraries/includes/search_command_palatte.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/libraries/includes/search_command_palatte.html b/templates/libraries/includes/search_command_palatte.html
index fea2bf64..7d0a9095 100644
--- a/templates/libraries/includes/search_command_palatte.html
+++ b/templates/libraries/includes/search_command_palatte.html
@@ -8,7 +8,7 @@
 >
   <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
 
-  <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+  <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20" x-on:click="showSearch = false">
     <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-black shadow-2xl transition-all">
       <div class="relative">
         <!-- Heroicon name: outline/magnifying-glass -->

From 24125424f6fcc1f3d6239f13066b794503d76073 Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 3 Feb 2023 09:19:47 -0500
Subject: [PATCH 3/4] :art: better palette bg color

* changed color
* added dray to tailwind config
* fixed regressions with colors
---
 static/css/styles.css                         | 82 ++++++++++++++++++-
 tailwind.config.js                            |  1 +
 templates/forum/forum_list.html               |  6 +-
 templates/homepage.html                       |  4 +-
 templates/includes/_header.html               | 16 ++--
 .../includes/search_command_palatte.html      |  2 +-
 .../socialaccount/snippets/provider_list.html |  2 +-
 .../versions/_past_version_list_item.html     |  4 +-
 8 files changed, 99 insertions(+), 18 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index f2162efb..d6b62629 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -16,7 +16,7 @@
   /* 2 */
   border-style: solid;
   /* 2 */
-  border-color: currentColor;
+  border-color: #e5e7eb;
   /* 2 */
 }
 
@@ -1521,6 +1521,11 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-divide-opacity));
 }
 
+.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
+}
+
 .divide-opacity-20 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 0.2;
 }
@@ -1610,6 +1615,11 @@ input[type=file] {
   border-color: rgb(49 74 87 / var(--tw-border-opacity));
 }
 
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
 .border-charcoal {
   --tw-border-opacity: 1;
   border-color: rgb(23 42 52 / var(--tw-border-opacity));
@@ -1634,14 +1644,29 @@ input[type=file] {
   background-color: rgb(90 213 153 / 0.1);
 }
 
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
+
 .bg-charcoal\/60 {
   background-color: rgb(23 42 52 / 0.6);
 }
 
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
 
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
 .bg-slate {
   --tw-bg-opacity: 1;
   background-color: rgb(49 74 87 / var(--tw-bg-opacity));
@@ -2018,6 +2043,16 @@ input[type=file] {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
 .text-orange {
   --tw-text-opacity: 1;
   color: rgb(255 159 0 / var(--tw-text-opacity));
@@ -2037,6 +2072,21 @@ input[type=file] {
   color: rgb(49 74 87 / var(--tw-text-opacity));
 }
 
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .text-gold {
   --tw-text-opacity: 1;
   color: rgb(244 202 31 / var(--tw-text-opacity));
@@ -2056,6 +2106,21 @@ input[type=file] {
   color: rgb(255 255 255 / 0.6);
 }
 
+.text-gray-200 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity));
+}
+
+.placeholder-gray-500::-moz-placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
+}
+
+.placeholder-gray-500::placeholder {
+  --tw-placeholder-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-placeholder-opacity));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2097,11 +2162,26 @@ input[type=file] {
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-gray-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-orange:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 159 0 / var(--tw-bg-opacity));
 }
 
+.hover\:text-gray-900:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
diff --git a/tailwind.config.js b/tailwind.config.js
index bf8acaf3..a8f37631 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,7 @@ module.exports = {
       current: 'currentColor',
       white: colors.white,
       emerald: colors.emerald,
+      gray: colors.gray,
       indigo: colors.indigo,
       yellow: colors.yellow,
       red: colors.red,
diff --git a/templates/forum/forum_list.html b/templates/forum/forum_list.html
index d2cdbf1e..9e592fe6 100644
--- a/templates/forum/forum_list.html
+++ b/templates/forum/forum_list.html
@@ -12,7 +12,7 @@
     {% if node.level == root_level %}
     {% if node.obj.is_category %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist rounded">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
         <div class="flex m-0 px-3 py-2 border-b border-slate">
           <div class="pl-0 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-full forum-name-col">
             <h3 class="m-0 mb-3 h5"><a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="text-gray-900">{{ node.obj.name }}</a></h3>
@@ -30,7 +30,7 @@
     {% with node.previous_sibling.obj as previous_sibling %}
     {% if previous_sibling and previous_sibling.is_category or not previous_sibling in forum_contents.visible_forums or not previous_sibling %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border bg-charcoal border-1 border-slate forumlist">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-slate text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate text-gray-900">
         <div class="flex m-0 px-3 py-2 border-b border-slate">
           <div class="pl-0 w-3/4 forum-name-col">
             <h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>
@@ -198,7 +198,7 @@
     {% endrecurseforumcontents %}
     {% else %}
     <div class="mt-3 relative flex flex-col min-w-0 rounded break-words border border-1 border-gray-300 forumlist">
-      <div class="p-0 py-3 px-6 mb-0 bg-gray-200 border-b-1 border-gray-300 text-gray-900">
+      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-gray-300 text-gray-900">
         <div class="flex flex-wrap  m-0 px-3 py-2">
           <div class="pl-0 md:w-2/3 pr-4 pl-4 sm:w-3/4 pr-4 pl-4 w-3/4 forum-name-col">
             <h3 class="m-0 mb-3 h5 text-gray-900">{% trans "Forums" %}</h3>
diff --git a/templates/homepage.html b/templates/homepage.html
index 4c2e62a9..5d5210d5 100644
--- a/templates/homepage.html
+++ b/templates/homepage.html
@@ -16,7 +16,7 @@
         <p class="mt-3 md:mb-11 max-w-md mx-auto text-base text-gray-500 text-lg md:mt-5 md:text-xl md:max-w-3xl">Experience C++ libraries created by experts to be reliable, skillfully designed, and well-tested.</p>
         <div class="mt-5 max-w-md md:flex justify-center md:justify-between md:mt-8 space-y-3 md:space-y-0">
           <a href="#" class="flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-4"><img class="mt-1 pr-2" src="{% static 'img/icons/icon-download-orng.svg' %}" alt="Downloads" /> Download Latest </a>
-          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+          <a href="#" class="flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
         </div>
       </div>
     </div>
@@ -63,7 +63,7 @@
             <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Download </a>
           </div>
           <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-base md:px-10"> Version Details > </a>
+            <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-base md:px-10"> Version Details > </a>
           </div>
         </div>
       </div>
diff --git a/templates/includes/_header.html b/templates/includes/_header.html
index 3e76079f..21e451b3 100644
--- a/templates/includes/_header.html
+++ b/templates/includes/_header.html
@@ -2,7 +2,7 @@
 {% load account socialaccount %}
 
 
-<div class="relative bg-gray-50">
+<div class="relative">
   <div class="relative pb-11 md:pb-6">
     <div>
       <div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
@@ -66,7 +66,7 @@
                 <span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
               </div>
               <button type="button"
-                    class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
+                    class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
                     aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                     x-bind:aria-expanded="open.toString()">
                 <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened" class="hidden h-6 w-6"
@@ -81,7 +81,7 @@
               <a href="{% url 'home' %}"><img class="inline w-auto h-[30px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost"></a>
             </div>
             <button type="button"
-                    class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
+                    class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:text-white focus:outline-none"
                     aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                     x-bind:aria-expanded="open.toString()">
               <span class="sr-only">Open main menu</span>
@@ -113,15 +113,15 @@
               <a href="{% url 'donate' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
             </div>
             <div class="px-2 pt-2 pb-3 absolute bottom-10 left-0 text-sm">
-              <a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>
+              <a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">About</a>
 
-              <a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>
+              <a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Support</a>
 
-              <a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>
+              <a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Resources</a>
 
-              <a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Sign Up</a>
+              <a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Sign Up</a>
 
-              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Log In </a>
+              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900">Log In </a>
             </div>
           </div>
       </div>
diff --git a/templates/libraries/includes/search_command_palatte.html b/templates/libraries/includes/search_command_palatte.html
index 7d0a9095..2d47d84c 100644
--- a/templates/libraries/includes/search_command_palatte.html
+++ b/templates/libraries/includes/search_command_palatte.html
@@ -9,7 +9,7 @@
   <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
 
   <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20" x-on:click="showSearch = false">
-    <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-black shadow-2xl transition-all">
+    <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-charcoal shadow-2xl transition-all">
       <div class="relative">
         <!-- Heroicon name: outline/magnifying-glass -->
         <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
diff --git a/templates/socialaccount/snippets/provider_list.html b/templates/socialaccount/snippets/provider_list.html
index 15715f3e..21361062 100644
--- a/templates/socialaccount/snippets/provider_list.html
+++ b/templates/socialaccount/snippets/provider_list.html
@@ -6,7 +6,7 @@
 {% if provider.id == "openid" %}
 {% for brand in provider.get_brands %}
   <a title="{{brand.name}}"
-     class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
+     class="block px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10 {{provider.id}} {{brand.id}}"
      href="{% provider_login_url provider.id openid=brand.openid_url process=process %}"
      >{{brand.name}}</a>
 {% endfor %}
diff --git a/templates/versions/_past_version_list_item.html b/templates/versions/_past_version_list_item.html
index b9828c2a..a03cac56 100644
--- a/templates/versions/_past_version_list_item.html
+++ b/templates/versions/_past_version_list_item.html
@@ -10,8 +10,8 @@
         <a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-orange text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Download </a>
       </div>
       <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
-        <a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange hover:bg-gray-50 md:py-4 md:text-lg md:px-10"> Version Details > </a>
+        <a href="{% url 'version-detail' v.pk %}" class="w-full flex items-center justify-center px-8 py-3 border border-steel text-base font-medium rounded-md text-orange md:py-4 md:text-lg md:px-10"> Version Details > </a>
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>

From fd88562640b225c81cdf05e506afbc23d7f7fffe Mon Sep 17 00:00:00 2001
From: Greg Newman <greg@gregnewman.org>
Date: Fri, 3 Feb 2023 09:24:46 -0500
Subject: [PATCH 4/4] :art: darken that background

---
 static/css/styles.css                                | 12 ++++++++++++
 .../libraries/includes/search_command_palatte.html   |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index d6b62629..11ed7740 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1676,6 +1676,18 @@ input[type=file] {
   --tw-bg-opacity: 0.5;
 }
 
+.bg-opacity-30 {
+  --tw-bg-opacity: 0.3;
+}
+
+.bg-opacity-25 {
+  --tw-bg-opacity: 0.25;
+}
+
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
diff --git a/templates/libraries/includes/search_command_palatte.html b/templates/libraries/includes/search_command_palatte.html
index 2d47d84c..d4bafbb1 100644
--- a/templates/libraries/includes/search_command_palatte.html
+++ b/templates/libraries/includes/search_command_palatte.html
@@ -6,7 +6,7 @@
      x-transition
      x-cloak
 >
-  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
+  <div class="fixed inset-0 bg-black bg-opacity-70 transition-opacity"></div>
 
   <div class="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20" x-on:click="showSearch = false">
     <div class="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-20 overflow-hidden rounded-xl bg-charcoal shadow-2xl transition-all">