Tighter layout

src/components/IntegrationAutosuggest.js

@@ -7,6 +7,7 @@ import { withStyles } from '@material-ui/core/styles';
 import SuggestionItem from './SuggestionItem';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import SearchIcon from '@material-ui/icons/Search';
 
 function renderInput(inputProps) {
   const { classes, ref, ...other } = inputProps;
@@ -48,8 +49,11 @@ const styles = theme => ({
     flexGrow: 0,
     position: 'relative',
     marginTop: theme.spacing.unit * 2,
-    paddingLeft: theme.spacing.unit * 2,
-    paddingRight: theme.spacing.unit * 2
+    // paddingLeft: theme.spacing.unit * 15,
+    // paddingRight: theme.spacing.unit * 15,
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: 300,
   },
   suggestionsContainerOpen: {
     position: 'absolute',
@@ -57,8 +61,9 @@ const styles = theme => ({
     marginTop: theme.spacing.unit,
     left: 0,
     right: 0,
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: 300,
   },
   suggestion: {
     display: 'block',
@@ -70,6 +75,13 @@ const styles = theme => ({
     maxHeight: 500,
     overflow: 'auto',
   },
+  icon: {
+    color: theme.palette.text.secondary,
+    paddingTop: 4,
+  },
+  spinner: {
+    //margin: theme.spacing.unit,
+  }
 });
 
 const IntegrationAutosuggest = (props) => {
@@ -112,7 +124,7 @@ const IntegrationAutosuggest = (props) => {
   };
 
   const shouldRenderSuggestions = (value)  => {
-    return value.trim().length > 2;
+    return value.trim().length > 3;
   };
 
   const handleOnSuggestionsClearRequested = () => {
@@ -123,9 +135,11 @@ const IntegrationAutosuggest = (props) => {
   const { classes } = props;
   //console.log('IntegrationAutosuggest', props.search.suggestions);
 
-  let spinner = null;
+  let adornment = null;
   if (props.search.fetchingSuggestions) {
-    spinner = <InputAdornment position="end"><CircularProgress size={28} /></InputAdornment>;
+    adornment = <InputAdornment position="end"><CircularProgress size={20} /></InputAdornment>;
+  } else {
+    adornment = <SearchIcon className={classes.icon} />;
   }
 
   return (
@@ -154,7 +168,7 @@ const IntegrationAutosuggest = (props) => {
         onChange: handleOnChange,
         onKeyDown: handleOnKeyDown,
         autoFocus: true,
-        endAdornment: spinner
+        endAdornment: adornment
       }}
     />
   );

src/components/SimpleTable.js

@@ -15,10 +15,23 @@ const styles = theme => ({
     overflowX: 'hidden',
   },
   table: {
-    minWidth: 700,
+    width: 600,
   },
+
 });
 
+const CustomTableCell = withStyles(theme => ({
+  root: {
+    paddingRight: 24,
+  },
+  head: {
+    fontWeight: 600,
+  },
+  // body: {
+  //   fontSize: 14,
+  // },
+}))(TableCell);
+
 const SimpleTable = (props) => {
   const { classes, data } = props;
 
@@ -28,22 +41,22 @@ const SimpleTable = (props) => {
         <Table className={classes.table}>
           <TableHead>
             <TableRow>
-              <TableCell>Name</TableCell>
-              <TableCell>Type</TableCell>
-              <TableCell>Area</TableCell>
-              <TableCell>Source</TableCell>
+              <CustomTableCell>Name</CustomTableCell>
+              <CustomTableCell>Type</CustomTableCell>
+              <CustomTableCell>Area</CustomTableCell>
+              <CustomTableCell>Source</CustomTableCell>
             </TableRow>
           </TableHead>
           <TableBody>
             {data.map(result => {
               return (
                 <TableRow key={result.s}>
-                  <TableCell component="th" scope="row">
+                  <CustomTableCell component="th" scope="row">
                     {result.label}
-                  </TableCell>
-                  <TableCell>{result.typeLabel}</TableCell>
-                  <TableCell>{result.broaderAreaLabel}</TableCell>
-                  <TableCell>{result.source}</TableCell>
+                  </CustomTableCell>
+                  <CustomTableCell>{result.typeLabel}</CustomTableCell>
+                  <CustomTableCell>{result.broaderAreaLabel}</CustomTableCell>
+                  <CustomTableCell>{result.source}</CustomTableCell>
                 </TableRow>
               );
             })}

src/containers/MapApp.js

@@ -35,7 +35,7 @@ import {
   getGeoJSON
 } from '../actions';
 
-const drawerWidth = 800;
+const drawerWidth = 600;
 
 const styles = theme => ({
   root: {
@@ -127,6 +127,7 @@ let MapApp = (props) => {
       variant="persistent"
       anchor={anchor}
       open={drawerIsOpen}
+      width={drawerWidth}
       classes={{
         paper: classes.drawerPaper,
       }}