Use pajamas checkbox for appearance header and footer form

Changelog: changed
MR:

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

 - parsed_with_gfm = (_("Content parsed with %{link}.") % { link: link_to('GitLab Flavored Markdown', help_page_path('user/markdown'), target: '_blank') }).html_safe
 
-= form_for @appearance, url: admin_application_settings_appearances_path, html: { class: 'gl-mt-3' } do |f|
+= gitlab_ui_form_for @appearance, url: admin_application_settings_appearances_path, html: { class: 'gl-mt-3' } do |f|
   = form_errors(@appearance)
 
 

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

@@ -14,13 +14,10 @@
       = 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 gl-form-input js-autosize"
     .form-group
-      .form-check
-        = form.check_box :email_header_and_footer_enabled, class: 'form-check-input'
-        = form.label :email_header_and_footer_enabled, class: 'label-bold' do
-          = _('Enable header and footer in emails')
-
-        .form-text.text-muted
-          = _('Add header and footer to emails. Please note that color settings will only be applied within the application interface')
+      = form.gitlab_ui_checkbox_component :email_header_and_footer_enabled,
+        _('Enable header and footer in emails'),
+        help_text: _('Add header and footer to emails. Please note that color settings will only be applied within the application interface'),
+        label_options: { class: 'gl-font-weight-bold!' }
 
     .form-group.js-toggle-colors-container
       %button.btn.gl-button.btn-link.js-toggle-colors-link{ type: 'button' }