Search bar moved to navbar.

src/components/AppBar.js

@@ -5,6 +5,7 @@ import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import IconButton from 'material-ui/IconButton';
 import MenuIcon from 'material-ui-icons/Menu';
+import SearchBar from '../containers/SearchBar';
 import classNames from 'classnames'
 
 class CustomAppBar extends React.Component {
@@ -36,6 +37,7 @@ class CustomAppBar extends React.Component {
                                 className={classNames('app-bar-menu-button', 'app-bar-text-color')}>
                         <MenuIcon/>
                     </IconButton>
+                    <SearchBar />
                     <div
                         className={classNames('app-bar-link-container', !this.state.isAppBarExpanded && 'app-bar-hide')}>
                         <Button

src/containers/Layout.js

@@ -46,7 +46,6 @@ class Layout extends React.Component {
                 }}/>
                 <div className={'layout-container'}>
                     <div className={'layout-main-content'}>
-                        <SearchBar suggestions={{}}/>
                         <div className={'layout-card-container'}>
                             <CardContainer styles={'layout-card-container'} searchTerm={searchTerm}
                                            facilities={facilities} />

src/containers/SearchBar.js

 import React from 'react';
-import PropTypes from 'prop-types';
-import Paper from 'material-ui/Paper';
-import {withStyles} from 'material-ui/styles';
-import {compose} from 'redux';
 import {connect} from 'react-redux';
 import {setSearchTerm} from '../actions/ui';
-import Search from 'material-ui-icons/Search'
+import SearchIcon from 'material-ui-icons/Search'
 import Input from 'material-ui/Input';
+import Paper from 'material-ui/Paper';
+import classNames from 'classnames';
 
 class SearchBar extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            isFocused: false,
+            value: ''
+        };
+    }
+
     handleChange = (e) => {
         this.setState({
             value: e.target.value,
@@ -16,23 +24,36 @@ class SearchBar extends React.Component {
         this.props.setSearchTerm(e.target.value)
     };
 
+    handleFocus = () => {
+        this.setState({
+            isFocused: true
+        });
+    };
+
+    handleBlur = () => {
+        this.setState({
+            isFocused: false
+        });
+    };
+
     render() {
         return (
-            <Paper className={'search-bar-paper-background'} elevation={3}>
+            <Paper className={classNames('search-bar-paper-background', this.state.isFocused && 'search-bar-focus')}>
+                <div className={'search-bar-left-search-container'}>
+                    <SearchIcon className={'search-bar-search-icon'}/>
+                </div>
                 <Input
-                    placeholder="names, locations, etc"
-                    disableUnderline
-                    fullWidth
+                    placeholder="Names, Locations, etc."
                     autoFocus
-                    className={'search-bar-no-suggest-input'}
+                    disableUnderline
+                    className={'search-bar-input'}
                     onChange={this.handleChange}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
                     inputProps={{
-                        'aria-label': 'Description',
+                        'aria-label': 'Search Bar',
                     }}
                 />
-                <div className={'search-bar-right-search-container'}>
-                    <Search className={'search-bar-search-icon'}/>
-                </div>
             </Paper>
         );
     }

src/styles/containers/searchBar.scss

 .search-bar-paper-background {
-  height: 54px;
-  max-width: 600px;
-  width: 90%;
+  height: 44px;
+  width: 400px;
   display: flex;
-  margin: 0 auto 16px auto;
+  border-radius: 4px !important;
+  background-color: rgba(0, 0, 0, 0.04) !important;
+  box-shadow: none !important;
+
+  &.search-bar-focus {
+    background-color: rgba(255, 255, 255, 1) !important;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
+  }
 }
 
-.search-bar-right-search-container {
+.search-bar-left-search-container {
   height: 100%;
   display: flex;
   align-items: center;
@@ -18,8 +24,9 @@
   color: rgba(0,0,0,0.54);
 }
 
-.search-bar-no-suggest-input {
+.search-bar-input {
   display: flex !important;
   align-items: center !important;
-  margin-left: 8px !important;
+  transition: ease-in-out width 250ms;
+  width: 100%
 }
\ No newline at end of file