Adjust spacing in project MR settings form

Update styles to be in-line with design guideline

- Add more spacing between checkboxes and alert box
- Remove unnecessary wrapper divs and classes

See https://design.gitlab.com/components/checkbox/

ee/app/views/projects/_merge_request_approvals_settings.html.haml

@@ -13,4 +13,4 @@
     = form_for @project, remote: true, html: { class: "merge-request-approval-settings-form js-mr-approvals-form" }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-merge-request-approval-settings' }
       = render 'projects/merge_request_approvals_settings_form', form: f, project: @project
-      = f.submit _("Save changes"), class: "btn gl-button btn-success qa-save-merge-request-approval-settings-button"
+      = f.submit _("Save changes"), class: "btn gl-button btn-success qa-save-merge-request-approval-settings-button gl-mt-4"

ee/app/views/projects/_merge_request_approvals_settings_form.html.haml

@@ -9,7 +9,7 @@
       = sprite_icon('spinner', size: 24, css_class: 'gl-spinner')
 
 - if project.code_owner_approval_required_available?
-  .gl-alert.gl-alert-info.fade.in.show{ role: "alert" }
+  .gl-alert.gl-alert-info.gl-mb-4.fade.in.show{ role: "alert" }
     %button.js-close.gl-alert-dismiss{ type: "button", 'data-dismiss': "alert", 'aria-label': "Close" }
       %span
         = sprite_icon('close', size: 16, css_class: 'gl-icon')
@@ -19,38 +19,34 @@
       = _('The "Require approval from CODEOWNERS" setting was moved to %{banner_link_start}Protected Branches%{banner_link_end}').html_safe % { banner_link_start: banner_link_start, banner_link_end: '</strong></a>'.html_safe}
       = link_to sprite_icon('question-o'), help_page_path('user/project/protected_branches', anchor: 'protected-branches-approval-by-code-owners'), target: '_blank'
 
-.form-group
-  .form-check
+.gl-form-checkbox-group.bv-no-focus-ring
+  .gl-form-checkbox.form-check
     = form.check_box(:disable_overriding_approvers_per_merge_request, { class: 'form-check-input', disabled: !can_modify_approvers }, false, true)
     = form.label :disable_overriding_approvers_per_merge_request, class: 'form-check-label' do
       %span= _('Allow overrides to approval lists per merge request (MR)')
       = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals', anchor: 'prevent-overriding-default-approvals'), target: '_blank'
 
-.form-group.reset-approvals-on-push
-  .form-check
+  .gl-form-checkbox.form-check
     = form.check_box :reset_approvals_on_push, class: 'form-check-input'
     = form.label :reset_approvals_on_push, class: 'form-check-label' do
       %span= _('Require new approvals when new commits are added to an MR.')
 
-.form-group.self-approval
-  .form-check
+  .gl-form-checkbox.form-check
     = form.check_box :merge_requests_author_approval, { class: 'form-check-input', disabled: !can_modify_merge_request_author_settings }, false, true
     = form.label :merge_requests_author_approval, class: 'form-check-label' do
       %span= _('Prevent MR approvals by the author.')
       = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals',
         anchor: 'allowing-merge-request-authors-to-approve-their-own-merge-requests'), target: '_blank'
 
-.form-group.committers-approval
-  .form-check
+  .gl-form-checkbox.form-check
     = form.check_box :merge_requests_disable_committers_approval, { disabled: !can_modify_merge_request_committer_settings, class: 'form-check-input' }
     = form.label :merge_requests_disable_committers_approval, class: 'form-check-label' do
       %span= _('Prevent MR approvals from users who make commits to the MR.')
       = link_to sprite_icon('question-o'), help_page_path('user/project/merge_requests/merge_request_approvals',
         anchor: 'allowing-merge-request-authors-to-approve-their-own-merge-requests'), target: '_blank'
 
-- if password_authentication_enabled_for_web?
-  .form-group.self-approval
-    .form-check
+  - if password_authentication_enabled_for_web?
+    .gl-form-checkbox.form-check
       = form.check_box :require_password_to_approve, class: 'form-check-input'
       = form.label :require_password_to_approve, class: 'form-check-label' do
         %span= _('Require user password for approvals.')

ee/changelogs/unreleased/tle-rejig-spacing-project-merge-request-settings-form.yml

+---
+title: Adjust spacing in project MR settings form
+merge_request: 51184
+author:
+type: changed