Refactor UI

3 files changed, 23 insertions, 11 deletions

diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index 1d9f90ad566..6c1906041e8 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -343,6 +343,7 @@ export default class CreateMergeRequestDropdown {
 
     inputClasses.forEach(cssClass => input.classList.remove(cssClass));
     messageClasses.forEach(cssClass => message.classList.remove(cssClass));
+    message.style.display = 'none';
   }
 
   setUnavailableButtonState(isLoading = true) {
@@ -367,7 +368,7 @@ export default class CreateMergeRequestDropdown {
     input.classList.add('gl-field-success-outline');
     message.classList.add('gl-field-success-message');
     message.textContent = sprintf(__('%{text} is available'), { text });
-    message.classList.remove('hide');
+    message.style.display = 'inline-block';
   }
 
   showCheckingMessage(target) {
@@ -377,7 +378,7 @@ export default class CreateMergeRequestDropdown {
     this.removeMessage(target);
     message.classList.add('gl-field-hint');
     message.textContent = sprintf(__('Checking %{text} availability…'), { text });
-    message.classList.remove('hide');
+    message.style.display = 'inline-block';
   }
 
   showNotAvailableMessage(target) {
@@ -388,7 +389,7 @@ export default class CreateMergeRequestDropdown {
     input.classList.add('gl-field-error-outline');
     message.classList.add('gl-field-error-message');
     message.textContent = text;
-    message.classList.remove('hide');
+    message.style.display = 'inline-block';
   }
 
   unavailable() {
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 10898164fbc..a72129f58b5 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -205,7 +205,7 @@ ul.related-merge-requests > li {
 .create-mr-dropdown-wrap {
   .branch-message,
   .ref-message {
-    display: inline-block;
+    display: none;
 
     &::first-letter {
       text-transform: capitalize;
@@ -266,8 +266,16 @@ ul.related-merge-requests > li {
     }
   }
 
+  li.divider {
+    margin: 8px 10px 8px 10px;
+  }
+
   li:not(.divider) {
-    padding: 6px;
+    padding: 8px 10px 8px 10px;
+
+    &:last-child {
+      padding-bottom: 8px;
+    }
 
     &.droplab-item-selected {
       .icon-container {
@@ -282,9 +290,12 @@ ul.related-merge-requests > li {
       }
     }
 
+    &.droplab-item-ignore {
+      padding-top: 8px;
+    }
+
     .icon-container {
       float: left;
-      padding-left: 6px;
 
       i {
         visibility: hidden;
@@ -292,7 +303,7 @@ ul.related-merge-requests > li {
     }
 
     .description {
-      padding-left: 30px;
+      padding-left: 22px;
 
       strong {
         display: block;
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index 21013854b50..cd4553a98af 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,6 +1,6 @@
 - can_create_merge_request = can?(current_user, :create_merge_request, @project)
 - data_action = can_create_merge_request ? 'create-mr' : 'create-branch'
-- value = can_create_merge_request ? 'Create a merge request' : 'Create a branch'
+- value = can_create_merge_request ? 'Create merge request' : 'Create a branch'
 
 - if can?(current_user, :push_code, @project)
   - can_create_path = can_create_branch_project_issue_path(@project, @issue)
@@ -26,12 +26,12 @@
           %li.create-item.droplab-item-selected{ role: 'button', data: { value: 'create-mr', text: 'Create a merge request' } }
             .menu-item
               .icon-container= icon('check')
-              .description.droplab-item-ignore-hiding Create a merge request
+              .description.droplab-item-ignore-hiding Create merge request and branch
 
         %li.create-item{ class: [!can_create_merge_request && 'droplab-item-selected'], role: 'button', data: {  value: 'create-branch', text: 'Create a branch' } }
           .menu-item
             .icon-container= icon('check')
-            .description.droplab-item-ignore-hiding Create a branch
+            .description.droplab-item-ignore-hiding Create branch
         %li.divider
 
         %li.droplab-item-ignore
@@ -46,5 +46,5 @@
 
         %li.droplab-item-ignore
           %button.btn.btn-success.js-create-target.droplab-item-ignore{ type: 'button', data: { action: 'create-mr' } }
-            Create a merge request
+            Create merge request