finish up the design and add info to the changelog

4 files changed, 15 insertions, 8 deletions

diff --git a/CHANGELOG b/CHANGELOG
index a23c8a54af1..ecca821cd96 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -31,6 +31,7 @@ v 8.6.5 (unreleased)
 
 v 8.6.4
   - Don't attempt to fetch any tags from a forked repo (Stan Hu)
+  - Redesign the Labels page
 
 v 8.6.3
   - Mentions on confidential issues doesn't create todos for non-members. !3374
diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index 084f0e0dc65..6ebd0750ffd 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/app/assets/javascripts/subscription.js.coffee
@@ -3,8 +3,10 @@ class @Subscription
     $container = $(container)
     @url = $container.attr('data-url')
     @subscribe_button = $container.find('.subscribe-button')
+    @subscribe_icon = $container.find('.subscribe-icon')
     @subscription_status = $container.find('.subscription-status')
     @subscribe_button.unbind('click').click(@toggleSubscription)
+    @subscribe_icon.unbind('click').click(@toggleSubscription)
 
   toggleSubscription: (event) =>
     btn = $(event.currentTarget)
@@ -16,6 +18,7 @@ class @Subscription
       btn.prop('disabled', false)
       status = if current_status == 'subscribed' then 'unsubscribed' else 'subscribed'
       @subscription_status.attr('data-status', status)
+      @subscribe_icon.attr('data-original-title', status)
       action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
       btn.find('span').text(action)
       @subscription_status.find('>div').toggleClass('hidden')
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index e77d43fa29c..0e4468ad2c7 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -49,9 +49,11 @@
 }
 
 .label-row {
+
   .label-name {
     display: inline-block;
-    width: 21%;
+    width: 200px;
+    vertical-align: top;
 
     @media (max-width: $screen-xs-min) {
       display: block;
@@ -93,15 +95,16 @@
     }
   }
 
-  .pull-right {
+  .pull-info-right {
+    float: right;
 
     @media (max-width: $screen-xs-min) {
-     float: none !important;
+      float: none;
     }
 
     .action-buttons {
       border-color: transparent;
-      margin: 7px;
+      padding: 6px
     }
 
     i {
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 5e2dd8ac61e..4c144c317fd 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -1,7 +1,7 @@
 %li{id: dom_id(label)}
   = render "shared/label_row", label: label
 
-  .pull-right
+  .pull-info-right
     %span.append-right-20
       = link_to_label(label, type: :merge_request) do
         = pluralize label.open_merge_requests_count, 'merge request'
@@ -14,13 +14,13 @@
       .label-subscription{data: {url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label)}}
         .subscription-status{data: {status: label_subscription_status(label)}}
 
-        %a.subscribe-button.action-buttons{data: {toggle: "tooltip", original_title: label_subscription_toggle_button_text(label)}}
+        %a.subscribe-icon.btn.action-buttons{data: {toggle: "tooltip", original_title: label_subscription_status(label)}}
           %i.fa.fa-rss
 
     - if can? current_user, :admin_label, @project
-      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), class: 'action-buttons', data: {toggle: "tooltip", original_title: "Edit"} do
+      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), class: 'btn action-buttons', data: {toggle: "tooltip", original_title: "Edit"} do
         %i.fa.fa-pencil-square-o
-      = link_to namespace_project_label_path(@project.namespace, @project, label), class: 'action-buttons remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip", original_title: "Delete"} do
+      = link_to namespace_project_label_path(@project.namespace, @project, label), class: 'btn action-buttons remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip", original_title: "Delete"} do
         %i.fa.fa-trash-o
 
 - if current_user