Made the posts look prettier

twistter-frontend/src/pages/user.js

@@ -7,6 +7,8 @@ import { Link } from 'react-router-dom';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
 import Chip from '@material-ui/core/Chip';
 import Button from '@material-ui/core/Button';
 import Typography from "@material-ui/core/Typography";
@@ -17,7 +19,6 @@ import TextField from '@material-ui/core/TextField';
 import Userline from '../Userline';
 import noImage from '../images/no-img.png';
 import Writing_Microblogs from '../Writing_Microblogs';
-import PostSkeleton from '../util/PostSkeleton';
 
 const MyChip = styled(Chip)({
   margin: 2,
@@ -99,25 +100,31 @@ class user extends Component {
         onDelete={ (topic) => this.handleDelete(topic)}/>)
     ) : (<p> loading topics...</p>);
 
-    let imageMarkup = this.state.imageUrl ? (
-      <img
-      src={this.state.imageUrl}
-      height="250"
-      width="250"
-      />
-    ) : (<img src={noImage}/>);
+    let imageMarkup = this.state.imageUrl ? (<img src={this.state.imageUrl} height="150" width="150" />) : 
+                                            (<img src={noImage} height="150" width="150"/>);
 
     let postMarkup = this.state.posts ? (
       this.state.posts.map(post => 
-      <p>
-        {imageMarkup} <br />
-        {post.userHandle} <br />
-        {post.createdAt} <br />
-        {post.microBlogTitle} <br />
-        {post.body} <br />
-        {post.microBlogTopics} <br />
-        Likes {post.likeCount} Comments {post.commentCount} <br />
-      </p>)
+        <Card>
+          <CardContent>
+            <Typography>
+              {
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                                      (<img src={noImage} height="50" width="50"/>)
+              }
+            </Typography>
+            <Typography variant="h7"><b>{post.userHandle}</b></Typography>
+            <Typography variant="body2" color={"textSecondary"}>{post.createdAt}</Typography>
+            <br />
+            <Typography variant="body1"><b>{post.microBlogTitle}</b></Typography>
+            <Typography variant="body2">{post.body}</Typography>
+            <br />
+            <Typography variant="body2"><b>Topics:</b> {post.microBlogTopics}</Typography>
+            <br />
+            <Typography variant="body2" color={"textSecondary"}>Likes {post.likeCount} Comments {post.commentCount}</Typography>
+          </CardContent>
+        </Card>
+      )
     ) : (<p>My Posts</p>);
 
     return (
@@ -133,7 +140,7 @@ class user extends Component {
           margin="normal"
           variant="outlined"
           value={this.state.newTopic}
-          onChange={ (event) => this.handleChange(event)}
+          onChange={(event) => this.handleChange(event)}
           />
           <AddCircle
             color="primary"
@@ -144,10 +151,10 @@ class user extends Component {
           <Button component={ Link } to='/edit'>Edit Profile Info</Button>
         </Grid>
         <Grid item sm={4} xs={8}>
-          <Writing_Microblogs />
+          {postMarkup}
         </Grid>
         <Grid item sm={4} xs={8}>
-          {postMarkup}
+          <Writing_Microblogs />
         </Grid>
       </Grid>
     );