1 files changed, 33 insertions, 7 deletions

diff --git a/src/components/forum-element.js b/src/components/forum-element.js
index 3177892..c45c664 100644
--- a/src/components/forum-element.js
+++ b/src/components/forum-element.js
@@ -58,17 +58,33 @@ class ForumElement extends connect(store)(LitElement) {
           margin-top:   5px;
       }
 
-      .comment-title {
-        text-align: center;
+      .comment-author {
+        text-align:   right;
+        font-weight:  lighter;
+        font-style:   italic;
+        word-break:   break-all;
       }
 
-      .comment-author {
-        text-align:   center;
+      .comment-date {
+        text-align:   left;
         font-weight:  lighter;
         font-style:   italic;
         word-break:   break-all;
       }
 
+      .comment {
+        border: 1px solid black;
+        border-radius: 25px;
+        background: #e1e1e1;
+        padding: 20px; 
+        margin-bottom: 10px;
+      }
+
+      .title-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+
       .forum-date {
         text-align: left;
       }
@@ -114,7 +130,6 @@ class ForumElement extends connect(store)(LitElement) {
 
             <div hidden="${!props.showComments}">
                 <hr hidden="${!props.showComments && !props.postComment}">
-                <h4 class="comment-title">Comments</h4>
                 <div id="comment-area"></div> 
             </div>
         </div>
@@ -179,15 +194,26 @@ class ForumElement extends connect(store)(LitElement) {
 
       for(var i = this.comments.length-1; i >= 0; i--) {
         var commentElement = document.createElement('div');
+        commentElement.classList.add('comment');
+
+        var titleGrid = document.createElement('div');
+        titleGrid.classList.add('title-grid');
 
-        var authorElement = document.createElement('h4');
+        var dateElement = document.createElement('span');
+        dateElement.classList.add('comment-date');
+        dateElement.innerHTML = this.comments[i].date.toDate().toLocaleDateString("en-US");
+        
+        var authorElement = document.createElement('span');
         authorElement.classList.add('comment-author');
         authorElement.innerHTML = this.comments[i].user;
 
+        titleGrid.appendChild(dateElement);
+        titleGrid.appendChild(authorElement);
+
         var contentElement = document.createElement('p');
         contentElement.innerHTML = this.comments[i].content;
 
-        commentElement.appendChild(authorElement);
+        commentElement.appendChild(titleGrid);
         commentElement.appendChild(contentElement);
 
         commentArea.appendChild(commentElement);