javaistic · uiuxarghya · Dec 6, 2021 · Dec 6, 2021
diff --git a/src/components/Search.js b/src/components/Search.js
@@ -68,13 +68,13 @@ export function Search() {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 hover:text-gray-600 transition-colors duration-200 w-full py-2"
+        className="group leading-6 font-medium flex items-center space-x-3 sm:space-x-4 bg-gray-100 hover:text-gray-600 transition-colors duration-200 w-full py-1.5 px-1.5 sm:px-4 lg:px-4 rounded-lg border-2 border-gray-200"
       >
         <svg
           width="24"
           height="24"
           fill="none"
-          className="text-gray-400 group-hover:text-gray-500 transition-colors duration-200"
+          className="text-blue-400 group-hover:text-blue-500 transition-colors duration-200"
         >
           <path
             d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -89,7 +89,7 @@ export function Search() {
         </span>
         <span
           style={{ opacity: browserDetected ? '1' : '0' }}
-          className="hidden sm:block text-gray-400 text-sm leading-5 py-0.5 px-1.5 border border-gray-300 rounded-md"
+          className="hidden sm:block text-gray-500 text-sm leading-5 py-0.5 px-1.5 border border-gray-400 rounded-md"
         >
           <span className="sr-only">Press </span>
           <kbd className="font-sans">

diff --git a/src/css/docsearch.css b/src/css/docsearch.css
@@ -56,7 +56,7 @@
   display: flex;
   flex-direction: column;
   min-height: 0;
-  border-radius: 1rem;
+  border-radius: 0.7rem;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   background: white;
 }
@@ -313,16 +313,20 @@
 }
 
 .DocSearch-Footer {
+  align-items: center;
   flex: none;
   display: flex;
   justify-content: flex-end;
   margin: 0 1.5rem;
   border-top: 1px solid theme('colors.gray.200');
   padding: 1.25rem 0;
-}
-
-.DocSearch-Commands {
-  display: none;
+  flex-direction: row-reverse;
+  position: relative;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  justify-content: space-between;
 }
 
 .DocSearch-Logo a {
@@ -338,6 +342,37 @@
   margin-left: 0.5rem;
 }
 
+.DocSearch-Commands {
+  color: theme('colors.gray.500');
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.75rem;
+}
+
+.DocSearch-Commands li {
+  align-items: center;
+  display: flex;
+}
+
+.DocSearch-Commands li:not(:last-of-type) {
+  margin-right: 0.8em;
+}
+
+.DocSearch-Commands-Key {
+  align-items: center;
+  background: theme('colors.gray.200');
+  border-radius: 2px;
+  box-shadow: theme('colors.gray.600');
+  display: flex;
+  height: 18px;
+  justify-content: center;
+  margin-right: 0.4em;
+  padding-bottom: 1px;
+  width: 20px;
+}
+
 .DocSearch-Hit--deleting,
 .DocSearch-Hit--favoriting {
   opacity: 0;
@@ -401,3 +436,9 @@
   color: theme('colors.blue.700');
   font-weight: 500;
 }
+
+@media (max-width: 500px) {
+  .DocSearch-Commands {
+    display: none;
+  }
+}