Use cards for label list

app/assets/stylesheets/pages/labels.scss

@@ -143,6 +143,10 @@
     cursor: move;
     cursor: -webkit-grab;
     cursor: -moz-grab;
+    margin-bottom: 5px;
+
+    padding: 11px 10px 11px $gl-padding;
+    border-radius: $border-radius-default;
 
     &:active {
       cursor: -webkit-grabbing;
@@ -152,6 +156,10 @@
     &.sortable-ghost {
       opacity: 0.3;
     }
+
+    .prioritized-labels & {
+      box-shadow: 0 1px 2px $issue-boards-card-shadow;
+    }
   }
 
   .btn-action {
@@ -319,3 +327,9 @@
     font-size: $label-font-size;
   }
 }
+
+.labels-container {
+  background-color: $gray-light;
+  border-radius: $border-radius-default;
+  padding: $gl-padding $gl-padding-8;
+}
\ No newline at end of file

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

@@ -17,12 +17,12 @@
           = link_to new_project_label_path(@project), class: "btn btn-new" do
             New label
 
-    .labels
+    .labels-container.prepend-top-5
       - if can_admin_label
         -# Only show it in the first page
         - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
         .prioritized-labels{ class: ('hide' if hide) }
-          %h5 Prioritized Labels
+          %h5.prepend-top-0 Prioritized Labels
           %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_project_labels_path(@project) }
             #js-priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty?}" }
               = render 'shared/empty_states/priority_labels'