Improved the design of comments page, avatars and username colors

bounswe · Dec 8, 2021 · 3f45be0 · 3f45be0
1 parent 3e6ff3f
commit 3f45be0
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/frontend/src/Views/Comments/Comment.js b/frontend/src/Views/Comments/Comment.js
@@ -16,7 +16,7 @@ const Comment = React.forwardRef((props,ref) => {
         }
         setTimeout(() => {
             ref.current.focus();
-        }, 100);
+        }, 200);
     }
     const formatDate = (dateString) => {
         const months = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"]
@@ -41,10 +41,12 @@ const Comment = React.forwardRef((props,ref) => {
         <React.Fragment>
             <ListItem alignItems="flex-start" style={listStyle}>
                 <ListItemAvatar>
-                    <Avatar src={object.avatar}/>
+                        <Avatar src={object.avatar}/>
+
                 </ListItemAvatar>
                 <Stack direction="column">
-                    <ListItemText style={{paddingTop: 0, paddingBottom: 0}} primary={object.username}
+                    <ListItemText style={{paddingTop: 0, paddingBottom: 0}}
+                                  primary={<Typography style={{fontWeight:"550"}}>{object.username}</Typography>}
                                   secondary={<Typography style={contentStyle}>{object.content}</Typography>}/>
                     <Stack direction="row" spacing={1}>
                         {object.creationDate ?
@@ -55,7 +57,7 @@ const Comment = React.forwardRef((props,ref) => {
                         }
                         <button style={{
                             background: "none", border: "none", marginBottom: "2px", padding: 0,
-                            cursor: "pointer", color: "#525960", fontWeight: "bold"
+                            cursor: "pointer", color: "#677079", fontWeight: "bold"
                         }}
                                 onClick={handleReply}>reply
                         </button>

diff --git a/frontend/src/Views/Comments/Comments.js b/frontend/src/Views/Comments/Comments.js
@@ -42,14 +42,13 @@ export default function Comments(props){
                 username:"sefika", content:":)", isAnswer:true}]},
             {avatar:"https://avatars.githubusercontent.com/u/36790615?v=4}",
                 username:"dogukanakar", content:"Do you wanna play a rematch?", isAnswer:false,
-                answers:[{avatar:"https://avatars.githubusercontent.com/u/52797716?v=4}",
-                    username:"bdoner", content:"Sure!", isAnswer:true},
+                answers:[{
+                    username:"bdoner", content:"Sure!", isAnswer:true}
             ]}];
     return (
         <div>
             <Button onClick={handleOpen}>View Comments</Button>
-            <Dialog open={open} onClose={handleClose} fullWidth>
-                <DialogTitle>Comments</DialogTitle>
+            <Dialog open={open} onClose={handleClose}   disableScrollLock={ true } fullWidth>
                 <DialogContent>
                     <List>
                         {comments.map(d=>
@@ -58,10 +57,10 @@ export default function Comments(props){
                             </React.Fragment>
                         )}
                     </List>
-                    <Grid container spacing={3}>
+                    <Grid container spacing={3} >
                         <Grid item sm={10}>
                             <TextField id="comment" fullWidth size="small" variant="outlined" placeholder="Add comment..."
-                                  inputRef={textInput}   autoFocus style={{marginLeft:"3%",marginBottom:"3%"}}    value={newComment||""} onChange={handleInput}></TextField>
+                                       inputRef={textInput} style={{marginLeft:"3%",marginBottom:"3%"}}    value={newComment||""} onChange={handleInput}></TextField>
                         </Grid>
                         <Grid item sm={2}>
                             <Button onClick={handlePostComment}>Share</Button>