Restyled search autocomplete

packages/website/ts/components/docs/search/autocomplete.tsx

@@ -5,6 +5,8 @@ import styled from 'styled-components';
 import Autosuggest from 'react-autosuggest';
 import { Highlight, Snippet } from 'react-instantsearch-dom';
 
+import { colors } from 'ts/style/colors';
+
 interface Props {
     isHome?: boolean;
 }
@@ -132,7 +134,7 @@ export class CustomAutoComplete extends React.Component<AutoCompleteProps, AutoC
             '0x_tools_test': 'Tools',
             '0x_guides_test': 'Guides',
         };
-        return <SectionWrapper>{titles[section.index]}</SectionWrapper>;
+        return <SectionTitle>{titles[section.index]}</SectionTitle>;
     }
 
     private _getSectionSuggestions(section: HitProps): string {
@@ -140,17 +142,15 @@ export class CustomAutoComplete extends React.Component<AutoCompleteProps, AutoC
     }
 }
 
-const SectionWrapper = styled.div`
-    color: #5c5c5c;
-    font-size: 0.777777778rem;
-    padding: 19px 20px 0;
-    background: #eee;
-    min-width: 90px;
-    min-height: 52px;
-
-    &:not(:first-child) {
-        margin-top: 10px;
-    }
+const SectionTitle = styled.p`
+    color: ${colors.brandDark};
+    background-color: rgba(0, 56, 49, 0.1);
+    border-radius: 4px;
+    font-size: 12px;
+    padding: 7px 10px 5px;
+    text-transform: uppercase;
+    position: absolute;
+    margin: 30px;
 `;
 
 const HitWrapper = styled.div`
@@ -162,6 +162,13 @@ const Wrapper = styled.div<Props>`
     position: relative;
 
     .react-autosuggest__container {
+        padding: 13px 30px;
+        border: 1px solid transparent;
+
+        &--open {
+            background-color: ${colors.white};
+            border-color: #dbdfdd;
+        }
     }
 
     .react-autosuggest__section-container {
@@ -171,11 +178,16 @@ const Wrapper = styled.div<Props>`
     .react-autosuggest__suggestions-container {
         position: absolute;
         right: 0;
-        background-color: #fff;
+        background-color: ${colors.white};
         z-index: 10;
         min-width: 420px;
         width: 100%;
         flex-grow: 1;
+
+        &--open {
+            border: 1px solid #dbdfdd;
+            border-top: none;
+        }
     }
 
     .react-autosuggest__suggestions-list {
@@ -185,15 +197,15 @@ const Wrapper = styled.div<Props>`
     .react-autosuggest__input {
         background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' fill-opacity='.01' d='M0 0h24v24H0z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 10.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0zM10.5 3a7.5 7.5 0 1 0 4.55 13.463l4.743 4.744 1.414-1.414-4.744-4.744A7.5 7.5 0 0 0 10.5 3z' fill='%235C5C5C'/%3E%3C/svg%3E")
             transparent left center no-repeat;
-        font-size: 1.375rem;
+        font-size: 22px;
         padding: 18px 18px 21px 35px;
         width: 100%;
         border: 0;
         border-bottom: 1px solid #b4bebd;
         outline: none;
 
-        ${props =>
-            !props.isHome &&
+        ${({ isHome }) =>
+            !isHome &&
             `
             background-color: #EBEEEC;
             border-bottom: 0;
@@ -202,6 +214,10 @@ const Wrapper = styled.div<Props>`
             font-size: 1rem;
         `};
 
+        &--open {
+            border-bottom-color: ${colors.brandLight};
+        }
+
         &:before {
             content: '';
             width: 30px;
@@ -214,15 +230,17 @@ const Wrapper = styled.div<Props>`
     }
 
     .react-autosuggest__suggestion {
-        color: #003831;
+        color: ${colors.brandDark};
         font-size: 0.85rem;
         line-height: 1.4;
         font-weight: 400;
-        padding: 15px 20px;
+        padding: 25px 30px 25px 178px;
+        min-height: 110px;
         border-bottom: 1px solid #eee;
-    }
+        transition: background-color 300ms ease-in-out;
 
-    .react-autosuggest__suggestion--highlighted {
-        background-color: #eee;
+        &--highlighted {
+            background-color: ${colors.backgroundLight};
+        }
     }
 `;