From cba0321f9640f3dd8ff0e2e1d8a3f489a4daf0ca Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Thu, 26 May 2016 18:54:07 +0100
Subject: [PATCH] Updated design

---
 app/assets/javascripts/issuable.js.coffee | 10 ++++------
 app/assets/stylesheets/pages/labels.scss  | 17 +++++++++++++++++
 app/views/shared/_labels_row.html.haml    | 11 ++++++++---
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/issuable.js.coffee b/app/assets/javascripts/issuable.js.coffee
index 9801e61dabb..ef0d35d0dd3 100644
--- a/app/assets/javascripts/issuable.js.coffee
+++ b/app/assets/javascripts/issuable.js.coffee
@@ -11,13 +11,11 @@ issuable_created = false
   initTemplates: ->
     Issuable.labelRow = _.template(
       '<% _.each(labels, function(label){ %>
-        <span class="label-row">
-          <a href="#">
-            <span class="label color-label has-tooltip" style="background-color: <%= label.color %>; color: <%= label.text_color %>" title="<%= _.escape(label.description) %>" data-container="body">
-              <%= _.escape(label.title) %>
-            </span>
+        <span class="label-row btn-group" role="group" aria-label="<%= _.escape(label.title) %>" style="color: <%= label.text_color %>;">
+          <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%= label.color %>;" title="<%= _.escape(label.description) %>" data-container="body">
+            <%= _.escape(label.title) %>
           </a>
-          <button type="button" class="btn btn-sm btn-transparent append-right-5 js-label-filter-remove" data-label="<%= _.escape(label.title) %>">
+          <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%= label.color %>;" data-label="<%= _.escape(label.title) %>">
             <i class="fa fa-times"></i>
           </button>
         </span>
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 2cd9d74b2de..d010b752dda 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -169,3 +169,20 @@
     }
   }
 }
+
+.filtered-labels {
+  .label-row {
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+  }
+
+  .label-remove {
+    border-left: 1px solid;
+    z-index: 3;
+  }
+
+  .btn {
+    color: inherit;
+  }
+}
diff --git a/app/views/shared/_labels_row.html.haml b/app/views/shared/_labels_row.html.haml
index 2bea183334e..87028ececd4 100644
--- a/app/views/shared/_labels_row.html.haml
+++ b/app/views/shared/_labels_row.html.haml
@@ -1,5 +1,10 @@
 - labels.each do |label|
-  %span.label-row
-    = link_to_label(label, tooltip: true)
-    %button.btn.btn-sm.btn-transparent.append-right-5.js-label-filter-remove{ type: "button", data: { label: label.title } }
+  %span.label-row.btn-group{ role: "group", aria: { label: escape_once(label.name) }, style: "color: #{text_color_for_bg(label.color)}" }
+    = link_to namespace_project_label_path(@project.namespace, @project, label),
+      class: "btn btn-transparent has-tooltip",
+      style: "background-color: #{label.color};",
+      title: escape_once(label.description),
+      data: { container: "body" } do
+      = escape_once label.name
+    %button.btn.btn-transparent.label-remove.js-label-filter-remove{ type: "button", style: "background-color: #{label.color};", data: { label: label.title } }
       = icon("times")