Add white borders and restyle search modal for dark theme

Button Border Improvements:
- Add white border with opacity to 'Redis for AI' button for visibility on dark background
- Add matching white border to search button in header navigation
- Add consistent white borders to all rectangular buttons in home page content
- Enhance hover effects with increased border opacity

Search Modal Dark Theme:
- Update modal background to redis-ink-900 with white border
- Style search input with dark background and white text
- Update filter dropdown with dark theme colors
- Restyle cancel button to match site button design
- Add comprehensive CSS for search results styling
- Update search icon and dropdown arrow colors for visibility
- Style search result items with proper hover and selection states
- Add yellow highlighting for search term matches with proper contrast

These updates ensure all interactive elements have proper visibility and consistent styling with the redis.io dark theme while maintaining excellent accessibility and user experience.

Author: mich-elle-luna

layouts/partials/components/button-link.html

@@ -2,5 +2,5 @@
 {{ if eq .AltColors true }}
 <a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-white text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-[#163341] hover:border-[#163341] hover:text-white transition-colors" href="{{ .Href }}">{{ .Text }}</a>
 {{ else }}
-<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-[#163341] text-white border border-[#163341] rounded hover:bg-[#1a3a4a] hover:border-[#1a3a4a] transition-colors" href="{{ .Href }}">{{ .Text }}</a>
+<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-[#163341] text-white border border-white border-opacity-30 rounded hover:bg-[#1a3a4a] hover:border-opacity-50 transition-colors" href="{{ .Href }}">{{ .Text }}</a>
 {{ end }}

layouts/partials/header.html

@@ -9,7 +9,7 @@
       <div class="hidden lg:flex flex-row h-full items-center">
         <div class="group h-full px-2 xl:px-[14px]">
           <div class="flex flex-row h-full items-center cursor-pointer w-[18ch] justify-between">
-            <div class="relative flex rounded-[20px] border border-[#091a23] px-4 pl-9 py-1 transition-all duration-500 group-hover:border-[#ff4438]">
+            <div class="relative flex rounded-[20px] border border-white border-opacity-50 px-4 pl-9 py-1 transition-all duration-500 group-hover:border-[#ff4438]">
               <svg class="absolute top-0 left-[-112px] right-0 bottom-0 m-auto w-4 h-4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path class="transform origin-center transition-transform duration-300 group-hover:scale-150" id="star-bottom" d="M11.1718 9.68706C11.2845 9.38235 11.7155 9.38235 11.8282 9.68706L12.3895 11.2037C12.4249 11.2995 12.5005 11.3751 12.5963 11.4105L14.1129 11.9717C14.4176 12.0845 14.4176 12.5155 14.1129 12.6282L12.5963 13.1895C12.5005 13.2249 12.4249 13.3004 12.3895 13.3962L11.8282 14.9129C11.7155 15.2176 11.2845 15.2176 11.1718 14.9129L10.6105 13.3962C10.5751 13.3004 10.4995 13.2249 10.4037 13.1895L8.88708 12.6282C8.58236 12.5155 8.58236 12.0845 8.88708 11.9717L10.4037 11.4105C10.4995 11.3751 10.5751 11.2995 10.6105 11.2037L11.1718 9.68706Z" fill="#FF4438"></path>
                 <path class="transform origin-center transition-transform duration-300 group-hover:scale-50" id="star-top" d="M5.27175 1.68707C5.38451 1.38235 5.81549 1.38235 5.92825 1.68706L7.05666 4.73654C7.09211 4.83235 7.16764 4.90788 7.26344 4.94333L10.3129 6.07174C10.6176 6.18449 10.6176 6.61548 10.3129 6.72824L7.26344 7.85665C7.16764 7.8921 7.09211 7.96763 7.05666 8.06343L5.92825 11.1129C5.81549 11.4176 5.38451 11.4176 5.27175 11.1129L4.14334 8.06343C4.10789 7.96763 4.03236 7.8921 3.93656 7.85665L0.887077 6.72824C0.582361 6.61548 0.58236 6.18449 0.887077 6.07174L3.93656 4.94333C4.03236 4.90788 4.10789 4.83235 4.14334 4.73654L5.27175 1.68707Z" fill="#FF4438"></path>
@@ -44,7 +44,7 @@
     </div>
 
     <div class="h-full flex gap-[18px] xl:gap-7 items-center text-center">
-      <button id="search-button" type="button" class="hidden lg:flex items-center gap-2 px-6 py-2 bg-[#163341] text-white rounded-full hover:bg-[#1a3a4a] transition-colors">
+      <button id="search-button" type="button" class="hidden lg:flex items-center gap-2 px-6 py-2 bg-[#163341] text-white rounded-full border border-white border-opacity-30 hover:bg-[#1a3a4a] hover:border-opacity-50 transition-colors">
         {{ partial "icons/search.html" }}
         Search
       </button>

layouts/partials/search-modal.html

@@ -4,26 +4,60 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>');
     background-repeat: no-repeat;
     background-position: right 1rem center;
     background-size: 1rem;
   }
+
+  .search-magnifier-label svg {
+    color: #9ca3af;
+  }
+
+  .search-item a {
+    color: #d1d5db;
+    padding: 0.75rem;
+    display: block;
+    border-radius: 0.375rem;
+    transition: background-color 0.2s;
+  }
+
+  .search-item a:hover,
+  .search-item[aria-selected] a {
+    background-color: #374151;
+    color: white;
+  }
+
+  .search-item-title {
+    font-weight: 500;
+  }
+
+  .search-item-path {
+    font-size: 0.875rem;
+    color: #9ca3af;
+  }
+
+  .search-term-match {
+    background-color: #fbbf24;
+    color: #1f2937;
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.25rem;
+  }
 </style>
 <div class="sr-only w-screen h-screen fixed z-[200] top-0 left-0 cursor-auto flex flex-col bg-redis-ink-900/75 p-4 sm:p-6 md:p-[10vh] lg:p-[12vh]" id="search-container" role="button" aria-expanded="true" aria-haspopup="listbox" aria-labelledby="search-label" tabindex="0">
-<div class="my-0 mx-auto w-full max-w-[47.375rem] flex flex-col min-h-0 rounded-lg shadow-lg bg-white p-6 gap-4">
+<div class="my-0 mx-auto w-full max-w-[47.375rem] flex flex-col min-h-0 rounded-lg shadow-lg bg-redis-ink-900 border border-white border-opacity-30 p-6 gap-4">
   <header class="flex flex-row gap-4 p-2">
     <form id="search-form" class="grow flex flex-row gap-3 items-center" style="position: relative;">
       <label class="search-magnifier-label" for="search-input" id="search-label" style="position: absolute;  left:20px; pointer-events: none;">
         {{ partial "icons/search.html" }}
       </label>
-      <input id="search-input" style="height: calc(3rem - 2px);" class="w-full pl-12 border border-redis-pen-800 rounded-md search-input appearance-none focus:outline-none" aria-autocomplete="both" aria-labelledby="search-label" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search&hellip;" type="text" value="">
+      <input id="search-input" style="height: calc(3rem - 2px);" class="w-full pl-12 border border-white border-opacity-30 rounded-md search-input appearance-none focus:outline-none bg-redis-pen-800 text-white placeholder-gray-300" aria-autocomplete="both" aria-labelledby="search-label" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search&hellip;" type="text" value="">
       <button type="reset" title="Clear the query" class="search-reset" aria-label="Clear the query" hidden="">
         <svg width="20" height="20" viewBox="0 0 20 20">
           <path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </button>
-      <select id="search-select" style="height: calc(3rem - 2px);" class="w-2/5 pl-3 grow-0 border border-redis-pen-800 rounded-md search-filter bg-white text-left pr-8 appearance-none hidden md:block" autocomplete="off">
+      <select id="search-select" style="height: calc(3rem - 2px);" class="w-2/5 pl-3 grow-0 border border-white border-opacity-30 rounded-md search-filter bg-redis-pen-800 text-white text-left pr-8 appearance-none hidden md:block" autocomplete="off">
         <option value="all" selected>All products</option>
         <option value="rs">Redis Enterprise</option>
         <option value="rc">Redis Cloud</option>
@@ -34,11 +68,11 @@
         <option value="clients">Client Libraries</option>
       </select>
     </form>
-    <button id="search-cancel" type="reset" aria-label="Cancel" class="px-3 border border-redis-pen-800 rounded-md text-center bg-redis-yellow-500 hover:bg-redis-yellow-300">
+    <button id="search-cancel" type="reset" aria-label="Cancel" class="px-3 border border-white border-opacity-30 rounded-md text-center bg-[#163341] text-white hover:bg-[#1a3a4a]">
       ESC
     </button>
   </header>
-  <dl id="search-results" class="min-h-48 overflow-auto px-2" role="listbox"></dl>
+  <dl id="search-results" class="min-h-48 overflow-auto px-2 text-white" role="listbox"></dl>
 </div>
 </div>