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

app/javascript/helpers/friendlyDate.js

@@ -0,0 +1,33 @@
+const friendlyDate = date => {
+  var now = new Date();
+  var timeStamp = fromRailsStringToJavascriptDate(date);
+
+  var secondsPast = (now.getTime() - timeStamp.getTime()) / 1000;
+  
+  if (secondsPast < 60) {
+    secondsPast = parseInt(secondsPast);
+    return secondsPast + ' ' + (secondsPast === 1 ? 'second' : 'seconds') + ' ago';
+  } else if (secondsPast < 3600) {
+    let minutesPast = parseInt(secondsPast / 60);
+    return minutesPast + ' ' + (minutesPast === 1 ? 'minute' : 'minutes') + ' ago';
+  } else if (secondsPast <= 86400) {
+    let hoursPast = parseInt(secondsPast / 3600);
+    return hoursPast + ' ' + (hoursPast === 1 ? 'hour' : 'hours') + ' ago';
+  } else {
+    let daysPast = parseInt(secondsPast / 86400);
+    return daysPast + ' ' + (daysPast === 1 ? 'day' : 'days') + ' ago';
+  }
+}
+
+export default friendlyDate;
+
+/*
+  Converts the default Rails datetime string
+  format to a JavaScript Date object.
+*/
+const fromRailsStringToJavascriptDate = date => {
+  let dateOnly = date.slice(0, 10);
+  let timeOnly = date.slice(11, 19);
+  
+  return new Date(`${dateOnly}T${timeOnly}Z`);
+}

app/javascript/stylesheets/components/Board.scss

@@ -6,27 +6,9 @@
 
   flex-direction: row;
 
-  .sidebar {
-    position: sticky;
-    top: 60px;
-
-    .sidebarBox {
-      width: 250px;
-      margin-right: 16px;
-    }
-  }
-
   @include media-breakpoint-down(sm) {
     flex-direction: column;
 
-    .sidebar {
-      position: relative;
-      width: 100%;
-      top: 0;
-
-      .sidebarBox { width: 100%; }
-    }
-
     .postStatusFilterContainer {
       flex-direction: row !important;
       flex-wrap: wrap;
@@ -45,19 +27,6 @@
     }
   }
 
-  .sidebarBox {
-    @extend
-      .card,
-      .d-flex,
-      .flex-column,
-      .justify-content-start,
-      .align-items-center,
-      .flex-grow-0,
-      .flex-shrink-0,
-      .my-3,
-      .p-2;
-  }
-
   .postStatusListItemContainer {
     @extend
       .d-flex,

app/javascript/stylesheets/components/Comments.scss

@@ -1,21 +1,67 @@
-.comments {
+.commentsContainer {
+  .newCommentForm {
+    @extend
+      .d-flex,
+      .my-3;
+
+    .newCommentBody {
+      @extend
+        .form-control,
+        .w-100,
+        .p-2,
+        .mr-2;
+
+      height: 80px;
+      
+      border: thin solid grey;
+      border-radius: 4px;
+
+      resize: none;
+    }
+
+    .submitCommentButton {
+      @extend
+        .align-self-end;
+
+      height: 40px;
+    }
+  }
+
+  .commentsTitle {
+    @extend
+      .text-secondary,
+      .text-uppercase,
+      .font-weight-lighter,
+      .my-2;
+  }
+
   .commentList > .commentList {
     padding-left: 32px;
   }
 
   .comment {
-    margin-bottom: 32px;
+    @extend
+      .my-3;
 
     .commentHeader {
-      @extend
-        .font-weight-bolder;
-
-      font-size: 17px;
+      @extend .titleText;
     }
 
     .commentBody {
-      @extend
-        .my-2;
+      @extend .my-1;
+    }
+
+    .commentFooter {
+      font-size: 14px;
+
+      .commentReplyButton {
+        color: #333;
+
+        &:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
     }
   }
 }

app/javascript/stylesheets/components/Post.scss

@@ -0,0 +1,28 @@
+.pageContainer {
+  @extend
+    .d-flex,
+    .justify-content-between,
+    .align-items-start;
+
+    flex-direction: row;
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+  
+      .postAndCommentsContainer { width: 100%; }
+    }
+
+  .postAndCommentsContainer {
+    @extend
+      .card,
+      .flex-grow-1,
+      .p-3;
+
+    .postDescription {
+      @extend
+        .my-3;
+
+      color: #333;
+    }
+  }
+}

app/javascript/stylesheets/general/_components.scss

@@ -21,6 +21,37 @@
   }
 }
 
+.sidebar {
+  position: sticky;
+  top: 60px;
+
+  .sidebarCard {
+    @extend
+      .card,
+      .d-flex,
+      .flex-column,
+      .justify-content-start,
+      .align-items-center,
+      .flex-grow-0,
+      .flex-shrink-0,
+      .my-3,
+      .p-2;
+
+    width: 250px;
+    margin-right: 16px;
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  .sidebar {
+    position: relative;
+    width: 100%;
+    top: 0;
+
+    .sidebarCard { width: 100%; }
+  }
+}
+
 .badge {
   @extend
     .badge,