Comment box tweaks and SVG dropdown triangles (#13376)

* Comment box tweaks and SVG dropdown triangles

- Change all dropdown triangles to SVG
- Bring inline review comment box closer to regular comment boxes
- Enhance arc-green checkbox contrast
- Minor reaction tweaks
- Flexbox the diff file header

* remove a border

* fix type marker in arc-green

* add small code padding

* fix position regression and remove useless rules

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

web_src/less/_repository.less

@@ -162,16 +162,6 @@
       padding: 0 8px;
     }
 
-    .svg {
-      float: left;
-      margin: 0 -7px 0 -5px;
-      width: 16px;
-    }
-
-    &.labels .svg {
-      margin: -2px -7px 0 -5px;
-    }
-
     &.labels {
       .label-filter .menu .info {
         display: inline-block;
@@ -191,21 +181,12 @@
       }
     }
 
-    .text {
-      margin-left: .9em;
-    }
-
     .menu {
       max-height: 300px;
       overflow-x: auto;
       right: 0 !important;
       left: auto !important;
     }
-
-    .dropdown.item {
-      margin: 1px;
-      padding-right: 0;
-    }
   }
 
   .select-label {
@@ -883,8 +864,8 @@
           justify-content: center;
 
           .svg {
-            width: 24px;
-            height: 24px;
+            width: 22px;
+            height: 22px;
             padding: 3px;
 
             &.octicon-circle-slash {
@@ -1040,22 +1021,6 @@
               top: -8px;
               left: 7px;
             }
-
-            .header-left > * + *,
-            .header-right > * + * {
-              margin-left: .25rem;
-            }
-
-            .actions {
-              a {
-                padding: .5rem;
-                color: rgba(0, 0, 0, .4);
-
-                &:hover {
-                  color: rgba(0, 0, 0, .8);
-                }
-              }
-            }
           }
 
           > .merge-section {
@@ -2047,11 +2012,6 @@
         margin-right: 5px;
       }
 
-      .dropdown.icon {
-        margin: 0;
-        padding-top: 3px;
-      }
-
       .selection.dropdown {
         padding-top: 10px;
         padding-bottom: 10px;
@@ -2458,12 +2418,16 @@
 
       &.disabled {
         cursor: default;
-        opacity: .5;
+        opacity: 1;
       }
     }
 
+    .ui.label.basic {
+      color: var(--color-primary) !important;
+    }
+
     .ui.label.basic.blue {
-      background-color: var(--color-primary-alpha-10) !important;
+      background-color: var(--color-primary-alpha-20) !important;
       border-color: inherit !important;
     }
 
@@ -2829,6 +2793,25 @@
   }
 }
 
+.comment-header .actions a {
+  margin-right: 0 !important;
+  padding: .5rem !important;
+}
+
+.comment-header a {
+  color: rgba(0, 0, 0, .4) !important;
+}
+
+.comment-header .actions a:hover,
+.comment-header .actions a.active {
+  color: rgba(0, 0, 0, .8) !important;
+}
+
+.comment-header-left > * + *,
+.comment-header-right > * + * {
+  margin-left: .25rem;
+}
+
 .edit-label.modal,
 .new-label.segment {
   .form {