From 38df4ef08769afd4c38801c07d6bac3dd7db161b Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Sun, 3 Nov 2019 15:29:39 -0500
Subject: [PATCH] Added styles and spaced cards

---
 twistter-frontend/src/pages/Home.js | 16 ++++++++++++----
 twistter-frontend/src/pages/user.js | 16 ++++++++++++----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/twistter-frontend/src/pages/Home.js b/twistter-frontend/src/pages/Home.js
index c5ddc43..37cebf9 100644
--- a/twistter-frontend/src/pages/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -9,6 +9,7 @@ import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
 import CardContent from '@material-ui/core/CardContent';
 import Typography from "@material-ui/core/Typography";
+import withStyles from '@material-ui/styles/withStyles';
 
 // component
 import '../App.css';
@@ -16,6 +17,12 @@ import logo from '../images/twistter-logo.png';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class Home extends Component {
   state = {};
 
@@ -38,10 +45,10 @@ class Home extends Component {
 
   render() {
     let authenticated = this.props.user.authenticated;
-
+    let {classes} = this.props;
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card className={classes.card}>
           <CardContent>
             <Typography>
               {
@@ -106,7 +113,8 @@ const mapStateToProps = (state) => ({
 })
 
 Home.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(Home);
\ No newline at end of file
+export default connect(mapStateToProps)(withStyles(styles)(Home));
\ No newline at end of file
diff --git a/twistter-frontend/src/pages/user.js b/twistter-frontend/src/pages/user.js
index 490c222..355ba3e 100644
--- a/twistter-frontend/src/pages/user.js
+++ b/twistter-frontend/src/pages/user.js
@@ -13,6 +13,7 @@ import CardMedia from '@material-ui/core/CardMedia';
 import CardContent from '@material-ui/core/CardContent';
 import Button from '@material-ui/core/Button';
 import Grid from "@material-ui/core/Grid";
+import withStyles from '@material-ui/styles/withStyles';
 
 import Chip from "@material-ui/core/Chip";
 import Typography from "@material-ui/core/Typography";
@@ -28,6 +29,12 @@ const MyChip = styled(Chip)({
   color: "primary"
 });
 
+const styles = {
+  card: {
+    marginBottom: 5
+  }
+}
+
 class user extends Component {
   state = {
     profile: null,
@@ -104,7 +111,7 @@ class user extends Component {
 
   render() {
     let authenticated = this.props.user.authenticated;
-    let classes = this.props;
+    let {classes} = this.props;
     let profileMarkup = this.state.profile ? (
       <p>
       <Typography variant='h5'>{this.state.profile}</Typography>
@@ -128,7 +135,7 @@ class user extends Component {
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-        <Card>
+        <Card className={classes.card}>
           <CardContent>
             <Typography>
               {
@@ -190,7 +197,8 @@ const mapStateToProps = (state) => ({
 })
 
 user.propTypes = {
-  user: PropTypes.object.isRequired
+  user: PropTypes.object.isRequired,
+  clases: PropTypes.object.isRequired
 }
 
-export default connect(mapStateToProps)(user);
+export default connect(mapStateToProps)(withStyles(styles)(user));