264 - Updating comment area css

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 * {

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

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

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