Home Version 1 ready

client/src/components/Home.js

@@ -4,20 +4,21 @@ import { withStyles } from '@material-ui/core/styles'
 import {LineChart} from 'react-easy-chart'
 import Paper from '@material-ui/core/Paper'
 import Grid from '@material-ui/core/Grid'
+import Typography from '@material-ui/core/Typography'
 
 const styles = theme => ({
   root: {
     flexGrow: 1,
     padding: 100
   },
-  img: {
-    margin: 'auto',
-    display: 'block',
-    maxWidth: 120,
-    maxHeight: 24
+  grid: {
+    margin: theme.spacing.unit,
+    width: '50%'
   },
-  button: {
-    margin: theme.spacing.unit
+  typography: {
+    width: '100%',
+    marginTop: 20,
+    marginBottom: 20
   }
 })
 
@@ -27,8 +28,17 @@ class Home extends Component {
     const { classes } = this.props
     return (
       <Paper className={classes.root}>
-        <Grid className={classes.button} container justify='center' spacing={24}>
-          <Grid item>
+        <Grid container justify='center' spacing={24}>
+          <Grid className={classes.grid} item>
+            <Typography className={classes.typography} gutterBottom variant='headline' component='h2'>
+              Welcome to the User Module
+            </Typography>
+            <Typography className={classes.typography} component='p'>
+              This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in.
+            </Typography>
+            <Typography className={classes.typography} component='p' >
+            Below, you can see some usage statistics, in this case, the total amount of users over time.
+            </Typography>
             <LineChart
               xType={'time'}
               axes
@@ -37,17 +47,11 @@ class Home extends Component {
               height={250}
               data={[
                 [
-              { x: '1-Jan-15', y: 20 },
-              { x: '1-Feb-15', y: 10 },
-              { x: '1-Mar-15', y: 33 },
-              { x: '1-Apr-15', y: 45 },
-              { x: '1-May-15', y: 15 }
-                ], [
-              { x: '1-Jan-15', y: 10 },
-              { x: '1-Feb-15', y: 15 },
-              { x: '1-Mar-15', y: 13 },
-              { x: '1-Apr-15', y: 15 },
-              { x: '1-May-15', y: 10 }
+              { x: '1-Sep-17', y: 2 },
+              { x: '2-Sep-17', y: 4 },
+              { x: '3-Sep-17', y: 5 },
+              { x: '4-Sep-17', y: 6 },
+              { x: '5-Sep-17', y: 7 }
                 ]
               ]}
         />