Search improvements (#76)

* Search improvements

* Search results keyboard navigation

frontend/scenes/Search/components/SearchField/SearchField.js

@@ -1,8 +1,32 @@
 // @flow
 import React, { Component } from 'react';
-import styles from './SearchField.scss';
+import { Flex } from 'reflexbox';
+import styled from 'styled-components';
+import searchImg from 'assets/icons/search.svg';
+
+const Field = styled.input`
+  width: 100%;
+  padding: 10px;
+  font-size: 48px;
+  font-weight: 400;
+  outline: none;
+  border: 0;
+
+  ::-webkit-input-placeholder { color: #ccc; }
+  :-moz-placeholder { color: #ccc; }
+  ::-moz-placeholder { color: #ccc; }
+  :-ms-input-placeholder { color: #ccc; }
+`;
+
+const Icon = styled.img`
+  width: 38px;
+  margin-bottom: -5px;
+  margin-right: 10px;
+  opacity: 0.15;
+`;
 
 class SearchField extends Component {
+  input: HTMLElement;
   props: {
     onChange: Function,
   };
@@ -11,17 +35,26 @@ class SearchField extends Component {
     this.props.onChange(ev.currentTarget.value ? ev.currentTarget.value : '');
   };
 
+  focusInput = (ev: SyntheticEvent) => {
+    this.input.focus();
+  };
+
+  setRef = (ref: HTMLElement) => {
+    this.input = ref;
+  };
+
   render() {
     return (
-      <div className={styles.container}>
-        <input
+      <Flex>
+        <Icon src={searchImg} alt="Search" onClick={this.focusInput} />
+        <Field
           {...this.props}
+          innerRef={this.setRef}
           onChange={this.handleChange}
-          className={styles.field}
           placeholder="Search"
           autoFocus
         />
-      </div>
+      </Flex>
     );
   }
 }