From 5e9fe9f8e48af269dafc94c1fd3fe346ac35367f Mon Sep 17 00:00:00 2001
From: Dan Lebo <dan.lebo@me.com>
Date: Tue, 14 Feb 2023 23:03:18 -0800
Subject: [PATCH] algolia.css improvements

---
 beta/src/styles/algolia.css | 46 +++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/beta/src/styles/algolia.css b/beta/src/styles/algolia.css
index c5c7fb9d3..75329b535 100644
--- a/beta/src/styles/algolia.css
+++ b/beta/src/styles/algolia.css
@@ -29,17 +29,18 @@ html.dark {
   filter: blur(0px);
 }
 .DocSearch-SearchBar {
-  @apply py-4;
+  @apply py-3;
   @apply px-5;
 }
 .DocSearch-Form {
-  @apply rounded-lg;
+  @apply rounded-full;
   @apply shadow-inner;
-  @apply text-sm;
+  @apply text-base;
+  @apply text-tertiary;
   @apply bg-gray-10;
-  @apply outline-none;
-  @apply h-auto;
-  @apply focus-within:ring;
+  @apply focus:outline-link;
+  @apply h-10;
+  @apply focus-within:outline-none;
 }
 html.dark .DocSearch-Form {
   @apply bg-gray-80;
@@ -72,6 +73,7 @@ html.dark .DocSearch-Commands {
   @apply text-xs;
 }
 .DocSearch-Footer {
+  @apply bg-transparent;
   @apply flex-col-reverse;
   @apply items-start;
   @apply h-auto;
@@ -84,11 +86,11 @@ html.dark .DocSearch-Footer {
 }
 .DocSearch-Input {
   @apply py-3;
-  @apply text-sm;
+  @apply text-base;
   @apply leading-tight;
   @apply text-primary;
   @apply appearance-none !important;
-  @apply focus:outline-none;
+  @apply focus:outline-link !important;
 }
 html.dark .DocSearch-Input {
   @apply text-primary-dark;
@@ -131,19 +133,24 @@ html.dark .DocSearch-Hit-title {
 }
 .DocSearch-LoadingIndicator svg,
 .DocSearch-MagnifierLabel svg {
-  width: 13px;
-  height: 13px;
+  width: 15px;
+  height: 15px;
   @apply text-gray-30;
   @apply mx-1;
 }
+.DocSearch-Container {
+  @apply flex;
+  @apply justify-center;
+}
 .DocSearch-Modal {
   margin: 0;
   @apply flex;
-  @apply justify-between;
-  @apply h-full;
-  @apply max-w-xs;
-  @apply rounded-r-lg;
-  @apply rounded-l-none;
+  @apply justify-center;
+  @apply max-w-3xl;
+  @apply w-full;
+  @apply rounded-2xl;
+  @apply overflow-hidden;
+  @apply my-4;
 }
 .DocSearch-Cancel {
   @apply pl-5;
@@ -152,6 +159,14 @@ html.dark .DocSearch-Hit-title {
   @apply text-link;
   @apply font-normal;
 }
+.DocSearch-Screen-Icon {
+  @apply flex;
+  @apply justify-center;
+}
+.DocSearch-Help {
+  @apply text-center;
+  @apply mt-4;
+}
 @media (max-width: 1024px) {
   .DocSearch-Modal {
     @apply max-w-full;
@@ -164,6 +179,7 @@ html.dark .DocSearch-Hit-title {
   }
   .DocSearch-Modal {
     @apply rounded-none;
+    @apply my-0;
   }
 }
 .DocSearch-Search-Icon {