fix some style and padding issues

app/assets/javascripts/api.js

@@ -68,14 +68,14 @@ const Api = {
   },
 
   newLabel(namespacePath, projectPath, data, callback) {
-    var url = ""
+    let url;
 
     if (projectPath) {
       url = Api.buildUrl(Api.projectLabelsPath)
         .replace(':namespace_path', namespacePath)
         .replace(':project_path', projectPath);
     } else {
-      url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespacePath)
+      url = Api.buildUrl(Api.groupLabelsPath).replace(':namespace_path', namespacePath);
     }
 
     return $.ajax({

app/assets/javascripts/boards/components/board_list.js

@@ -171,7 +171,7 @@ export default {
       </div>
       <transition name="slide-down">
         <board-new-issue
-          :groupId="groupId"
+          :group-id="groupId"
           :list="list"
           v-if="list.type !== 'closed' && showIssueForm"/>
       </transition>

app/assets/javascripts/boards/components/board_new_issue.js

 /* global ListIssue */
 import eventHub from '../eventhub';
+import loadingIcon from '../../vue_shared/components/loading_icon.vue';
 import Api from '../../api';
 
 const Store = gl.issueBoards.BoardsStore;
@@ -25,6 +26,14 @@ export default {
       error: false,
     };
   },
+  components: {
+    loadingIcon,
+  },
+  computed: {
+    selectedProjectName() {
+      return this.selectedProject.name || 'Select a project';
+    },
+  },
   methods: {
     loadProjects() {
       this.loading = true;
@@ -126,10 +135,11 @@ export default {
               type="button"
               data-toggle="dropdown"
               aria-expanded="false">
-              {{ selectedProject.name || 'Select a project' }}
-              <i class="fa fa-chevron-down"></i>
+              {{ selectedProjectName }}
+              <i class="fa fa-chevron-down" aria-hidden="true"></i>
             </button>
-            <div class="dropdown-menu dropdown-menu-selectable wide">
+            <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
+              <loading-icon v-if="loading" />
               <ul>
                 <li v-for="project in projects">
                   <a

app/assets/javascripts/boards/components/board_sidebar.js

@@ -10,7 +10,6 @@ import eventHub from '../../sidebar/event_hub';
 import AssigneeTitle from '../../sidebar/components/assignees/assignee_title';
 import Assignees from '../../sidebar/components/assignees/assignees';
 import './sidebar/remove_issue';
-import UsersSelect from '../../users_select';
 
 const Store = gl.issueBoards.BoardsStore;
 

app/assets/stylesheets/pages/boards.scss

@@ -146,13 +146,12 @@
     }
 
     .board-title {
-      position: initial;
       padding: 0;
       border-bottom: 0;
 
       > span {
         display: block;
-        transform: rotate(90deg) translate(25px, 0);
+        transform: rotate(90deg) translate(35px, 10px);
       }
     }
 
@@ -180,21 +179,18 @@
 }
 
 .board-header {
-  border-top-left-radius: $border-radius-default;
-  border-top-right-radius: $border-radius-default;
+  position: relative;
 
-  &.has-border {
+  &.has-border::before {
     border-top: 3px solid;
-    margin-top: -1px;
-    margin-right: -1px;
-    margin-left: -1px;
-    padding-top: 1px;
-    padding-right: 1px;
-    padding-left: 1px;
-
-    .board-title {
-      padding-top: ($gl-padding - 3px);
-    }
+    border-color: inherit;
+    border-top-left-radius: $border-radius-default;
+    border-top-right-radius: $border-radius-default;
+    content: '';
+    position: absolute;
+    width: calc(100% + 2px);
+    top: -1px;
+    left: -1px;
   }
 }
 
@@ -204,9 +200,8 @@
 }
 
 .board-title {
-  position: relative;
   margin: 0;
-  padding: $gl-padding;
+  padding: 12px $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
   display: flex;

app/views/shared/boards/components/_board.html.haml

@@ -13,7 +13,7 @@
           %board-delete{ "inline-template" => true,
             ":list" => "list",
             "v-if" => "!list.preset && list.id" }
-            %button.board-delete.has-tooltip.btn.btn-transparent.link-highlight{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+            %button.board-delete.has-tooltip.append-right-10{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
               = icon("trash")
         .issue-count-badge.clearfix{ "v-if" => 'list.type !== "blank"' }
           %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }