Add some basic styling

7 files changed, 117 insertions, 12 deletions

diff --git a/src/client/react/actions/search.js b/src/client/react/actions/search.js
index e50d851..53993d3 100644
--- a/src/client/react/actions/search.js
+++ b/src/client/react/actions/search.js
@@ -3,3 +3,8 @@ export const inputChange = typedValue => ({
   type: 'SEARCH/INPUT_CHANGE',
   typedValue,
 });
+
+export const focusChange = hasFocus => ({
+  type: 'SEARCH/FOCUS_CHANGE',
+  hasFocus,
+});
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 2489084..206a6a1 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -1,16 +1,23 @@
 import { connect } from 'react-redux';
-import { inputChange } from '../../actions/search';
+import { inputChange, focusChange } from '../../actions/search';
 import PresentationalSearch from '../presentational/Search';
 
 const mapStateToProps = state => ({
   results: state.search.searchResults,
   value: state.search.searchInput,
+  hasFocus: state.search.hasFocus,
 });
 
 const mapDispatchToProps = dispatch => ({
   onInputChange: (event) => {
     dispatch(inputChange(event.target.value));
   },
+  onFocus: () => {
+    dispatch(focusChange(true));
+  },
+  onBlur: () => {
+    dispatch(focusChange(false));
+  },
 });
 
 const Search = connect(
diff --git a/src/client/react/components/presentational/Search.jsx b/src/client/react/components/presentational/Search.jsx
index a713db4..01c6f7d 100644
--- a/src/client/react/components/presentational/Search.jsx
+++ b/src/client/react/components/presentational/Search.jsx
@@ -1,13 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import SearchIcon from 'react-icons/lib/md/search';
 
-const Search = ({ onInputChange, value, results }) => (
-  <div>
-    <input
-      onChange={onInputChange}
-      value={value}
-      placeholder="Zoeken"
-    />
+const Search = ({
+  onInputChange,
+  onFocus,
+  onBlur,
+  hasFocus,
+  value,
+  results,
+}) => (
+  <div className={classnames('search', { focus: hasFocus })}>
+    <div className="search__input-wrapper">
+      <div className="search__icon-wrapper"><SearchIcon /></div>
+      <input
+        onChange={onInputChange}
+        value={value}
+        placeholder="Zoeken"
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    </div>
     <ul>
       {results.map(result => <li key={result.name}>{result.name}</li>)}
     </ul>
@@ -16,10 +30,13 @@ const Search = ({ onInputChange, value, results }) => (
 
 Search.propTypes = {
   onInputChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+  hasFocus: PropTypes.bool.isRequired,
   value: PropTypes.string.isRequired,
   results: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string.require,
-    type: PropTypes.string.require,
+    name: PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
   })).isRequired,
 };
 
diff --git a/src/client/react/reducers/search.js b/src/client/react/reducers/search.js
index 08be519..a695184 100644
--- a/src/client/react/reducers/search.js
+++ b/src/client/react/reducers/search.js
@@ -1,6 +1,7 @@
 const DEFAULT_STATE = {
   searchInput: '',
   searchResults: [],
+  hasFocus: false,
 };
 
 const search = (state = DEFAULT_STATE, action) => {
@@ -13,6 +14,11 @@ const search = (state = DEFAULT_STATE, action) => {
           { type: 's', name: '18561' },
         ],
       };
+    case 'SEARCH/FOCUS_CHANGE':
+      return {
+        ...state,
+        hasFocus: action.hasFocus,
+      };
     default:
       return state;
   }
diff --git a/src/client/static/bundle.css b/src/client/static/bundle.css
index ba2197a..d04fba6 100644
--- a/src/client/static/bundle.css
+++ b/src/client/static/bundle.css
@@ -1,2 +1,30 @@
 body {
-  background-color: black; }
+  background-color: #ececec; }
+
+* {
+  box-sizing: border-box; }
+
+.search {
+  width: 580px;
+  height: 54px;
+  background-color: white; }
+  .search.focus {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
+  .search__icon-wrapper {
+    height: 54px;
+    padding: 15px; }
+    .search__icon-wrapper svg {
+      height: 24px;
+      width: 24px; }
+  .search__input-wrapper {
+    display: flex;
+    widows: inherit;
+    height: 54px; }
+    .search__input-wrapper input {
+      border: 0;
+      background-color: transparent;
+      flex-grow: 1;
+      height: inherit;
+      padding: 16px;
+      padding-left: 0px;
+      font-size: 16px; }
diff --git a/src/client/style/index.scss b/src/client/style/index.scss
index c4d554e..6f1592c 100644
--- a/src/client/style/index.scss
+++ b/src/client/style/index.scss
@@ -1,3 +1,42 @@
 body {
-  background-color: black;
+  background-color: #ececec;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.search {
+  width: 580px;
+  height: 54px;
+  background-color: white;
+
+  &.focus {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  }
+
+  &__icon-wrapper {
+    height: 54px;
+    padding: 15px;
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  &__input-wrapper {
+    display: flex;
+    widows: inherit;
+    height: 54px;
+
+    input {
+      border: 0;
+      background-color: transparent;
+      flex-grow: 1;
+      height: inherit;
+      padding: 16px;
+      padding-left: 0px;
+      font-size: 16px;
+    }
+  }
 }
diff --git a/src/client/views/index.jade b/src/client/views/index.jade
index a5f1f45..0a057db 100644
--- a/src/client/views/index.jade
+++ b/src/client/views/index.jade
@@ -1,5 +1,8 @@
 extends layout
 
+block head
+  link(rel='stylesheet', href='/bundle.css')
+
 block content
   #root