1 files changed, 54 insertions, 27 deletions

diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 0ce136e..33017dd 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -1,9 +1,9 @@
 import Downshift from 'downshift';
-import { SEARCH_ITEMS_QUERY } from '../queries';
 import { graphql, compose } from 'react-apollo';
-import makeImage from '../lib/image';
-import { Router } from '../routes';
 import slugify from 'slugify';
+import styled from 'styled-components';
+import { SEARCH_ITEMS_QUERY } from '../queries';
+import { Router } from '../routes';
 
 function routeToItem(item) {
   Router.pushRoute('item', {
@@ -12,38 +12,62 @@ function routeToItem(item) {
   });
 }
 
-function BasicAutocomplete(props) {
+const DropDown = styled.div`
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+  border: 1px solid ${props => props.theme.lightgrey};
+  input {
+    border: 0;
+  }
+`;
+
+const DropDownItem = styled.div`
+  border-bottom: 1px solid ${props => props.theme.lightgrey};
+  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
+  padding: 1rem;
+  transition: all 0.2s;
+  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
+  display: flex;
+  align-items: center;
+  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
+  img {
+    margin-right: 10px;
+  }
+`;
+
+const SearchStyles = styled.div`
+  position: relative;
+`;
+
+function AutoComplete(props) {
   const { items, onChange } = props;
   return (
-    <Downshift onChange={routeToItem} itemToString={item => item.title}>
+    <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
       {({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, highlightedIndex }) => (
         <div>
+          {/* This is the searchInput */}
           <input
             {...getInputProps({
               placeholder: 'Search For Item',
-              onChange: e => props.refetch({ searchTerm: e.target.value }),
-              style: { fontSize: '20px', padding: '20px', display: 'block', width: '100%' },
+              id: 'search',
+              onChange: e => {
+                console.log('Change happened');
+                props.refetch({ searchTerm: e.target.value });
+              },
+              style: { fontSize: '20px', padding: '10px', display: 'block', width: '100%' },
             })}
           />
           {isOpen ? (
-            <div>
+            <DropDown>
+              {/* This is the Dropdown */}
               {items.map((item, index) => (
-                <div
-                  {...getItemProps({ item })}
-                  key={item.id}
-                  style={{
-                    backgroundColor: highlightedIndex === index ? '#e8e8e8' : 'white',
-                    borderLeft: highlightedIndex === index ? '10px solid #ffc600' : '10px solid white',
-                    padding: '10px',
-                    display: 'flex',
-                    alignItems: 'center',
-                  }}
-                >
-                  <img width="50" style={{ 'margin-right': '10px' }} src={makeImage(item.image)} alt={item.title} />
+                <DropDownItem {...getItemProps({ item })} key={item.id} highlighted={highlightedIndex === index}>
+                  <img width="50" src={item.image} alt={item.title} />
                   {item.title}
-                </div>
+                </DropDownItem>
               ))}
-            </div>
+            </DropDown>
           ) : null}
         </div>
       )}
@@ -52,16 +76,19 @@ function BasicAutocomplete(props) {
 }
 
 const Search = props => (
-  <BasicAutocomplete
-    items={props.searchItems.allItems}
-    onChange={selectedItem => console.log(selectedItem)}
-    refetch={props.searchItems.refetch}
-  />
+  <SearchStyles>
+    <AutoComplete
+      items={props.searchItems.items}
+      onChange={selectedItem => console.log(selectedItem)}
+      refetch={props.searchItems.refetch}
+    />
+  </SearchStyles>
 );
 
 const searchEnhancer = graphql(SEARCH_ITEMS_QUERY, {
   name: 'searchItems',
   options: {
+    // TODO: Why is this camo
     variables: { searchTerm: 'camo' },
   },
 });