[Enhancement #51] Comment form and list UI change

kbss-cvut · Sep 30, 2021 · 4651459 · 4651459
1 parent cbfa66e
commit 4651459
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 15 deletions.
diff --git a/src/components/comment/CommentForm.jsx b/src/components/comment/CommentForm.jsx
@@ -36,11 +36,10 @@ const CommentForm = (props) => {
             commentValue: commentValue
         };
         props.onSaveComment(comment);
-        console.log(comment)
         setCommentValue('');
     }
     return (
-        <Form onSubmit={submitHandler}>
+        <Form onSubmit={submitHandler} className="comment-form">
             <Form.Group className="mb-3" controlId="formBasicComment">
                 <Form.Label>Comments</Form.Label>
                 <Form.Control
@@ -52,7 +51,7 @@ const CommentForm = (props) => {
                     onChange={commentValueChangeHandler}
                 />
             </Form.Group>
-            <Button variant="primary" type="submit">
+            <Button className="comment-button" variant="primary" type="submit" >
                 Submit
             </Button>
         </Form>

diff --git a/src/components/comment/CommentList.jsx b/src/components/comment/CommentList.jsx
@@ -5,14 +5,13 @@ const CommentList = (props) => {
     return (
         <>
             {props.comments.map((comment) => (
-                <>
+                <div className="comment-list-items" key={comment.id}>
                     <CommentView
                         author={comment.author}
                         timestamp={comment.timestamp}
                         commentValue={comment.commentValue}
                     />
-                    <br/>
-                </>
+                </div>
             ))}
         </>
     )

diff --git a/src/components/comment/CommentView.jsx b/src/components/comment/CommentView.jsx
@@ -3,18 +3,18 @@ import TimeAgo from "javascript-time-ago";
 import en from "javascript-time-ago/locale/en";
 
 const CommentView = (props) => {
-    TimeAgo.addDefaultLocale(en);
+    TimeAgo.addLocale(en);
     const time = new TimeAgo('en-US');
-    const timeAgo = time.format(props.timestamp)
+    const timeAgo = time.format(props.timestamp);
 
     return (
         <div className="comment-content">
             <div className="row">
-                <span className="col-md-auto comment-author">{props.author}</span>
-                <span className="text-muted col-sm-auto timestamp">{timeAgo}</span>
+                <span className="col-auto comment-author">{props.author}</span>
+                <span className="col-auto text-muted comment-timestamp">{timeAgo}</span>
             </div>
             <div className="row">
-                <span className="comment-value col">{props.commentValue}</span>
+                <span className="col comment-value">{props.commentValue}</span>
             </div>
         </div>
     );

diff --git a/src/components/comment/QuestionCommentIcon.jsx b/src/components/comment/QuestionCommentIcon.jsx
@@ -28,7 +28,7 @@ const QuestionCommentIcon = () => {
 
             <Overlay target={target.current} show={show} placement="right" rootClose={true} onHide={hideOverlay}>
                 {(props) => (
-                    <Tooltip id="comment-tooltip" {...props}>
+                    <Tooltip className="comment-tooltip" {...props}>
                         <span>
                             <NewComment onAddComment={addCommentHandler}/>
                             <CommentList comments={comment}/>

diff --git a/src/styles/s-forms.css b/src/styles/s-forms.css
@@ -190,14 +190,23 @@ input:disabled {
   animation: emphasiseOnRelevantSection 1.2s ease-in;
 }
 
-.comment-content .comment-author {
-  font-weight: 700;
+.comment-tooltip > .tooltip-inner {
+  max-width: none;
+  width: 30vw;
 }
 
-.comment-content .comment-value {
+.comment-content {
   text-align: left;
 }
 
+.comment-content .comment-author {
+  font-weight: 900;
+}
+
+.comment-list-items {
+  padding-top: 20px;
+}
+
 @keyframes emphasiseOnRelevant {
   0% {
     display: none;