Fix #19

client/src/components/Search.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import UserSearch from './UserSearch'
 import {compose} from 'react-apollo'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import Paper from '@material-ui/core/Paper'
 
 // Materia UI
 
@@ -9,9 +10,11 @@ import { withStyles } from '@material-ui/core/styles'
 
 const styles = theme => ({
   root: {
+    width: '50%',
     flexGrow: 1,
-    padding: 60,
-    margin: 2
+    padding: 10,
+    marginLeft: '25%',
+    marginTop: '2%'
   }
 })
 
@@ -23,10 +26,13 @@ class Search extends Component {
     }
   }
   render () {
+    const { classes } = this.props
     return (
       <React.Fragment>
         <CssBaseline />
-        <UserSearch />
+        <Paper className={classes.root}>
+          <UserSearch />
+        </Paper>
       </React.Fragment>
     )
   }

client/src/components/UserSearch.js

@@ -13,7 +13,6 @@ import CardMedia from '@material-ui/core/CardMedia'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 import Grid from '@material-ui/core/Grid'
-import Paper from '@material-ui/core/Paper'
 
 import TextField from '@material-ui/core/TextField'
 
@@ -21,13 +20,6 @@ import TextField from '@material-ui/core/TextField'
 import PortraitImage from '../img/portrait.jpg'
 
 const styles = theme => ({
-  root: {
-    width: '50%',
-    flexGrow: 1,
-    padding: 10,
-    marginLeft: '25%',
-    marginTop: '2%'
-  },
   card: {
     maxWidth: 150,
     minWidth: 150,
@@ -207,7 +199,7 @@ class UserSearch extends Component {
   render () {
     const { classes } = this.props
     return (
-      <Paper className={classes.root}>
+      <div>
         <form onSubmit={this.submitForm.bind(this)}>
 
           <Typography className={classes.formTypography} variant='body2' gutterBottom align='left'>
@@ -264,7 +256,7 @@ class UserSearch extends Component {
         <Grid container className={classes.grid} justify='center' spacing={24}>
           {this.displayUsers()}
         </Grid>
-      </Paper>
+      </div>
     )
   }
 }