From 1cccd09cd73ab39752a0cf9473cd03247ab1ecca Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Sep 2018 17:20:56 +0200
Subject: [PATCH] Home Version 1 ready

---
 client/src/components/Home.js | 44 +++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 60e8fa7db..bb3ea14d6 100644
--- a/client/src/components/Home.js
+++ b/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 }
                 ]
               ]}
         />