Misc UI fixes, add secondary color (#13378)

* Misc UI fixes, add secondary color

- Add secondary color, primarily used in arc-green currently
- Convert icons on release page to SVG
- Improve resolved conversation placeholder
- Diff fixes on arc-green
- Misc color tweaks

* fix comment header, adjust arc-green dropzone

* label margin, sidebar margin

* flexbox commits table and add primary button styles

* tooltip styles

* file header fixes

Co-authored-by: Lauris BH <lauris@nix.lv>
Co-authored-by: zeripath <art27@cantab.net>

1 files changed, 54 insertions, 35 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 0c4196cd85..9e8df7b37f 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -407,9 +407,11 @@
           font-size: .5em;
         }
 
-        .file-actions {
-          margin-bottom: -5px;
+        .file-info {
+          font-size: 13px;
+        }
 
+        .file-actions {
           .btn-octicon {
             display: inline-block;
             padding: 5px;
@@ -996,33 +998,6 @@
         }
 
         .content {
-          > .header {
-            #avatar-arrow;
-            font-weight: normal;
-            padding: .5rem 1rem;
-            position: relative;
-            color: #767676;
-            background-color: #f7f7f7;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            &.arrow-top::before,
-            &.arrow-top::after {
-              transform: rotate(90deg);
-            }
-
-            &.arrow-top::before {
-              top: -9px;
-              left: 6px;
-            }
-
-            &.arrow-top::after {
-              top: -8px;
-              left: 7px;
-            }
-          }
-
           > .merge-section {
             background-color: #f7f7f7;
 
@@ -1433,7 +1408,7 @@
       .bar {
         height: 4px;
         position: absolute;
-        background-color: #d4d4d5;
+        background-color: var(--color-secondary);
 
         &.bar-behind {
           right: 0;
@@ -1603,12 +1578,17 @@
     background: #ffffff;
     line-height: 30px;
 
+    @media only screen and (max-width: 992px) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
     &.sticky {
       position: sticky;
       top: 0;
       z-index: 8;
       margin-bottom: 10px;
-      border-bottom: 1px solid #d4d4d5;
+      border-bottom: 1px solid var(--color-secondary);
       padding-left: 2px;
       padding-right: 2px;
     }
@@ -2729,7 +2709,7 @@
 
     > .header,
     .segment {
-      box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
+      box-shadow: 0 1px 2px 0 var(--color-secondary);
     }
   }
 
@@ -2793,6 +2773,34 @@
   }
 }
 
+.comment-header {
+  #avatar-arrow;
+  font-weight: normal !important;
+  padding: .5rem 1rem !important;
+  margin: 0 !important;
+  position: relative;
+  color: #767676;
+  background-color: #f7f7f7;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &.arrow-top::before,
+  &.arrow-top::after {
+    transform: rotate(90deg);
+  }
+
+  &.arrow-top::before {
+    top: -9px;
+    left: 6px;
+  }
+
+  &.arrow-top::after {
+    top: -8px;
+    left: 7px;
+  }
+}
+
 .comment-header .actions a {
   margin-right: 0 !important;
   padding: .5rem !important;
@@ -2871,7 +2879,7 @@
   }
 
   &:before {
-    border-right-color: #d3d3d4;
+    border-right-color: var(--color-secondary);
     border-width: 9px;
     margin-top: -9px;
   }
@@ -3080,7 +3088,7 @@ tbody.commit-list {
 .repo-buttons .disabled-repo-button a.button:hover {
   background: none !important;
   color: rgba(0, 0, 0, .6) !important;
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, .15) inset !important;
+  box-shadow: 0 0 0 1px var(--color-secondary) inset !important;
 }
 
 .repo-buttons .ui.labeled.button > .label {
@@ -3099,6 +3107,17 @@ tbody.commit-list {
   vertical-align: middle;
 }
 
+.resolved-placeholder {
+  font-weight: normal !important;
+  border: 1px solid var(--color-secondary) !important;
+  border-radius: var(--border-radius) !important;
+  margin: 4px !important;
+}
+
+.resolved-placeholder + .comment-code-cloud {
+  padding-top: 0 !important;
+}
+
 .board {
   display: flex;
   flex-direction: row;
@@ -3109,7 +3128,7 @@ tbody.commit-list {
 
 .board-column {
   background-color: rgba(0, 0, 0, .05) !important;
-  border: 1px solid rgba(34, 36, 38, .15) !important;
+  border: 1px solid var(--color-secondary) !important;
   margin: 0 .5rem !important;
   padding: .5rem !important;
   width: 320px;