From 09b8af4d07cec1bbc2577c509f071a8ab486d786 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 13 Nov 2018 15:04:49 +0100
Subject: [PATCH] Implementing Container Div

---
 client/src/components/Browse.js          |  4 +++-
 client/src/components/ProfileSheet.js    |  7 ++++---
 client/src/components/Search.js          | 11 ++++++-----
 client/src/components/UserList.js        |  6 +++---
 client/src/components/YourDescendents.js |  7 ++++---
 client/src/components/YourReferrer.js    |  7 ++++---
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Browse.js b/client/src/components/Browse.js
index 53dcde252..000c8d4b7 100644
--- a/client/src/components/Browse.js
+++ b/client/src/components/Browse.js
@@ -13,7 +13,9 @@ class Browse extends Component {
           text='Everyone involved in Advanced Algos is here.'
           backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
         />
-        <UserList />
+        <div className='container'>
+          <UserList />
+        </div>
       </React.Fragment>
     )
   }
diff --git a/client/src/components/ProfileSheet.js b/client/src/components/ProfileSheet.js
index 034cf6046..3e75bc881 100644
--- a/client/src/components/ProfileSheet.js
+++ b/client/src/components/ProfileSheet.js
@@ -27,10 +27,9 @@ import AALogo from '../img/aa-logo.png'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -511,7 +510,9 @@ class ProfileSheet extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index 5bafb588a..c2d6f0ab9 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -10,10 +10,9 @@ import { withStyles } from '@material-ui/core/styles'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   }
@@ -31,9 +30,11 @@ class Search extends Component {
           text='Find anyone involved in Advanced Algos here.'
           backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
         />
-        <Paper className={classes.root}>
-          <UserSearch />
-        </Paper>
+        <div className='container'>
+          <Paper className={classes.root}>
+            <UserSearch />
+          </Paper>
+        </div>
       </React.Fragment>
     )
   }
diff --git a/client/src/components/UserList.js b/client/src/components/UserList.js
index cfc205511..462ecd1b4 100644
--- a/client/src/components/UserList.js
+++ b/client/src/components/UserList.js
@@ -34,9 +34,9 @@ import UserDefaultPicture from '../img/user-default-pic.jpg'
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
-    padding: 60,
-    margin: 2,
+    paddingTop:30,
+    paddingBottom:30,
+    flexGrow: 1 
   },
   card: {
     maxWidth: 345,
diff --git a/client/src/components/YourDescendents.js b/client/src/components/YourDescendents.js
index d0e144167..8427fb313 100644
--- a/client/src/components/YourDescendents.js
+++ b/client/src/components/YourDescendents.js
@@ -13,10 +13,9 @@ import DescendentsTree from './DescendentsTree'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -84,7 +83,9 @@ class YourDescendents extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }
diff --git a/client/src/components/YourReferrer.js b/client/src/components/YourReferrer.js
index 974e8c24c..5b9865a89 100644
--- a/client/src/components/YourReferrer.js
+++ b/client/src/components/YourReferrer.js
@@ -15,10 +15,9 @@ import Typography from '@material-ui/core/Typography'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -141,7 +140,9 @@ class YourReferrer extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }