Search form inside the Referral Program

client/src/components/Search.js

@@ -1,12 +1,37 @@
-import React from 'react'
+import React, { Component } from 'react'
 import UserSearch from './UserSearch'
+import {graphql, compose} from 'react-apollo'
 
-const Search = () => {
-  return (
-    <div>
-      <UserSearch />
-    </div>
-  )
+// Materia UI
+
+import { withStyles } from '@material-ui/core/styles'
+import Paper from '@material-ui/core/Paper'
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    padding: 60,
+    margin: 2
+  }
+})
+
+class Search extends Component {
+
+  constructor (props) {
+    super(props)
+    this.state = {
+    }
+  }
+  render () {
+    const { classes } = this.props
+    return (
+      <Paper className={classes.root}>
+        <UserSearch />
+      </Paper>
+    )
+  }
 }
 
-export default Search
+export default compose(
+  withStyles(styles)
+)(Search)

client/src/components/UserReferrals.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react'
 import {graphql, compose} from 'react-apollo'
 import {getRolesQuery, updateUserMutation, getUsersQuery} from '../queries/queries'
 
+// components
+
+import UserSearch from './UserSearch'
+
 // Material-ui
 
 import { withStyles } from '@material-ui/core/styles'
@@ -21,7 +25,6 @@ import Grid from '@material-ui/core/Grid'
 import Typography from '@material-ui/core/Typography'
 
 // Images
-import GithubLogo from '../img/github-logo.png'
 import AALogo from '../img/aa-logo.png'
 
 const styles = theme => ({
@@ -290,23 +293,7 @@ class UserReferrals extends Component {
         overall reputation within the project.
         </Typography>
 
-          <Grid container justify='center' >
-            <Grid item>
-              <img className={classes.img} src={GithubLogo} alt='Github' />
-            </Grid>
-          </Grid>
-
-          <Typography className={classes.typography} variant='body1' gutterBottom align='left'>
-          Use the search field to find the who referred you to the project.
-          </Typography>
-
-          <TextField
-            id='search'
-            type='text'
-            value={this.state.search}
-            label='Search'
-            className={classes.inputField}
-            />
+          <UserSearch />
 
           <Grid container justify='center' >
             <Grid item>

client/src/components/UserSearch.js

@@ -13,7 +13,7 @@ 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'
 
 // components
@@ -23,11 +23,6 @@ import UserProfile from './UserProfile';
 import PortraitImage from '../img/portrait.jpg'
 
 const styles = theme => ({
-  root: {
-    flexGrow: 1,
-    padding: 60,
-    margin: 2,
-  },
   card: {
     maxWidth: 145,
     minWidth: 100,
@@ -210,7 +205,7 @@ if (this.props.selectButton === true) {
   render() {
     const { classes } = this.props;
     return (
-      <Paper className={classes.root}>
+      
         <form onSubmit={this.submitForm.bind(this)}>
 
         <Typography className={classes.formTypography} variant='body1' gutterBottom align='left'>
@@ -268,7 +263,7 @@ if (this.props.selectButton === true) {
         </Grid>
 
       </form>
-    </Paper>
+    
     );
   }
 }