Unbox Label pages for Group & Projects

Changelog: changed

app/assets/stylesheets/pages/labels.scss

@@ -74,21 +74,11 @@
 
   > li:not(.empty-message):not(.no-border) {
     background-color: $white;
-    margin-bottom: 5px;
     display: flex;
     justify-content: space-between;
-    padding: $gl-padding;
-    border-radius: $border-radius-default;
-    border: 1px solid $gray-50;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
 
     .prioritized-labels:not(.is-not-draggable) & {
-      box-shadow: 0 1px 2px $issue-boards-card-shadow;
       cursor: grab;
-      border: 0;
 
       &:active {
         cursor: grabbing;
@@ -111,11 +101,6 @@
   width: 109px;
 }
 
-.labels-container {
-  border-radius: $border-radius-default;
-  padding: $gl-padding $gl-padding-8;
-}
-
 .label-actions-list {
   list-style: none;
   flex-shrink: 0;

app/views/groups/labels/index.html.haml

@@ -8,13 +8,13 @@
   #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.gl-mt-2.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
+  .labels-container.gl-mt-5
     - if @labels.any?
-      .text-muted
+      .text-muted.gl-mb-5
         = _('Labels can be applied to %{features}. Group labels are available for any project within the group.') % { features: issuable_types.to_sentence }
       .other-labels
-        %h5= _('Labels')
-        %ul.content-list.manage-labels-list.js-other-labels
+        %h4= _('Labels')
+        %ul.manage-labels-list.js-other-labels
           = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
           = paginate @labels, theme: 'gitlab'
     - elsif search.present?

app/views/projects/labels/index.html.haml

@@ -9,7 +9,7 @@
   #js-promote-label-modal
   = render 'shared/labels/nav', labels_or_filters: labels_or_filters, can_admin_label: can_admin_label
 
-  .labels-container.gl-mt-3.gl-bg-gray-10.gl-border-solid.gl-border-1.gl-border-gray-100
+  .labels-container.gl-mt-5
     - if can_admin_label && search.blank?
       %p.text-muted
         = _('Labels can be applied to issues and merge requests.')
@@ -19,8 +19,8 @@
     -# Only show it in the first page
     - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
     .prioritized-labels.gl-mb-7{ class: [('hide' if hide), ('is-not-draggable' unless can_admin_label)] }
-      %h5.gl-mt-3= _('Prioritized Labels')
-      .content-list.manage-labels-list.js-prioritized-labels{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
+      %h4.gl-mt-3= _('Prioritized Labels')
+      .manage-labels-list.js-prioritized-labels{ data: { url: set_priorities_project_labels_path(@project), sortable: can_admin_label } }
         #js-priority-labels-empty-state.priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty? && search.blank?}" }
           = render 'shared/empty_states/priority_labels'
         - if @prioritized_labels.any?
@@ -31,14 +31,14 @@
 
     - if @labels.any?
       .other-labels
-        %h5{ class: ('hide' if hide) }= _('Other Labels')
-        .content-list.manage-labels-list.js-other-labels
+        %h4{ class: ('hide' if hide) }= _('Other Labels')
+        .manage-labels-list.js-other-labels
           = render partial: 'shared/label', collection: @labels, as: :label, locals: { subject: @project }
           = paginate @labels, theme: 'gitlab'
     - elsif search.present?
       .other-labels
         - if @available_labels.any?
-          %h5
+          %h4
             = _('Other Labels')
           .nothing-here-block
             = _('No other labels with such name or description')

app/views/shared/_label.html.haml

@@ -6,7 +6,7 @@
 - toggle_subscription_path = toggle_subscription_label_path(label, @project) if current_user
 - tooltip_title = label_status_tooltip(label, status) if status
 
-%li.label-list-item{ id: label_css_id, data: { id: label.id } }
+%li.label-list-item{ id: label_css_id, class: "gl-p-5 gl-border-b", data: { id: label.id } }
   = render "shared/label_row", label: label, force_priority: force_priority
   %ul.label-actions-list
     - if can?(current_user, :admin_label, @project)