From 6eff770abf6b019b5bc5ef068cb52d91d119991a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 15 Apr 2021 23:56:59 +0500
Subject: [PATCH] 264 - Updating comment area css

---
 webapp/src/components/cardDetail/comment.scss      | 11 +++++++++--
 webapp/src/components/cardDetail/commentsList.scss | 13 +++++++++++--
 webapp/src/components/markdownEditor.scss          |  6 ++++--
 webapp/src/widgets/buttons/button.scss             |  2 +-
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/cardDetail/comment.scss b/webapp/src/components/cardDetail/comment.scss
index 5482f781c..7271618dd 100644
--- a/webapp/src/components/cardDetail/comment.scss
+++ b/webapp/src/components/cardDetail/comment.scss
@@ -16,6 +16,7 @@
     }
 
     .comment-header {
+        align-items: center;
         display: flex;
         flex-direction: row;
 
@@ -31,7 +32,7 @@
 
     .comment-username {
         font-weight: bold;
-        margin: 0 5px;
+        margin: 0 6px 0 8px;
     }
 
     .comment-date {
@@ -42,7 +43,13 @@
     .comment-text {
         color: rgb(var(--body-color));
         width: 100%;
-        padding-left: 25px;
+        padding-left: 28px;
+
+        p {
+            &:first-child {
+                margin-top: 0;
+            }
+        }
     }
 
     .comment-text * {
diff --git a/webapp/src/components/cardDetail/commentsList.scss b/webapp/src/components/cardDetail/commentsList.scss
index f1a4cc286..a3cd638ee 100644
--- a/webapp/src/components/cardDetail/commentsList.scss
+++ b/webapp/src/components/cardDetail/commentsList.scss
@@ -1,4 +1,5 @@
 .CommentsList {
+    padding: 8px 0;
 	display: flex;
 	flex-direction: column;
 
@@ -14,13 +15,21 @@
     .commentrow {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-start;
+
+        .comment-avatar {
+            margin-top: 6px;
+        }
     }
 
     .newcomment {
         color: rgba(var(--body-color), 0.8);
         flex-grow: 1;
-        margin-left: 5px;
+        margin: 4px 0 0 8px;
+
+        & + button {
+            margin-left: 8px;
+        }
     }
 }
 
diff --git a/webapp/src/components/markdownEditor.scss b/webapp/src/components/markdownEditor.scss
index 681a54dc4..ef5fc9413 100644
--- a/webapp/src/components/markdownEditor.scss
+++ b/webapp/src/components/markdownEditor.scss
@@ -39,7 +39,10 @@
     }
 
     .octo-editor-preview {
-        min-height: 30px;
+        p {
+            margin: 0;
+            min-height: 32px;
+        }
     }
 
     /* .dialog .octo-editor-preview {
@@ -48,7 +51,6 @@
 
     .octo-editor-activeEditor {
         overflow: hidden;
-        border: solid 1px #aaccff;
         border-radius: 5px;
     }
 }
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index 6fd0fea6a..05363aeb4 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -20,7 +20,7 @@
     &.filled {
         color: #ffffff;
         background-color: rgb(var(--button-bg));
-        padding: 2px 10px;
+        padding: 6px 12px;
 
         &:hover {
             background-color:  rgb(var(--button-bg), 0.8);