Merge pull request aws-amplify#1417 from aws-amplify/renbran/fix-search-styling

Changed search to use theme colors

Author: Brene

client/src/docs-ui/secondary-nav/__snapshots__/secondary-nav.spec.ts.snap

@@ -33,7 +33,7 @@ exports[`docs-secondary-nav Render logic should render 1`] = `
           </amplify-external-link>
         </div>
       </div>
-      <div class="css-1bbteyh">
+      <div class="css-153d8ox">
         <div>
           <div>
             <input class="three-dee-effect" id="amplify-docs-search-input" placeholder="Search" type="search">

client/src/docs-ui/secondary-nav/secondary-nav.style.ts

@@ -106,6 +106,37 @@ export const searchStyle = css`
         display: block;
         width: 100%;
       }
+      
+      .algolia-autocomplete .ds-dropdown-menu * {
+        white-space: normal
+      }
+
+      .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column-text {
+        white-space: normal;
+      }
+      
+      .algolia-autocomplete .algolia-docsearch-suggestion--content > .algolia-docsearch-suggestion--text > .algolia-docsearch-suggestion--highlight {
+        box-shadow: inset 0 -2px 0 0 var(--color-orange-hv)
+      }
+
+      .algolia-autocomplete .algolia-docsearch-suggestion--title {
+        font-weight: bold;
+        color: black;
+      }
+
+      .algolia-autocomplete .algolia-docsearch-suggestion--text {
+        font-size: 0.8rem;
+        color: gray;
+      }
+
+      .ds-cursor .algolia-docsearch-suggestion--content {
+        background-color: var(--bg-color-hover) !important;
+      }
+      
+      .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+        color: var(--color-orange-hv);
+        background: var(--bg-color-hover);
+      }
 
       input {
         position: relative;