Added styles and spaced cards

This commit is contained in:
Clayton Wilson 2019-11-03 15:29:39 -05:00
parent 2bd1c08c2c
commit 38df4ef087
2 changed files with 24 additions and 8 deletions

View File

@ -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);
export default connect(mapStateToProps)(withStyles(styles)(Home));

View File

@ -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));