style updates

[ci skip]

app/assets/javascripts/ide/components/merge_requests/dropdown.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <template>
-  <div class="dropdown-menu">
+  <div class="dropdown-menu ide-merge-requests-dropdown">
     <tabs
       stop-propagation
       @changed="updateActiveTab"
@@ -53,6 +53,7 @@ export default {
           :is-loading="isLoading"
           :items="mergeRequests"
           :current-id="currentMergeRequestId"
+          :empty-text="__('You have not created any merge requests')"
           @search="fetchMergeRequests"
         />
       </tab>
@@ -62,6 +63,7 @@ export default {
           :is-loading="isLoading"
           :items="mergeRequests"
           :current-id="currentMergeRequestId"
+          :empty-text="__('You do not have any assigned merge requests')"
           @search="fetchMergeRequests"
         />
       </tab>
@@ -71,7 +73,7 @@ export default {
 
 <style scoped>
 .dropdown-menu {
-  width: 400px;
+  width: 350px;
   padding: 0;
   max-height: initial !important;
 }

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -21,12 +21,24 @@ export default {
       type: String,
       required: true,
     },
+    emptyText: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
       search: '',
     };
   },
+  computed: {
+    hasMergeRequests() {
+      return this.items.length !== 0;
+    },
+    hasNoSearchResults() {
+      return this.search !== '' && !this.hasMergeRequests;
+    },
+  },
   watch: {
     isLoading() {
       this.focusSearch();
@@ -72,8 +84,9 @@ export default {
           class="fa fa-search dropdown-input-search"
         ></i>
       </div>
-      <div class="dropdown-content">
+      <div class="dropdown-content ide-merge-requests-dropdown-content">
         <ul class="mb-3">
+          <template v-if="hasMergeRequests">
             <li
               v-for="item in items"
               :key="item.id"
@@ -84,8 +97,31 @@ export default {
                 @click="viewMergeRequest"
               />
             </li>
+          </template>
+          <li
+            v-else
+            class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
+          >
+            <template v-if="hasNoSearchResults">
+              No merge requests found
+            </template>
+            <template v-else>
+              {{ emptyText }}
+            </template>
+          </li>
         </ul>
       </div>
     </template>
   </div>
 </template>
+
+<style scoped>
+.ide-merge-requests-empty {
+  height: 230px;
+}
+
+.ide-merge-requests-dropdown-content {
+  min-height: 230px;
+  max-height: 470px;
+}
+</style>

app/assets/stylesheets/pages/repo.scss

@@ -1274,3 +1274,17 @@
 .ide-job-header {
   min-height: 60px;
 }
+
+.ide-merge-requests-dropdown {
+  .nav-links li {
+    width: 50%;
+  }
+  
+  .nav-links li a {
+    text-align: center;
+  }
+  
+  .nav-links li a:not(.active) {
+    background-color: #fafafa;
+  }
+}