re-order and re-style autodevops form to match design

app/assets/stylesheets/pages/settings_ci_cd.scss

@@ -16,3 +16,18 @@
 .registry-placeholder {
   min-height: 60px;
 }
+
+.auto-devops-settings {
+  .card,
+  .card-body {
+    border-radius: $card-border-radius;
+  }
+
+  .card {
+    margin-bottom: $gl-vert-padding;
+  }
+
+  .card-body {
+    padding: $gl-padding $gl-padding-24;
+  }
+}

app/views/projects/settings/ci_cd/_autodevops_form.html.haml

@@ -2,7 +2,7 @@
   .col-lg-12
     = form_for @project, url: project_settings_ci_cd_path(@project) do |f|
       = form_errors(@project)
-      %fieldset.builds-feature
+      %fieldset.builds-feature.auto-devops-settings
         .form-group
           - message = auto_devops_warning_message(@project)
           - ci_file_formatted = '<code>.gitlab-ci.yml</code>'.html_safe
@@ -10,34 +10,42 @@
             %p.settings-message.text-center
               = message.html_safe
           = f.fields_for :auto_devops_attributes, @auto_devops do |form|
-            .form-check
-              = form.radio_button :enabled, 'true', class: 'form-check-input'
-              = form.label :enabled_true, class: 'form-check-label' do
-                %strong= s_('CICD|Enable Auto DevOps')
-                %br
-                = s_('CICD|The Auto DevOps pipeline configuration will be used when there is no %{ci_file} in the project.').html_safe % { ci_file: ci_file_formatted }
+            .card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, 'true', class: 'form-check-input'
+                  = form.label :enabled_true, class: 'form-check-label' do
+                    %strong= s_('CICD|Enable Auto DevOps')
+                  .form-text.text-muted
+                    = s_('CICD|The Auto DevOps pipeline configuration will be used when there is no %{ci_file} in the project.').html_safe % { ci_file: ci_file_formatted }
 
-            .form-check
-              = form.radio_button :enabled, '', class: 'form-check-input'
-              = form.label :enabled_, class: 'form-check-label' do
-                %strong= s_('CICD|Instance default (%{state})') % { state: "#{Gitlab::CurrentSettings.auto_devops_enabled? ? _('enabled') : _('disabled')}" }
-                %br
-                = s_('CICD|Follow the instance default to either have Auto DevOps enabled or disabled when there is no project specific %{ci_file}.').html_safe % { ci_file: ci_file_formatted }
+            .card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, '', class: 'form-check-input'
+                  = form.label :enabled_, class: 'form-check-label' do
+                    %strong= s_('CICD|Instance default (%{state})') % { state: "#{Gitlab::CurrentSettings.auto_devops_enabled? ? _('enabled') : _('disabled')}" }
+                  .form-text.text-muted
+                    = s_('CICD|Follow the instance default to either have Auto DevOps enabled or disabled when there is no project specific %{ci_file}.').html_safe % { ci_file: ci_file_formatted }
 
-            .form-check
-              = form.radio_button :enabled, 'false', class: 'form-check-input'
-              = form.label :enabled_false, class: 'form-check-label' do
-                %strong= s_('CICD|Disable Auto DevOps')
-                %br
-                = s_('CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery.').html_safe % { ci_file: ci_file_formatted }
-    
-            = form.label :domain, class:"prepend-top-10" do
-              = _('Domain')
-            = form.text_field :domain, class: 'form-control', placeholder: 'domain.com'
-            .form-text.text-muted
-              = s_('CICD|A domain is required to use Auto Review Apps and Auto Deploy Stages.')
-              - if cluster_ingress_ip = cluster_ingress_ip(@project)
-                = s_('%{nip_domain} can be used as an alternative to a custom domain.').html_safe % { nip_domain: "<code>#{cluster_ingress_ip}.nip.io</code>".html_safe }
-              = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'auto-devops-base-domain'), target: '_blank'
+            .card
+              .card-body.bg-light
+                = form.label :domain do
+                  %strong= _('Domain')
+                = form.text_field :domain, class: 'form-control', placeholder: 'domain.com'
+                .form-text.text-muted
+                  = s_('CICD|A domain is required to use Auto Review Apps and Auto Deploy Stages.')
+                  - if cluster_ingress_ip = cluster_ingress_ip(@project)
+                    = s_('%{nip_domain} can be used as an alternative to a custom domain.').html_safe % { nip_domain: "<code>#{cluster_ingress_ip}.nip.io</code>".html_safe }
+                  = link_to icon('question-circle'), help_page_path('topics/autodevops/index.md', anchor: 'auto-devops-base-domain'), target: '_blank'
+        
+            .card
+              .card-body
+                .form-check
+                  = form.radio_button :enabled, 'false', class: 'form-check-input'
+                  = form.label :enabled_false, class: 'form-check-label' do
+                    %strong= s_('CICD|Disable Auto DevOps')
+                  .form-text.text-muted
+                    = s_('CICD|An explicit %{ci_file} needs to be specified before you can begin using Continuous Integration and Delivery.').html_safe % { ci_file: ci_file_formatted }
 
           = f.submit 'Save changes', class: "btn btn-success prepend-top-15"