Style algolia search results to look more like palette

packages/palette-docs/src/components/Sidebar/SearchBox.tsx

@@ -1,13 +1,20 @@
 import { Input } from "@artsy/palette"
 import React, { useEffect } from "react"
+import "./algolia.css"
+
+declare global {
+  interface Window {
+    docsearch: any
+    docsearchSettings: any
+  }
+}
 
 export function SearchBox() {
   useEffect(() => {
     if (window.docsearchSettings === undefined) {
       return
     }
-    console.log("doing the thing with ", window.docsearchSettings)
-    docsearch({
+    window.docsearch({
       apiKey: window.docsearchSettings.apiKey,
       indexName: window.docsearchSettings.indexName,
       inputSelector: "#search",

packages/palette-docs/src/components/Sidebar/algolia.css

@@ -0,0 +1,63 @@
+/* Main overlay */
+.algolia-autocomplete .ds-dropdown-menu {
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);
+}
+
+/* Category links */
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a {
+  text-decoration: none;
+}
+.algolia-autocomplete .ds-dropdown-menu .ds-suggestions a:hover {
+  text-decoration: underline;
+}
+
+/* Main category (eg. Getting Started) */
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+  border-bottom: 1px solid #e5e5e5;
+  font-size: 1.2em;
+}
+
+/* Category (eg. Downloads) */
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+  color: #666;
+}
+
+/* Title (eg. Bootstrap CDN) */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+  font-weight: bold;
+  color: #000;
+}
+
+/* Description (eg. Bootstrap currently works...) */
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+  color: #000;
+}
+
+/* Highlighted text */
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--category-header-lvl0
+  .algolia-docsearch-suggestion--highlight,
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--category-header-lvl1
+  .algolia-docsearch-suggestion--highlight,
+.algolia-autocomplete
+  .algolia-docsearch-suggestion--text
+  .algolia-docsearch-suggestion--highlight {
+  color: #6e1eff;
+  box-shadow: inset 0 -2px 0 0 #6e1eff;
+}
+
+/* Selected descriptions */
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion.suggestion-layout-simple,
+.algolia-autocomplete
+  .ds-dropdown-menu
+  .ds-suggestion.ds-cursor
+  .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+  .algolia-docsearch-suggestion--content {
+  background-color: #f8f8f8;
+}