Merge branch '48025-branch-name-status-color-is-not-correct-anymore' into 'master'

Resolve "Branch name status color is not correct anymore"

Closes #48025

See merge request gitlab-org/gitlab-ce!19973

3 files changed, 9 insertions, 5 deletions

diff --git a/app/assets/javascripts/create_merge_request_dropdown.js b/app/assets/javascripts/create_merge_request_dropdown.js
index 108082799ef..f77a5730b77 100644
--- a/app/assets/javascripts/create_merge_request_dropdown.js
+++ b/app/assets/javascripts/create_merge_request_dropdown.js
@@ -366,7 +366,7 @@ export default class CreateMergeRequestDropdown {
   removeMessage(target) {
     const { input, message } = this.getTargetData(target);
     const inputClasses = ['gl-field-error-outline', 'gl-field-success-outline'];
-    const messageClasses = ['gl-field-hint', 'gl-field-error-message', 'gl-field-success-message'];
+    const messageClasses = ['text-muted', 'text-danger', 'text-success'];
 
     inputClasses.forEach(cssClass => input.classList.remove(cssClass));
     messageClasses.forEach(cssClass => message.classList.remove(cssClass));
@@ -393,7 +393,7 @@ export default class CreateMergeRequestDropdown {
 
     this.removeMessage(target);
     input.classList.add('gl-field-success-outline');
-    message.classList.add('gl-field-success-message');
+    message.classList.add('text-success');
     message.textContent = sprintf(__('%{text} is available'), { text });
     message.style.display = 'inline-block';
   }
@@ -403,7 +403,7 @@ export default class CreateMergeRequestDropdown {
     const text = target === 'branch' ? __('branch name') : __('source');
 
     this.removeMessage(target);
-    message.classList.add('gl-field-hint');
+    message.classList.add('text-muted');
     message.textContent = sprintf(__('Checking %{text} availability…'), { text });
     message.style.display = 'inline-block';
   }
@@ -415,7 +415,7 @@ export default class CreateMergeRequestDropdown {
 
     this.removeMessage(target);
     input.classList.add('gl-field-error-outline');
-    message.classList.add('gl-field-error-message');
+    message.classList.add('text-danger');
     message.textContent = text;
     message.style.display = 'inline-block';
   }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 03520f42997..2b2e6d69e33 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -201,6 +201,10 @@ label {
 }
 
 .gl-show-field-errors {
+  .form-control {
+    height: 34px;
+  }
+
   .gl-field-success-outline {
     border: 1px solid $green-600;
 
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index acb1a446ec4..a678cb6f058 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -40,7 +40,7 @@
               %label{ for: 'new-branch-name' }
                 = _('Branch name')
               %input#new-branch-name.js-branch-name.form-control{ type: 'text', placeholder: "#{@issue.to_branch_name}", value: "#{@issue.to_branch_name}" }
-              %span.js-branch-message.form-text.text-muted
+              %span.js-branch-message.form-text
 
             .form-group
               %label{ for: 'source-name' }