Improve style pt. 4 (post and comments)

app/javascript/components/Comments/Comment.tsx

@@ -6,6 +6,8 @@ import { MutedText } from '../shared/CustomTexts';
 
 import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
 
+import friendlyDate from '../../helpers/friendlyDate';
+
 interface Props {
   id: number;
   body: string;
@@ -39,8 +41,11 @@ const Comment = ({
     </div>
     <p className="commentBody">{body}</p>
     <div className="commentFooter">
-      <a className="commentReplyButton" onClick={handleToggleCommentReply}>Reply</a>
-      <MutedText>{updatedAt}</MutedText>
+      <a className="commentReplyButton" onClick={handleToggleCommentReply}>
+        { reply.isOpen ? 'Cancel' : 'Reply' }
+      </a>
+      &nbsp;&bull;&nbsp;
+      <MutedText>{friendlyDate(updatedAt)}</MutedText>
     </div>
     {
       reply.isOpen ?

app/javascript/components/Comments/CommentsP.tsx

@@ -4,7 +4,7 @@ import { FormEvent } from 'react';
 import NewComment from './NewComment';
 import CommentList from './CommentList';
 import Spinner from '../shared/Spinner';
-import { DangerText } from '../shared/CustomTexts';
+import { DangerText, UppercaseText } from '../shared/CustomTexts';
 
 import IComment from '../../interfaces/IComment';
 import { CommentRepliesState } from '../../reducers/commentRepliesReducer';
@@ -56,9 +56,7 @@ class CommentsP extends React.Component<Props> {
     } = this.props;
 
     return (
-      <div className="comments">
-        <h2>Comments</h2>
-
+      <div className="commentsContainer">
         <NewComment
           body={replies.find(reply => reply.commentId === -1) && replies.find(reply => reply.commentId === -1).body}
           parentId={null}
@@ -73,6 +71,10 @@ class CommentsP extends React.Component<Props> {
         { areLoading ? <Spinner /> : null }
         { error ? <DangerText>{error}</DangerText> : null }
 
+        <span className="commentsTitle">
+          activity &bull; {comments.length} comments
+        </span>
+
         <CommentList
           comments={comments}
           replies={replies}

app/javascript/components/Comments/NewComment.tsx

@@ -20,9 +20,14 @@ const NewComment = ({
     <textarea
       value={body}
       onChange={handleChange}
+      placeholder="Leave a comment"
       className="newCommentBody"
     />
-    <Button onClick={() => handleSubmit(body, parentId)}>Submit</Button>
+    <Button
+      onClick={() => handleSubmit(body, parentId)}
+      className="submitCommentButton">
+      Submit
+    </Button>
   </div>
 );