Move search field to drawer header

src/client/components/IntegrationAutosuggest.js

@@ -49,7 +49,7 @@ const styles = theme => ({
   container: {
     //flexGrow: 0,
     position: 'relative',
-    marginTop: theme.spacing.unit * 4,
+    //marginTop: theme.spacing.unit * 4,
     // paddingLeft: theme.spacing.unit * 15,
     // paddingRight: theme.spacing.unit * 15,
     //marginLeft: 24,

src/client/components/SearchButtons.js

@@ -6,7 +6,6 @@ import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import SearchIcon from '@material-ui/icons/Search';
 import InputAdornment from '@material-ui/core/InputAdornment';
-import {CSVLink} from 'react-csv';
 
 class SearchButtons extends React.Component {
   state = {
@@ -23,7 +22,7 @@ class SearchButtons extends React.Component {
   };
 
   handleClickSearchButton = () => {
-    console.log('places');
+    // console.log('places');
   };
 
   handleClickStats = () => {
@@ -66,11 +65,6 @@ class SearchButtons extends React.Component {
           open={Boolean(anchorEl)}
           onClose={this.handleClose}
         >
-          <MenuItem
-            key='csv'
-            onClick={this.handleClose}>
-            <CSVLink data={this.props.search.results}>Results as CSV</CSVLink>
-          </MenuItem>
           <MenuItem
             key='stats'
             onClick={this.handleClickStats}>

src/client/components/VirtualizedTable.js

@@ -16,29 +16,24 @@ import {
   SortDirection,
 } from 'react-virtualized';
 
-const styles = theme => ({
+const styles = () => ({
   root: {
     display: 'flex',
     height: '100%',
     flexGrow: 1,
   },
   container: {
-    paddingTop: theme.spacing.unit * 3,
     height: '100%',
     flexDirection: 'column'
   },
   resultsInfo: {
     flexGrow: 0
   },
-  resultsInfoPaper: {
-    height: 40
-  },
 });
 
 const tableStyles = {
   tableRoot: {
     fontFamily: 'Roboto',
-    paddingTop: 24
   },
   headerRow: {
     textTransform: 'none',
@@ -83,7 +78,7 @@ class VirtualizedTable extends React.PureComponent {
     const sortedList = this._sortList({sortBy, sortDirection});
 
     this.state = {
-      headerHeight: 30,
+      headerHeight: 50,
       overscanRowCount: 10,
       rowHeight: 40,
       rowCount: this.props.list.size,

src/client/containers/MapApp.js

@@ -95,6 +95,8 @@ const styles = theme => ({
   drawerSearch: {
     display: 'flex',
     justifyContent: 'center',
+    alignItems: 'center',
+    ...theme.mixins.toolbar,
   },
   // content = whole rigth column
   content: {
@@ -154,7 +156,16 @@ let MapApp = (props) => {
         paper: classes.drawerPaper,
       }}
     >
-      <div className={classes.drawerHeader}>
+      <div className={classes.drawerSearch}>
+        <IntegrationAutosuggest
+          search={props.search}
+          updateQuery={props.updateQuery}
+          fetchSuggestions={props.fetchSuggestions}
+          clearSuggestions={props.clearSuggestions}
+          fetchResults={props.fetchResults}
+          clearResults={props.clearResults}
+          updateResultFormat={props.updateResultFormat}
+        />
         <IconButton onClick={props.closeDrawer}>
           {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
         </IconButton>
@@ -176,22 +187,11 @@ let MapApp = (props) => {
         </ExpansionPanelSummary>
         <ExpansionPanelDetails>
           <Typography>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
-            sit amet blandit leo lobortis eget.
+            Saved searches go here
           </Typography>
         </ExpansionPanelDetails>
       </ExpansionPanel>
-      <div className={classes.drawerSearch}>
-        <IntegrationAutosuggest
-          search={props.search}
-          updateQuery={props.updateQuery}
-          fetchSuggestions={props.fetchSuggestions}
-          clearSuggestions={props.clearSuggestions}
-          fetchResults={props.fetchResults}
-          clearResults={props.clearResults}
-          updateResultFormat={props.updateResultFormat}
-        />
-      </div>
+
       {resultsView}
     </Drawer>
   );