Improve style pt. 4 (post and comments)

app/javascript/components/Board/NewPost.tsx

@@ -141,7 +141,7 @@ class NewPost extends React.Component<Props, State> {
     } = this.state;
 
     return (
-      <div className="newBoardContainer sidebarBox">
+      <div className="newBoardContainer sidebarCard">
         <span className="boardTitle">{board.name}</span>
         <p><MutedText>{board.description}</MutedText></p>
         {

app/javascript/components/Board/PostStatusFilter.tsx

@@ -23,7 +23,7 @@ const PostStatusFilter = ({
   handleFilterClick,
   currentFilter,
 }: Props) => (
-  <div className="postStatusFilterContainer sidebarBox">
+  <div className="postStatusFilterContainer sidebarCard">
     <TitleText>Filter by post status:</TitleText>
     {
       postStatuses.map((postStatus, i) => (

app/javascript/components/Board/SearchFilter.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const SearchFilter = ({ searchQuery, handleChange }: Props) => (
-  <div className="sidebarBox">
+  <div className="sidebarCard">
     <TitleText>Search:</TitleText>
     <input
       type="search"

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>
 );
 

app/javascript/components/Post/PostP.tsx

@@ -6,6 +6,9 @@ import IPostStatus from '../../interfaces/IPostStatus';
 import PostStatusSelect from './PostStatusSelect';
 import PostStatusLabel from '../shared/PostStatusLabel';
 import Comments from '../../containers/Comments';
+import { MutedText } from '../shared/CustomTexts';
+
+import friendlyDate from '../../helpers/friendlyDate';
 
 interface Props {
   postId: number;
@@ -40,29 +43,39 @@ class PostP extends React.Component<Props> {
     } = this.props;
 
     return (
-      <div>
-        <h2>{post.title}</h2>
-        {
-          isPowerUser && post ?
-            <PostStatusSelect
-              postStatuses={postStatuses}
-              selectedPostStatusId={post.postStatusId}
-              handleChange={
-                newPostStatusId => changePostStatus(post.id, newPostStatusId, authenticityToken)
-              }
-            />
-          :
-            <PostStatusLabel
-              {...postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
-            />
-        }
+      <div className="pageContainer">
+        <div className="sidebar">
+          <div className="sidebarCard"></div>
+          <div className="sidebarCard"></div>
+          <div className="sidebarCard"></div>
+        </div>
 
-        <p>{post.description}</p>
+        <div className="postAndCommentsContainer">
+          <div className="postContainer">
+            <h2>{post.title}</h2>
+            {
+              isPowerUser && post ?
+                <PostStatusSelect
+                  postStatuses={postStatuses}
+                  selectedPostStatusId={post.postStatusId}
+                  handleChange={
+                    newPostStatusId => changePostStatus(post.id, newPostStatusId, authenticityToken)
+                  }
+                />
+              :
+                <PostStatusLabel
+                  {...postStatuses.find(postStatus => postStatus.id === post.postStatusId)}
+                />
+            }
+            <p className="postDescription">{post.description}</p>
+            <MutedText>{friendlyDate(post.createdAt)}</MutedText>
+          </div>
 
-        <Comments
-          postId={this.props.postId}
-          authenticityToken={authenticityToken}
-        />
+          <Comments
+            postId={this.props.postId}
+            authenticityToken={authenticityToken}
+          />
+        </div>
       </div>
     );
   }

app/javascript/components/Post/index.tsx

@@ -7,8 +7,6 @@ import Post from '../../containers/Post';
 
 import IPostStatus from '../../interfaces/IPostStatus';
 
-import '../../stylesheets/components/Post.scss';
-
 interface Props {
   postId: number;
   postStatuses: Array<IPostStatus>;