Main layout of profile page

twistter-frontend/src/pages/user.js

@@ -24,7 +24,7 @@ import GridList from '@material-ui/core/GridList';
 import GridListTile from '@material-ui/core/GridListTile';
 import GridListTileBar from '@material-ui/core/GridListTileBar';
 import Paper from '@material-ui/core/Paper';
-
+import Container from '@material-ui/core/Container';
 
 // component
 import '../App.css';
@@ -41,11 +41,26 @@ const styles = {
     positon: 'relative',
     float: 'left',
     marginLeft: 30,
-    marginTop: 15
+    marginTop: 20
   },
   paper: {
     // marginLeft: "10%",
     // marginRight: "10%"
+  },
+  profileImage: {
+    marginTop: 20
+  },
+  topicsContainer: {
+    border: "lightgray solid 1px",
+    marginTop: 20,
+    paddingTop: 10,
+    paddingBottom: 10,
+    height: 300
+  },
+  addCircle: {
+    width: 65,
+    height: 65,
+    marginTop: 10
   }
 };
 
@@ -151,7 +166,7 @@ class user extends Component {
           <CardContent>
             <Typography>
               {
-                this.state.imageUrl ? (<img src={this.state.imageUrl} height="250" width="250" />) : 
+                this.state.imageUrl ? (<img src={this.state.imageUrl} height="50" width="50" />) : 
                                       (<img src={noImage} height="50" width="50"/>)
               }
             </Typography>
@@ -181,7 +196,6 @@ class user extends Component {
 		) : null;
 
     return (
-
       <div>
         {/* <Paper className={classes.paper}> */}
 
@@ -194,7 +208,18 @@ class user extends Component {
               <Grid item sm>
                 {imageMarkup}
                 {profileMarkup}
+              </Grid>
+              <Grid item sm>
+                {postMarkup}
+              </Grid>
+            </Grid>
+          </Grid>
+          <Grid item sm>
+            <Container
+              className={classes.topicsContainer}
+              maxWidth="xs">
               {topicsMarkup}
+            </Container>
             <TextField
               id="newTopic"
               label="new topic"
@@ -204,14 +229,13 @@ class user extends Component {
               value={this.state.newTopic}
               onChange={(event) => this.handleChange(event)}
             />
-                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
+            <AddCircle
+              className={classes.addCircle}
+              color="primary"
+              // iconStyle={classes.addCircle}
+              clickable
+              onClick={this.handleAddCircle} />
           </Grid>
-              <Grid item sm>
-                {postMarkup}
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item sm />
         </Grid>
       </div>
     );