3 files changed, 98 insertions, 35 deletions

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 2db5b08b8b..a0e410c133 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -125,6 +125,39 @@ function initBranchSelector() {
   });
 }
 
+function initLabelEdit() {
+// Create label
+  const $newLabelPanel = $('.new-label.segment');
+  $('.new-label.button').click(() => {
+    $newLabelPanel.show();
+  });
+  $('.new-label.segment .cancel').click(() => {
+    $newLabelPanel.hide();
+  });
+
+  $('.color-picker').each(function () {
+    $(this).minicolors();
+  });
+  $('.precolors .color').click(function () {
+    const color_hex = $(this).data('color-hex');
+    $('.color-picker').val(color_hex);
+    $('.minicolors-swatch-color').css('background-color', color_hex);
+  });
+  $('.edit-label-button').click(function () {
+    $('#label-modal-id').val($(this).data('id'));
+    $('.edit-label .new-label-input').val($(this).data('title'));
+    $('.edit-label .new-label-desc-input').val($(this).data('description'));
+    $('.edit-label .color-picker').val($(this).data('color'));
+    $('.minicolors-swatch-color').css('background-color', $(this).data('color'));
+    $('.edit-label.modal').modal({
+      onApprove() {
+        $('.edit-label.form').submit();
+      }
+    }).modal('show');
+    return false;
+  });
+}
+
 function updateIssuesMeta(url, action, issueIds, elementId) {
   return new Promise(((resolve) => {
     $.ajax({
@@ -697,36 +730,7 @@ async function initRepository() {
 
   // Labels
   if ($('.repository.labels').length > 0) {
-    // Create label
-    const $newLabelPanel = $('.new-label.segment');
-    $('.new-label.button').click(() => {
-      $newLabelPanel.show();
-    });
-    $('.new-label.segment .cancel').click(() => {
-      $newLabelPanel.hide();
-    });
-
-    $('.color-picker').each(function () {
-      $(this).minicolors();
-    });
-    $('.precolors .color').click(function () {
-      const color_hex = $(this).data('color-hex');
-      $('.color-picker').val(color_hex);
-      $('.minicolors-swatch-color').css('background-color', color_hex);
-    });
-    $('.edit-label-button').click(function () {
-      $('#label-modal-id').val($(this).data('id'));
-      $('.edit-label .new-label-input').val($(this).data('title'));
-      $('.edit-label .new-label-desc-input').val($(this).data('description'));
-      $('.edit-label .color-picker').val($(this).data('color'));
-      $('.minicolors-swatch-color').css('background-color', $(this).data('color'));
-      $('.edit-label.modal').modal({
-        onApprove() {
-          $('.edit-label.form').submit();
-        }
-      }).modal('show');
-      return false;
-    });
+    initLabelEdit();
   }
 
   // Milestones
@@ -1757,6 +1761,11 @@ function initOrganization() {
       }
     });
   }
+
+  // Labels
+  if ($('.organization.settings.labels').length > 0) {
+    initLabelEdit();
+  }
 }
 
 function initUserSettings() {
diff --git a/web_src/less/_organization.less b/web_src/less/_organization.less
index 6071604cbc..5a72017c2f 100644
--- a/web_src/less/_organization.less
+++ b/web_src/less/_organization.less
@@ -168,4 +168,45 @@
             height: 60px;
         }
     }
+
+    &.settings {
+        .labelspage {
+            list-style: none;
+            padding-top: 0;
+
+            .item {
+                margin-top: 0;
+                margin-right: -14px;
+                margin-left: -14px !important;
+                padding: 10px;
+                border-bottom: 1px solid #e1e4e8;
+                border-top: none;
+
+                a {
+                    font-size: 15px;
+                    padding-top: 5px;
+                    padding-right: 10px;
+                    color: #666666;
+
+                    &:hover {
+                        color: #000000;
+                    }
+
+                    &.open-issues {
+                        margin-right: 30px;
+                    }
+                }
+
+                .ui.label {
+                    font-size: 1em;
+                }
+            }
+
+            .item:last-child {
+                border-bottom: none;
+                padding-bottom: 0;
+            }
+
+        }
+    }
 }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index bc7344ba0b..3b2467b500 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1045,14 +1045,17 @@
         }
     }
 
-    .label.list {
+    .labelspage {
         list-style: none;
-        padding-top: 15px;
+        padding-top: 0;
 
         .item {
-            padding-top: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px dashed #aaaaaa;
+            margin-top: 0;
+            margin-right: -14px;
+            margin-left: -14px;
+            padding: 10px;
+            border-bottom: 1px solid #e1e4e8;
+            border-top: none;
 
             a {
                 font-size: 15px;
@@ -1073,6 +1076,16 @@
                 font-size: 1em;
             }
         }
+
+        .item:last-child {
+            border-bottom: none;
+            padding-bottom: 0;
+        }
+
+        .orglabel {
+            opacity: .7;
+        }
+
     }
 
     .milestone.list {