modified app.css to adjust the app background

twistter-frontend/package-lock.json

@@ -454,9 +454,9 @@
           }
         },
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         }
       }
     },

twistter-frontend/src/App.css

@@ -1,3 +1,7 @@
+html,
+body {
+  background-color: rgb(245, 245, 245);
+}
 .app {
   font-family: "Segoe UI";
   font-size: large;

twistter-frontend/src/pages/user.js

@@ -1,5 +1,6 @@
 /* eslint-disable */
 import React, { Component } from 'react';
+import axios from 'axios';
 //import '../App.css';
 import { makeStyles, styled } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -12,20 +13,27 @@ const PostCard = styled(Card)({
   border: 3,
   borderRadius: 3,
   height:225,
-  width: 645,
+  width: 345,
   padding: '0 30px',
 });
 
 class user extends Component {
+  componentDidMount(){
+    //TODO: get user details
+    //TODO: get posts
+  }
+
   render() {
     
     return (
-      <div>
-        <h1>User Profile</h1>
-        <br/><br/>
-        <PostCard>Some card and content</PostCard>
-        <br/><br/>
-      </div>
+      <Grid container spacing={16}>
+        <Grid item sm={8} xs={12}>
+          <p>Post</p>
+        </Grid>
+        <Grid item sm={4} xs={12}>
+          <PostCard>Profile here</PostCard>
+        </Grid>
+      </Grid>
     )
   }
 }