Replace code fold icons with octicons (#12222)

- replace font-awesome icons with octicons
- clean up js and css surrounding the code expansion and file folding
- fix hover color on arc-green
- tweak diff line number colors

Co-authored-by: zeripath <art27@cantab.net>

3 files changed, 50 insertions, 33 deletions

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index ce35049ebc..7bb7d81bab 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1694,6 +1694,11 @@
                 padding: 0 5px !important;
             }
 
+            .tag-code .lines-num,
+            .tag-code td {
+                padding: 0 !important;
+            }
+
             tbody {
                 tr {
                     td.halfwidth {
@@ -1727,17 +1732,21 @@
 
         .code-diff-unified tbody tr {
             &.del-code td {
-                background-color: #ffeef0 !important;
-                border-color: #f1c0c0 !important;
+                background-color: #ffeef0;
+                border-color: #f1c0c0;
             }
 
             &.add-code td {
                 background-color: #e6ffed;
+                border-color: #bef5cb;
+            }
+
+            &.del-code td.lines-num {
+                background-color: #ffe5e4;
             }
 
             &.add-code td.lines-num {
                 background-color: #cdffd8;
-                border-color: #bef5cb;
             }
 
         }
@@ -3001,19 +3010,15 @@ tbody.commit-list {
     margin: 0 !important;
 }
 
+.tag-code {
+    height: 28px;
+}
+
 .tag-code,
 .tag-code td {
-    background-color: #e6f1f6;
+    background-color: #f0f9ff;
     border-color: #f1f8ff !important;
-    padding-top: 8px;
-    padding-bottom: 8px;
     vertical-align: middle;
-    color: rgba(27, 31, 35, .7);
-}
-
-.tag-code td.lines-num {
-    background-color: #f6e6eb !important;
-    border-color: #dbedff;
 }
 
 .issue-keyword {
diff --git a/web_src/less/_review.less b/web_src/less/_review.less
index 2e9bbf19b6..1c84d61f45 100644
--- a/web_src/less/_review.less
+++ b/web_src/less/_review.less
@@ -133,27 +133,24 @@
     color: rgba(0, 0, 0, .87);
 }
 
-.ui.fold-code {
-    margin-right: 1em;
-    padding-left: 5px;
-    cursor: pointer;
-    width: 22px;
-    font-size: 12px;
+a.fold-file {
+    margin-right: 10px;
+    color: inherit;
 }
 
-.ui.fold-code:hover {
-    color: #428bca;
+a.blob-excerpt {
+    color: #575a68;
+    height: 28px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background: #daecfe;
 }
 
-.ui.blob-excerpt {
-    display: block;
-    line-height: 20px;
-    font-size: 16px;
-    cursor: pointer;
-}
-
-.ui.blob-excerpt:hover {
-    color: #428bca;
+a.blob-excerpt:hover {
+    background: #428bca;
+    color: #fff;
 }
 
 .btn-review > .dropdown.icon {
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index cd40974567..ee294d3fac 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1056,11 +1056,19 @@ a.ui.basic.green.label:hover {
     border-color: #634343 !important;
 }
 
+.repository .diff-file-box .code-diff-unified tbody tr.del-code td.lines-num {
+    background-color: #4e2c2c !important;
+}
+
 .repository .diff-file-box .code-diff-unified tbody tr.add-code td {
     background-color: #283e2d !important;
     border-color: #314a37 !important;
 }
 
+.repository .diff-file-box .code-diff-unified tbody tr.add-code td.lines-num {
+    background-color: #2c4632 !important;
+}
+
 .removed-code {
     background-color: #5f3737;
 }
@@ -1071,12 +1079,11 @@ a.ui.basic.green.label:hover {
 
 .tag-code,
 .tag-code td {
-    background: #242637 !important;
+    background: #353945 !important;
 
 }
 .tag-code td.lines-num {
-    background-color: #242637 !important;
-    border-color: transparent !important;
+    background-color: #3a3e4c !important;
 }
 
 .tag-code td.lines-type-marker,
@@ -1424,7 +1431,6 @@ input {
 }
 
 .lines-num {
-    background: #2e323e !important;
     color: #9e9e9e !important;
     border-color: #2d2d2d !important;
 }
@@ -1433,6 +1439,15 @@ td.blob-excerpt {
     background-color: rgba(0, 0, 0, .15);
 }
 
+a.blob-excerpt {
+    color: #ccc;
+    background: #393d4a;
+}
+
+a.blob-excerpt:hover {
+    background: #87ab63;
+}
+
 .code-view .lines-code.active {
     background: #534d1b !important;
 }