Merge branch '46711-admin-area-styling-of-service-template-page' into 'master'

Resolve "Admin area > Styling of service template page"

Closes #46711

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

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

@@ -7,5 +7,4 @@
   = render 'shared/service_settings', form: form, subject: @service
 
   .footer-block.row-content-block
-    .form-actions
     = form.submit 'Save', class: 'btn btn-save'

app/views/projects/services/mattermost_slash_commands/_help.html.haml

 - enabled = Gitlab.config.mattermost.enabled
 
-.card
+.info-well
+  .well-segment
     %p
       This service allows users to perform common operations on this
       project by entering slash commands in Mattermost.

app/views/projects/services/slack_slash_commands/_help.html.haml

 - pretty_name = defined?(@project) ? @project.full_name : 'namespace / path'
 - run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
 
-.card
+.info-well
+  .well-segment
     %p
       This service allows users to perform common operations on this
       project by entering slash commands in Slack.

app/views/shared/_field.html.haml

@@ -9,11 +9,11 @@
 - help = field[:help]
 - disabled = disable_fields_service?(@service)
 
-.form-group
+.form-group.row
   - if type == "password" && value.present?
-    = form.label name, "Enter new #{title.downcase}", class: "col-form-label"
+    = form.label name, "Enter new #{title.downcase}", class: "col-form-label col-sm-2"
   - else
-    = form.label name, title, class: "col-form-label"
+    = form.label name, title, class: "col-form-label col-sm-2"
   .col-sm-10
     - if type == 'text'
       = form.text_field name, class: "form-control", placeholder: placeholder, required: required, disabled: disabled

app/views/shared/_service_settings.html.haml

@@ -3,7 +3,8 @@
 - if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
   = render "projects/services/#{@service.to_param}/help", subject: subject
 - elsif @service.help.present?
-  .card
+  .info-well
+    .well-segment
       = markdown @service.help
 
 .service-settings
@@ -15,24 +16,23 @@
 
   - if @service.configurable_events.present?
     .form-group.row
-      = form.label :url, "Trigger", class: 'col-form-label col-sm-2'
+      .col-sm-2.text-right Trigger
 
       .col-sm-10
         - @service.configurable_events.each do |event|
-          %div
-            = form.check_box service_event_field_name(event), class: 'float-left'
-            .prepend-left-20
-              = form.label service_event_field_name(event), class: 'list-label' do
+          .form-group
+            .form-check
+              = form.check_box service_event_field_name(event), class: 'form-check-input'
+              = form.label service_event_field_name(event), class: 'form-check-label' do
                 %strong
                   = event.humanize
 
             - field = @service.event_field(event)
 
             - if field
-            %p
               = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
 
-          %p.light
+            %p.text-muted
               = @service.class.event_description(event)
 
   - @service.global_fields.each do |field|