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,24 +208,34 @@ class user extends Component {
               <Grid item sm>
                 {imageMarkup}
                 {profileMarkup}
-                {topicsMarkup}
-                <TextField
-                  id="newTopic"
-                  label="new topic"
-                  defaultValue=""
-                  margin="normal"
-                  variant="outlined"
-                  value={this.state.newTopic}
-                  onChange={(event) => this.handleChange(event)}
-                />
-                <AddCircle color="primary" clickable onClick={this.handleAddCircle} />
               </Grid>
               <Grid item sm>
                 {postMarkup}
               </Grid>
             </Grid>
           </Grid>
-          <Grid item sm />
+          <Grid item sm>
+            <Container
+              className={classes.topicsContainer}
+              maxWidth="xs">
+              {topicsMarkup}
+            </Container>
+            <TextField
+              id="newTopic"
+              label="new topic"
+              defaultValue=""
+              margin="normal"
+              variant="outlined"
+              value={this.state.newTopic}
+              onChange={(event) => this.handleChange(event)}
+            />
+            <AddCircle
+              className={classes.addCircle}
+              color="primary"
+              // iconStyle={classes.addCircle}
+              clickable
+              onClick={this.handleAddCircle} />
+          </Grid>
         </Grid>
       </div>
     );