Improve style pt. 4 (post and comments)

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,