fixed comment page issues and simplified code

client/src/components/TermComments/TermComments.css

@@ -1,38 +1,116 @@
 .termComments {
     background: #fff;
+    text-align: center;
     margin: 15px;
     box-shadow: 0 1px 1px rgba(0,0,0,0.3);
     width: 100%;
 }
 
 .termComments h3 {
+    background: linear-gradient(57deg, #77c9d4, #57bc90);
+    color: #015249;
+    font-size: 1.7rem;
+    font-weight: 600;
+    line-height: 1.8;
+    font-family: 'Roboto Mono', monospace;
+    margin-bottom: 30px;
+}
+
+.commentContainer {
+    display: block;
+    text-align: left;
+    min-height: 35px;
+    padding: 15px;
+}
+
+.addComment {
+    text-align: left;
+}
+
+.commenting{
+    text-align: right;
+}
+
+.commentAuthor {
+    display: inline-block;
+    vertical-align: top;
     background-color: #015249;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px; 
+    padding: 20px 10px;
+    margin-right: 20px;
     color: white;
-    font-size: 1.7rem;
-    line-height: 1.5;
-    text-align: center;
+}
 
+.editBox {
+    width: 60%;
+    min-height: 100px;
+    height: auto;
+    white-space: pre-wrap;
+    background-color: #fff;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px; 
+    border: transparent;
+    padding: 20px 10px 20px 10px;
+    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
 }
 
+.commentIcon {
+    width: 25px;
+    margin-left: 10px;
+}
 
-.termComments button {
-    text-align: center;
+.commentBody {
+    display:inline-block;
+    white-space: pre-wrap;
+    background-color: #f5f5f5;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px; 
+    padding: 20px 10px 20px 10px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    width: 60%;
+    height: auto;
 }
 
-.termComments .commentContainer {
-    margin: 15px;
-    text-align: left;
+.commentBar {
+    font-size: 0.7rem;
+    text-align: right;
+    padding-bottom: 10px;
+}
 
+.deleteComment {
+    margin-top: 5px;
+    margin-left: 75%;
+    background-color: #015249;
+    color: white;
+    border: none;
+    padding: 10px;
 }
+
 .termComments:hover {
     transition: all .3s ease-out;
-    transform: scale(1.02);
+    box-shadow: -2px 8px 22px 0 rgba(0,0,0,.15);
 }
 
 @media only screen and (min-width: 700px)  {
 
-    .termComments {
-      box-shadow: 0 1px 1px rgba(0,0,0,0.3);
+    .commentAuthor {
+        padding: 20px 15px;
+    }
+
+    .commentBody {
+        width: 80%;
+        padding: 10px 15px 20px 15px;
+    }
+
+    .editBox {
+        width: 80%;
+        padding: 10px 15px 20px 15px;
     }
-
+    .deleteComment {
+        margin-left: 85%;
+    }  
 }

client/src/components/TermComments/TermComments.js

@@ -5,64 +5,42 @@ import axios from 'axios';
 import { Link } from 'react-router-dom';
 import moment from 'moment';
 
-class TermComments extends Component {
-    constructor(props, context) {
-        super(props, context);
+const TermComments = props =>  (
 
-    }
-
-
-
-
-
-
-
-
-    render() {
-        return (
-            <div className="termComments">
-                {(this.props.comments).map(comment => {
-
-                    return (
-                    <div key={comment._id}>
-                        <div>{comment.authorName}</div>
-                        <div>{moment(comment.createdAt).format('dddd-MMM-YYYY  HH:mm')}</div>
-                        {this.props.update === true && this.props.commentId === comment._id ? <textarea onChange={this.props.handleChange} value={this.props.commentEdit} name='commentEdit'></textarea>
-                        : <div style={{ whiteSpace:'pre-wrap', textAlign: 'left'}} >{comment.body}</div>}
-                        <div>
-                            {(this.props.update === false && this.props.username === comment.authorName) && <button onClick={() => this.props.updateComment(comment._id, comment.body)}>Update</button>}
-                            {this.props.admin ? <button onClick={() => this.props.deleteComment(comment._id)}>Delete</button>
-                            : this.props.username === comment.authorName && <button onClick={() => this.props.deleteComment(comment._id)}>Delete</button>
-                        }
-                            {(this.props.update === true && this.props.commentId === comment._id) && <button onClick={() => this.props.updateComment(comment._id, this.props.commentEdit)}>Submit</button>}
-                        </div>
+    <div className="termComments">
+    <h3>Comments</h3>
+        {(props.comments).map(comment => {
+
+            return (
+            <div className="commentContainer" key={comment._id}>
+                <div className="commentAuthor">{comment.authorName}</div>
+                {props.update === true && props.commentId === comment._id ? <textarea className="editBox" onChange={props.handleChange} value={props.commentEdit} name='commentEdit'></textarea>
+                : <div className="commentBody">
+                    <div className="commentBar">{moment(comment.createdAt).format('dddd-MMM-YYYY  HH:mm')} {props.update === false && <img className="commentIcon"  onClick={() => props.updateComment(comment._id, comment.body)} src='./images/pencil.svg' alt="edit" />} <img onClick={() => props.deleteComment(comment._id)} className="commentIcon" src='./images/trashcan.svg' alt="delete" /></div>
+                    <div>
+                        {comment.body}
                     </div>
-                    )
-                })}
-                    <h4>FORM</h4>
-                {Auth.isUserAuthenticated() ?
-                    (<div>
-                        <h2>Commenting as: {this.props.username}</h2>
-                        <form onSubmit={this.props.commentSubmit} >
-                            <textarea style={{ width:'80%', height:'100px'}} name='comment' type='text' value={this.props.comment} onChange={this.props.handleChange} />
-                            <button type='submit'>Submit</button>
-                        </form>
-                    </div>) : (
-                        <div><Link to='/login'>Log in</Link> or <Link to='/signup'>Sign up</Link> to post a comment!</div>
-                    )
-                }
-            </div>
-        )};
-
-}
-/*
- <div className="termComments">
-            <h3>User Comments</h3>
-            <button>Add a comment</button>
-            <div className="commentContainer">
-                <p>Sample comment 1 by a user</p>
-                <p>Sample crazy comment 2 by a user</p>
+                </div>}
+                {props.username === comment.authorName &&
+                <div>
+                    {(props.update === true && props.commentId === comment._id) && <button className="deleteComment" onClick={() => props.updateComment(comment._id, props.commentEdit)}>Submit</button>}
+                </div>}
             </div>
+            )
+        })}
+        {Auth.isUserAuthenticated() ?
+            (
+                <div>
+                    <span className="addComment">Add a comment</span>
+                    <span className="commenting">Commenting as: {props.username}</span>
+                    <form onSubmit={props.commentSubmit} >
+                        <textarea style={{ width:'80%', height:'100px'}} name='comment' type='text' value={props.comment} onChange={props.handleChange} />
+                        <button type='submit'>Submit</button>
+                    </form>
+                </div>) : (
+                <div><Link to='/login'>Log in</Link> or <Link to='/signup'>Sign up</Link> to post a comment!</div>
+            )
+        }
     </div>
-*/
+)
 export default TermComments;

client/src/components/TermExtended/TermExtended.css

@@ -20,6 +20,7 @@
     font-size: 1.2rem;
     line-height: 1.7rem;
     font-family: 'Lora', serif;
+    white-space: pre-wrap;
 }
 
 .termExtended:hover {