Improve search result modal stylings

Author: webstackdev

_TODO.md

@@ -106,11 +106,6 @@ Maybe change the "ready..." in the hero to "get in touch..."
 
 ## Search Box
 
-3. Maybe need a 1px border
-6. What happens when search query exceeds size of search box? Drop down to second line?
-7. Need to improve quality of search results in drop down box - maybe some description text for each item
-8. Style drop down box of search results from search box
-
 Title box - need to squish to 75% and have it absolute in place as you scroll down, go back to 100% when you scroll back up
 
 ## Image generation models

src/components/Search/SearchBar/client/index.ts

@@ -428,14 +428,14 @@ export class SearchBarElement extends LitElement {
 
       return html`
         <li class="px-4 py-3 hover:bg-page-base-offset">
-          <a class="block text-sm" href=${url}>${title}</a>
+          <a class="block text-body" href=${url}>${title}</a>
         </li>
       `
     })
 
     const searchFor = html`
       <li class="px-4 py-3 hover:bg-page-base-offset">
-        <a class="block text-sm" href=${`/search?q=${encodeURIComponent(query)}`}>
+        <a class="block text-body" href=${`/search?q=${encodeURIComponent(query)}`}>
           Search for &quot;${query}&quot;
         </a>
       </li>

src/components/Search/SearchBar/index.astro

@@ -51,7 +51,7 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
             placeholder={placeholder}
             value={initialQuery}
             class:list={[
-              'min-w-0 flex-1 h-(--header-icon-size) bg-transparent px-4 text-sm placeholder:text-content-active border-0 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0',
+              'min-w-0 flex-1 h-(--header-icon-size) bg-transparent px-4 text-base placeholder:text-content-active border-0 focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0 focus-visible:ring-offset-0',
               !isExpandedOnLoad && 'hidden',
             ]}
           />
@@ -86,7 +86,7 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
 
         <div
           data-search-results
-          class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-trim bg-content-inverse shadow-elevated"
+          class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-trim bg-(--color-gray-300) shadow-elevated"
         >
           <ul data-search-results-list class="divide-y divide-border" aria-label="Search suggestions"></ul>
         </div>
@@ -108,7 +108,7 @@ const clearButtonLabel = hasInitialQuery ? 'Clear search' : 'Close search'
 
         <div
           data-search-results
-          class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-trim bg-content-inverse shadow-elevated"
+          class="absolute left-0 right-0 z-(--z-content-floating) mt-2 hidden overflow-hidden rounded-lg border border-trim bg-(--color-gray-300) shadow-elevated"
         >
           <ul data-search-results-list class="divide-y divide-border" aria-label="Search suggestions"></ul>
         </div>

src/components/Search/SearchBar/index.module.css

@@ -21,3 +21,11 @@
     var(--shadow-elevated, 0 0 0 0 transparent),
     inset 0 0 0 2px var(--color-spotlight);
 }
+
+.searchBar [data-search-results] {
+  border-radius: calc(0.5rem + 2px);
+}
+
+.searchBar [data-search-results-list] a {
+  text-decoration: none;
+}