FE review changes

5 files changed, 29 insertions, 22 deletions

diff --git a/app/assets/javascripts/group_label_subscription.js b/app/assets/javascripts/group_label_subscription.js
index 4683cc43017..755f94a3d1e 100644
--- a/app/assets/javascripts/group_label_subscription.js
+++ b/app/assets/javascripts/group_label_subscription.js
@@ -1,7 +1,12 @@
 import $ from 'jquery';
+import { __ } from '~/locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
-import { __ } from './locale';
+
+const tooltipTitles = {
+  group: __('Unsubscribe at group level'),
+  project: __('Unsubscribe at project level'),
+};
 
 export default class GroupLabelSubscription {
   constructor(container) {
@@ -48,11 +53,11 @@ export default class GroupLabelSubscription {
 
   static setNewTooltip($button) {
     if (!$button.hasClass('js-subscribe-button')) return;
-
+    
     const type = $button.hasClass('js-group-level') ? 'group' : 'project';
-    const title = `Unsubscribe at ${type} level`;
-    const $unsubscribeButton = $('.js-unsubscribe-button', $button.closest('.label-actions-list'));
+    const newTitle = tooltipTitles[type];
 
-    $unsubscribeButton.tooltip('hide').attr('title', title).tooltip('_fixTitle');
+    $('.js-unsubscribe-button', $button.closest('.label-actions-list'))
+      .tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
   }
 }
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
index a8a314abd6b..06023e98ec3 100644
--- a/app/assets/javascripts/label_manager.js
+++ b/app/assets/javascripts/label_manager.js
@@ -13,7 +13,7 @@ export default class LabelManager {
     this.otherLabels = otherLabels || $('.js-other-labels');
     this.errorMessage = 'Unable to update label prioritization at this time';
     this.emptyState = document.querySelector('#js-priority-labels-empty-state');
-    this.$badgeItemTemplate = $(document.getElementById('js-badge-item-template').innerHTML);
+    this.$badgeItemTemplate = $('#js-badge-item-template');
     this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
       filter: '.empty-message',
       forceFallback: true,
@@ -97,7 +97,7 @@ export default class LabelManager {
     if (action === 'remove') {
       $('.js-priority-badge', $label).remove();
     } else {
-      $('.label-links', $label).append(this.$badgeItemTemplate.clone());
+      $('.label-links', $label).append(this.$badgeItemTemplate.clone().html());
     }
   }
 
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
index a5e68d1b0a0..35a76875a7a 100644
--- a/app/assets/javascripts/project_label_subscription.js
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -3,6 +3,17 @@ import { __ } from './locale';
 import axios from './lib/utils/axios_utils';
 import flash from './flash';
 
+const tooltipTitles = {
+  group: {
+    subscribed: __('Unsubscribe at group level'),
+    unsubscribed: __('Subscribe at group level'),
+  },
+  project: {
+    subscribed: __('Unsubscribe at project level'),
+    unsubscribed: __('Subscribe at project level'),
+  },
+};
+
 export default class ProjectLabelSubscription {
   constructor(container) {
     this.$container = $(container);
@@ -48,11 +59,10 @@ export default class ProjectLabelSubscription {
     }).catch(() => flash(__('There was an error subscribing to this label.')));
   }
 
-  static setNewTitle($button, originalTitle, newStatus, newAction) {
-    const newStatusVerb = newStatus.slice(0, -1);
-    const actionRegexp = new RegExp(newStatusVerb, 'i');
-    const newTitle = originalTitle.replace(actionRegexp, newAction);
+  static setNewTitle($button, originalTitle, newStatus) {
+    const type = /group/.test(originalTitle) ? 'group' : 'project';
+    const newTitle = tooltipTitles[type][newStatus];
 
-    $button.tooltip('hide').attr('data-original-title', newTitle).tooltip('_fixTitle');
+    $button.tooltip('hide').attr('title', newTitle).tooltip('_fixTitle');
   }
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index a8d13249ecb..d65fc0d2d68 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -464,7 +464,6 @@ img.emoji {
 .prepend-left-5 { margin-left: 5px; }
 .prepend-left-8 { margin-left: 8px; }
 .prepend-left-10 { margin-left: 10px; }
-.prepend-left-15 { margin-left: 15px; }
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .append-right-5 { margin-right: 5px; }
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index bbde68cd08f..a80061c511d 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -77,7 +77,7 @@
     margin-bottom: 5px;
     display: flex;
     justify-content: space-between;
-    padding: 11px 10px 11px $gl-padding;
+    padding: 8px 8px 8px $gl-padding;
     border-radius: $border-radius-default;
 
     &.sortable-ghost {
@@ -270,7 +270,6 @@
   .content-list &::before,
   .content-list &::after {
     content: none;
-    display: block;
   }
 
   .label-name {
@@ -284,12 +283,6 @@
     }
   }
 
-  .label-type {
-    display: block;
-    margin-bottom: 10px;
-    margin-left: 50px;
-  }
-
   .label-description {
     flex-grow: 1;
 
@@ -302,7 +295,7 @@
     padding: 4px $grid-size;
     font-size: $label-font-size;
     position: relative;
-    top: ($grid-size / 2);
+    top: $gl-padding-4;
   }
 
   .label-action {