Apply new GitLab UI for buttons and card in admin/appearance

app/views/admin/appearances/_form.html.haml

@@ -54,10 +54,10 @@
     .col-lg-8
       .form-group
         = f.label :title, class: 'col-form-label label-bold'
-        = f.text_field :title, class: "form-control"
+        = f.text_field :title, class: "form-control gl-form-input"
       .form-group
         = f.label :description, class: 'col-form-label label-bold'
-        = f.text_area :description, class: "form-control", rows: 10
+        = f.text_area :description, class: "form-control gl-form-input", rows: 10
         .hint
           = parsed_with_gfm
       .form-group
@@ -83,7 +83,7 @@
       .form-group
         = f.label :new_project_guidelines, class: 'col-form-label label-bold'
         %p
-          = f.text_area :new_project_guidelines, class: "form-control", rows: 10
+          = f.text_area :new_project_guidelines, class: "form-control gl-form-input", rows: 10
           .hint
             = parsed_with_gfm
 
@@ -96,7 +96,7 @@
       .form-group
         = f.label :profile_image_guidelines, class: 'col-form-label label-bold'
         %p
-          = f.text_area :profile_image_guidelines, class: "form-control", rows: 10
+          = f.text_area :profile_image_guidelines, class: "form-control gl-form-input", rows: 10
           .hint
             = parsed_with_gfm
 

app/views/admin/appearances/_system_header_footer_form.html.haml

@@ -9,10 +9,10 @@
   .col-lg-8
     .form-group
       = form.label :header_message, _('Header message'), class: 'col-form-label label-bold'
-      = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
+      = form.text_area :header_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
     .form-group
       = form.label :footer_message, _('Footer message'), class: 'col-form-label label-bold'
-      = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control js-autosize"
+      = form.text_area :footer_message, placeholder: _('State your message to activate'), class: "form-control gl-form-input js-autosize"
     .form-group
       .form-check
         = form.check_box :email_header_and_footer_enabled, class: 'form-check-input'
@@ -27,7 +27,7 @@
         = _('Customize colors')
     .form-group.js-toggle-colors-container.hide
       = form.label :message_background_color, _('Background Color'), class: 'col-form-label label-bold'
-      = form.color_field :message_background_color, class: "form-control"
+      = form.color_field :message_background_color, class: "form-control gl-form-input"
     .form-group.js-toggle-colors-container.hide
       = form.label :message_font_color, _('Font Color'), class: 'col-form-label label-bold'
-      = form.color_field :message_font_color, class: "form-control"
+      = form.color_field :message_font_color, class: "form-control gl-form-input"

app/views/admin/appearances/preview_sign_in.html.haml

@@ -3,10 +3,10 @@
   %form.gl-show-field-errors
     .form-group
       = label_tag :login
-      = text_field_tag :login, nil, class: "form-control top", title: 'Please provide your username or email address.'
+      = text_field_tag :login, nil, class: "form-control gl-form-input top", title: 'Please provide your username or email address.'
     .form-group
       = label_tag :password
-      = password_field_tag :password, nil, class: "form-control bottom", title: 'This field is required.'
+      = password_field_tag :password, nil, class: "form-control gl-form-input bottom", title: 'This field is required.'
     .form-group
       = button_tag "Sign in", class: "btn gl-button btn-success"
 

changelogs/unreleased/yo-gl-new-ui-admin-appearance.yml

+---
+title: Apply new GitLab UI for buttons and card in admin/appearance
+merge_request:
+author:
+type: other