Fix comment triangles and tweak inline comment margins (#13554)

- Fix various miscolored comment bubble triangles
- Tweak padding on inline comment boxes

3 files changed, 18 insertions, 46 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 16b4f767ab..ab5ef21ee4 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -523,12 +523,12 @@
         position: relative;
         padding: 15px;
         margin-bottom: 10px;
-        border: 1px solid #dddddd;
+        border: 1px solid var(--color-secondary);
         border-radius: 3px;
         #avatar-arrow;
 
         &::after {
-          border-right-color: #ffffff;
+          border-right-color: var(--color-box-header);
         }
 
         .quick-pull-choice {
@@ -598,7 +598,7 @@
         #avatar-arrow;
 
         &::after {
-          border-right-color: #ffffff;
+          border-right-color: var(--color-box-body);
         }
 
         .markdown {
@@ -1024,6 +1024,10 @@
 
             &.no-header {
               #avatar-arrow;
+
+              &::after {
+                border-right-color: var(--color-box-body);
+              }
             }
 
             @media only screen and (max-width: 767px) {
@@ -1221,7 +1225,7 @@
         #avatar-arrow;
 
         &::after {
-          border-right-color: #ffffff;
+          border-right-color: var(--color-box-body);
         }
       }
 
@@ -1361,7 +1365,7 @@
         #avatar-arrow;
 
         &::after {
-          border-right-color: #ffffff;
+          border-right-color: var(--color-box-body);
         }
       }
     }
@@ -2915,7 +2919,6 @@
 }
 
 #avatar-arrow {
-
   &::before,
   &::after {
     right: 100%;
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 65e36432a3..23b8a3178f 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -42,11 +42,15 @@
 }
 
 .comment-code-cloud {
-  padding: 4px;
+  padding: .5rem;
   padding-left: 0;
   position: relative;
   margin: 0 auto;
 
+  .comments .comment {
+    margin: 0;
+  }
+
   .attached {
     &.tab {
       border: 0;
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 781a15ee8e..a4412145a9 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1036,28 +1036,10 @@ a.ui.basic.green.label:hover {
   color: #dbdbdb !important;
 }
 
-.repository.view.issue .comment-list .comment .content {
-  .header {
-    color: #dbdbdb;
-    background-color: var(--color-secondary);
-    border-color: var(--color-secondary);
-  }
-
-  .header::after {
-    border-right-color: var(--color-secondary);
-  }
-
-  .merge-section.no-header::after {
-    border-right-color: var(--color-secondary);
-  }
-
-  .header::before {
-    border-right-color: var(--color-secondary);
-  }
-
-  .merge-section.no-header::before {
-    border-right-color: #505667;
-  }
+.repository.view.issue .comment-list .comment .content .header {
+  color: #dbdbdb;
+  background-color: var(--color-secondary);
+  border-color: var(--color-secondary);
 }
 
 .repository.view.issue .comment-list .timeline-item .badge {
@@ -1072,23 +1054,6 @@ a.ui.basic.green.label:hover {
   color: #dedede;
 }
 
-.repository.file.editor .commit-form-wrapper .commit-form {
-  border-color: #505667;
-}
-
-.repository.file.editor .commit-form-wrapper .commit-form::before,
-.repository.file.editor .commit-form-wrapper .commit-form::after {
-  border-right-color: #505667;
-}
-
-.repository .comment.form .content .form::after {
-  border-right-color: #353945;
-}
-
-.repository .comment.form .content .form::before {
-  border-right-color: var(--color-secondary);
-}
-
 .repository .comment.form .ui.tabular.menu .item.active {
   background: #353945;
 }