fix up padding and UI tweaks. Add Any Label option to dropdown

app/assets/javascripts/boards/components/labels_select.vue

@@ -18,14 +18,6 @@ export default {
       type: Array,
       required: false,
     },
-    defaultText: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
     canEdit: {
       type: Boolean,
       required: false,
@@ -47,6 +39,18 @@ export default {
   mounted() {
     new LabelsSelect();
   },
+  methods: {
+    labelStyle(label) {
+      let style;
+      if (label.textColor) {
+        style += `color: ${label.textColor};`
+      }
+      if (label.color) {
+        style += `background-color: ${label.color};`
+      }
+      return style;
+    },
+  },
 };
 </script>
 
@@ -70,17 +74,14 @@ export default {
         Any label
       </span>
       <a
+        v-else
         href="#"
         v-for="label in board.labels"
         :key="label.id"
       >
         <span
-          class="label color-label has-tooltip"
-          :style="`
-            background-color: ${label.color};
-            color: ${label.textColor};
-          `"
-          title=""
+          class="label color-label"
+          :style="labelStyle(label)"
         >
           {{ label.title }}
         </span>
@@ -100,8 +101,9 @@ export default {
       <div class="dropdown">
         <button
           v-bind:data-labels="labelsPath"
-          class="dropdown-menu-toggle wide js-label-select js-multiselect js-board-config-modal"
+          class="dropdown-menu-toggle wide js-label-select js-multiselect js-extra-options js-board-config-modal"
           data-field-name="label_id[]"
+          :data-show-any="true"
           data-toggle="dropdown"
           type="button"
         >

app/assets/javascripts/boards/components/milestone_select.vue

@@ -41,7 +41,7 @@ export default {
       return this.board.milestone ? this.board.milestone.id : '';
     },
     milestoneTitleClass() {
-      return this.milestoneTitle === 'ANY_MILESTONE' ? 'text-secondary': 'bold';
+      return this.milestoneTitle === ANY_MILESTONE ? 'text-secondary': 'bold';
     },
     selected() {
       return this.board.milestone ? this.board.milestone.name : '';
@@ -72,10 +72,11 @@ export default {
         Edit
       </a>
     </div>
-    <div class="value">
-      <span :class="milestoneTitleClass">
-        {{ milestoneTitle }}
-      </span>
+    <div
+      class="value"
+      :class="milestoneTitleClass"
+    >
+      {{ milestoneTitle }}
     </div>
     <div
       class="selectbox"

app/assets/javascripts/labels_select.js

@@ -391,15 +391,16 @@ import DropdownUtils from './filtered_search/dropdown_utils';
                 .catch(fadeOutLoader);
             }
             else if ($dropdown.hasClass('js-board-config-modal')) {
-              if ($el.hasClass('is-active')) {
+              if (label.isAny) {
+                gl.issueBoards.BoardsStore.boardConfig.labels = [];
+              } else if ($el.hasClass('is-active')) {
                 gl.issueBoards.BoardsStore.boardConfig.labels.push(new ListLabel({
                   id: label.id,
                   title: label.title,
                   color: label.color[0],
-                  textColor: '#fff'
+                  textColor: label.text_color || '#fff',
                 }));
-              }
-              else {
+              } else {
                 let labels = gl.issueBoards.BoardsStore.boardConfig.labels;
                 labels = labels.filter(function (selectedLabel) {
                   return selectedLabel.id !== label.id;

app/assets/stylesheets/framework/modal.scss

@@ -49,3 +49,7 @@ body.modal-open {
     }
   }
 }
+
+.modal-body {
+  background-color: $modal-body-bg;
+}

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -164,3 +164,36 @@ $pre-border-color: $border-color;
 $table-bg-accent: $gray-light;
 
 $zindex-popover: 900;
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding: $gl-padding;
+
+//** Padding applied to the modal title
+$modal-title-padding: $gl-padding;
+//** Modal title line-height
+// $modal-title-line-height:     $line-height-base
+
+//** Background color of modal content area
+$modal-content-bg: $gray-light;
+$modal-body-bg: $white-light;
+//** Modal content border color
+// $modal-content-border-color:                   rgba(0,0,0,.2)
+//** Modal content border color **for IE8**
+// $modal-content-fallback-border-color:          #999
+
+//** Modal backdrop background color
+// $modal-backdrop-bg:           #000
+//** Modal backdrop opacity
+// $modal-backdrop-opacity:      .5
+//** Modal header border color
+// $modal-header-border-color:   #e5e5e5
+//** Modal footer border color
+// $modal-footer-border-color:   $modal-header-border-color
+
+// $modal-lg:                    900px
+// $modal-md:                    600px
+// $modal-sm:                    300px
\ No newline at end of file

app/assets/stylesheets/framework/typography.scss

@@ -307,6 +307,12 @@ h6 {
 
 .edit-link {
   color: $gl-text-color;
+
+  &:focus,
+  &:hover {
+    color: $gl-text-color;
+    text-decoration: none;
+  }
 }
 
 .light-header {