Merge pull request #2435 from buildkite/search-style-redux

Visual tweaks to new docs search

Author: BrettJay

app/assets/stylesheets/components/docsearch/_variables.scss

@@ -6,14 +6,14 @@
   --docsearch-spacing: 12px;
   --docsearch-icon-stroke-width: 1.4;
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: rgb(150, 159, 175);
+  --docsearch-muted-color: $navy-600;
   --docsearch-container-background: rgba(101, 108, 133, 0.8);
   --docsearch-logo-color: rgba(84, 104, 255);
 
   /* modal */
   --docsearch-modal-width: 560px;
   --docsearch-modal-height: 600px;
-  --docsearch-modal-background: rgb(245, 246, 247);
+  --docsearch-modal-background: #fff;
   --docsearch-modal-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.5),
     0 3px 8px 0 rgba(85, 90, 100, 1);
 

app/assets/stylesheets/components/docsearch/button.scss

@@ -12,10 +12,12 @@
   padding: 0 8px;
   user-select: none;
   transition: box-shadow $transition-speed, color $transition-speed;
-
   box-shadow: rgba(93, 9, 199, 0) 0px 0px 0px 0px,
     rgba(93, 9, 199, 0.1) 0px 1px 3px, rgba(93, 9, 199, 0.2) 0px 0px 0px 1px,
     rgba(93, 9, 199, 0.05) 0px 3px 8px;
+  @media (min-width: $screen-md) {
+    min-width: 196px;
+  }
 }
 
 .DocSearch-Button:hover,
@@ -53,24 +55,21 @@
 
 .DocSearch-Button-Keys {
   display: flex;
-  min-width: calc(2 * 20px + 2 * 0.4em);
+  box-shadow: $box-shadow-depth-100;
+  border-radius: 3px;
+  padding: 0 4px;
 }
 
 .DocSearch-Button-Key {
   align-items: center;
-  background: var(--docsearch-key-gradient);
-  border-radius: 3px;
-  box-shadow: var(--docsearch-key-shadow);
-  color: var(--docsearch-muted-color);
+  color: $navy-500;
   display: flex;
-  height: 18px;
   justify-content: center;
-  margin-right: 0.4em;
+  margin: 0;
+  padding: 2px;
   position: relative;
-  padding: 0px 0px 2px 0px;
   border: 0px;
   top: -1px;
-  width: 20px;
 }
 
 @media (max-width: 768px) {

app/assets/stylesheets/components/docsearch/modal.scss

@@ -42,7 +42,7 @@
 
 .DocSearch-Modal {
   background: var(--docsearch-modal-background);
-  border-radius: 6px;
+  border-radius: 12px;
   box-shadow: var(--docsearch-modal-shadow);
   flex-direction: column;
   margin: 60px auto auto;
@@ -60,14 +60,24 @@
 .DocSearch-Form {
   align-items: center;
   background: var(--docsearch-searchbox-focus-background);
-  border-radius: 4px;
-  box-shadow: var(--docsearch-searchbox-shadow);
+  border-radius: 8px;
+  box-shadow: rgba(93, 9, 199, 0) 0px 0px 0px 0px,
+    rgba(93, 9, 199, 0.1) 0px 1px 3px, rgba(93, 9, 199, 0.2) 0px 0px 0px 1px,
+    rgba(93, 9, 199, 0.05) 0px 3px 8px;
   display: flex;
   height: var(--docsearch-searchbox-height);
   margin: 0;
   padding: 0 var(--docsearch-spacing);
   position: relative;
   width: 100%;
+  z-index: 11;
+  transition: 0.2s ease box-shadow;
+
+  &:has(.DocSearch-Input:focus) {
+    box-shadow: rgba(93, 9, 199, 0.2) 0px 0px 0px 3px,
+      rgba(93, 9, 199, 0.2) 0px 1px 3px, rgba(93, 9, 199, 0.2) 0px 0px 0px 1px,
+      rgba(93, 9, 199, 0.1) 0px 3px 8px;
+  }
 }
 
 .DocSearch-Input {
@@ -509,7 +519,7 @@ svg.DocSearch-Hit-Select-Icon {
 .DocSearch-Footer {
   align-items: center;
   background: var(--docsearch-footer-background);
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 12px 12px;
   box-shadow: var(--docsearch-footer-shadow);
   display: flex;
   flex-direction: row-reverse;
@@ -527,6 +537,7 @@ svg.DocSearch-Hit-Select-Icon {
   color: var(--docsearch-muted-color);
   display: flex;
   list-style: none;
+  justify-content: center;
   margin: 0;
   padding: 0;
   flex: 1;
@@ -640,3 +651,7 @@ svg.DocSearch-Hit-Select-Icon {
     opacity: 1;
   }
 }
+
+.DocSearch-Title {
+  margin-bottom: 8px;
+}