Update approvals settings layout

app/assets/stylesheets/pages/settings.scss

@@ -35,3 +35,7 @@
     margin-left: 5px;
   }
 }
+
+.nested-settings {
+  padding-left: 20px;
+}

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

@@ -43,54 +43,64 @@
   .hint
     Description parsed with #{link_to "GitLab Flavored Markdown", help_page_path('user/markdown'), target: '_blank'}.
 
-.form-group
-  = form.label :approvals_before_merge, class: 'label-light' do
-    Approvals required
-  = form.number_field :approvals_before_merge, class: "form-control", min: 0
-  .help-block
-    Number of users to approve a merge request before it can be accepted. 0 - approving is disabled
-
 .form-group.reset-approvals-on-push
   .checkbox
-    = form.label :reset_approvals_on_push do
-      = form.check_box :reset_approvals_on_push
-      %span.descr Reset approvals on push
-      .help-block Approvals are reset when new data is pushed to the merge request
-
-.form-group
-  = form.label :approver_ids, class: 'label-light' do
-    Approvers
-  = users_select_tag("project[approver_ids]", multiple: true, class: 'input-large', scope: :all, email_user: true)
-  .help-block
-    Add an approver suggestion for each merge request
-  = form.label :approver_group_ids, class: 'label-light' do
-    Approver groups
-  - skip_groups = project.approver_groups.pluck(:group_id)
-  = groups_select_tag('project[approver_group_ids]', multiple: true, data: { skip_groups: skip_groups, all_available: true }, class: 'input-large')
-  .help-block
-    Add a group as an approver suggestion for each merge request
+    = form.label :approvals_before_merge do
+      = form.check_box :approvals_before_merge
+      %strong Activate merge request approvals
+      //TODO: correct help path
+      = link_to icon('question-circle'), "https://docs.gitlab.com/ee/user/project/merge_requests/merge_request_approvals.html#merge-request-approvals", target: '_blank'
+      .descr Merge request approvals allow you to set the number of necessary approvals and predefine a list of approvers that you will need to approve every merge request in a project.
 
-  .panel.panel-default.prepend-top-10
-    .panel-heading
+.nested-settings
+  .form-group
+    = form.label :approver_ids, class: 'label-light' do
       Approvers
-    %ul.well-list.approver-list
-      - project.approvers.each do |approver|
-        %li.approver
-          = link_to approver.user.name, approver.user
-          .pull-right
-            = link_to namespace_project_approver_path(project.namespace, project, approver), data: { confirm: "Are you sure you want to remove approver #{approver.user.name}"}, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove approver' do
-              = icon("sign-out")
-              Remove
-      - project.approver_groups.each do |approver_group|
-        %li.approver-group
-          Group:
-          = link_to approver_group.group.name, approver_group.group
-          .pull-right
-            = link_to namespace_project_approver_group_path(project.namespace, project, approver_group), data: { confirm: "Are you sure you want to remove group #{approver_group.group.name}" }, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove group' do
-              = icon("sign-out")
-              Remove
-      - if project.approvers.empty? && project.approver_groups.empty?
-        %li There are no approvers
+    = users_select_tag("project[approver_ids]", multiple: true, class: 'input-large', scope: :all, email_user: true)
+    .help-block
+      Add an approver suggestion for each merge request
+    = form.label :approver_group_ids, class: 'label-light' do
+      Approver groups
+    - skip_groups = project.approver_groups.pluck(:group_id)
+    = groups_select_tag('project[approver_group_ids]', multiple: true, data: { skip_groups: skip_groups, all_available: true }, class: 'input-large')
+    .help-block
+      Add a group as an approver suggestion for each merge request
+
+    .panel.panel-default.prepend-top-10
+      .panel-heading
+        Approvers
+      %ul.well-list.approver-list
+        - project.approvers.each do |approver|
+          %li.approver
+            = link_to approver.user.name, approver.user
+            .pull-right
+              = link_to namespace_project_approver_path(project.namespace, project, approver), data: { confirm: "Are you sure you want to remove approver #{approver.user.name}"}, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove approver' do
+                = icon("sign-out")
+                Remove
+        - project.approver_groups.each do |approver_group|
+          %li.approver-group
+            Group:
+            = link_to approver_group.group.name, approver_group.group
+            .pull-right
+              = link_to namespace_project_approver_group_path(project.namespace, project, approver_group), data: { confirm: "Are you sure you want to remove group #{approver_group.group.name}" }, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove group' do
+                = icon("sign-out")
+                Remove
+        - if project.approvers.empty? && project.approver_groups.empty?
+          %li There are no approvers
+
+  .form-group
+    = form.label :approvals_before_merge, class: 'label-light' do
+      Approvals required
+    = form.number_field :approvals_before_merge, class: "form-control"
+    .help-block
+      NUMBER approvals are required, from the above list you specified
+
+  .form-group.reset-approvals-on-push
+    .checkbox
+      = form.label :reset_approvals_on_push do
+        = form.check_box :reset_approvals_on_push
+        %strong Reset approvals on push
+        .descr Approvals are reset when new data is pushed to the merge request
 
 :javascript
   new UsersSelect();