style updates

[ci skip]

3 files changed, 62 insertions, 10 deletions

diff --git a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue b/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
index 106f66b764a..1bcd550c713 100644
--- a/app/assets/javascripts/ide/components/merge_requests/dropdown.vue
+++ b/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;
 }
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 04b3848f3e2..0d81da12246 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/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,20 +84,44 @@ 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"
+            >
+              <item
+                :item="item"
+                :current-id="currentId"
+                @click="viewMergeRequest"
+              />
+            </li>
+          </template>
           <li
-            v-for="item in items"
-            :key="item.id"
+            v-else
+            class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
           >
-            <item
-              :item="item"
-              :current-id="currentId"
-              @click="viewMergeRequest"
-            />
+            <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>
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index ffa8d13b09c..89c3feaccac 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/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;
+  }
+}