Apply new GitLab UI for toggle buttons in CI/CD settings page

app/views/ci/variables/_header.html.haml

@@ -3,7 +3,7 @@
 %h4
   = _('Variables')
 
-%button.btn.btn-default.js-settings-toggle{ type: 'button' }
+%button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
   = expanded ? _('Collapse') : _('Expand')
 
 %p

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

@@ -54,4 +54,4 @@
                     = s_('CICD|Automatic deployment to staging, manual deployment to production')
                     = link_to sprite_icon('question-o'), help_page_path('topics/autodevops/customize.md', anchor: 'incremental-rollout-to-production'), target: '_blank'
 
-          = f.submit _('Save changes'), class: "btn btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }
+          = f.submit _('Save changes'), class: "btn gl-button btn-success gl-mt-5", data: { qa_selector: 'save_changes_button' }

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

@@ -9,7 +9,7 @@
   .settings-header
     %h4
       = _("General pipelines")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Customize your pipeline configuration and coverage report.")
@@ -20,7 +20,7 @@
   .settings-header
     %h4
       = s_('CICD|Auto DevOps')
-    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       - auto_devops_url = help_page_path('topics/autodevops/index')
@@ -37,7 +37,7 @@
   .settings-header
     %h4
       = _("Runners")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Runners are processes that pick up and execute CI/CD jobs for GitLab.")
@@ -49,7 +49,7 @@
   .settings-header
     %h4
       = _("Artifacts")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("A job artifact is an archive of files and directories saved by a job when it finishes.")
@@ -66,7 +66,7 @@
   .settings-header
     %h4
       = _("Pipeline triggers")
-    %button.btn.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       = _("Trigger a pipeline for a branch or tag by generating a trigger token and using it with an API call. The token impersonates a user's project access and permissions.")
@@ -79,7 +79,7 @@
     .settings-header
       %h4
         = _("Clean up image tags")
-      %button.btn.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         = _("Save space and find images in the Container Registry. Remove unneeded tags and keep only the ones you want.")
@@ -94,7 +94,7 @@
     .settings-header
       %h4
         = _("Deploy freezes")
-      %button.btn.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         - freeze_period_docs = help_page_path('user/project/releases/index', anchor: 'prevent-unintentional-releases-by-setting-a-deploy-freeze')

changelogs/unreleased/gl-button-ci-cd.yml

+---
+title: Apply new GitLab UI for toggle buttons in CI/CD settings page
+merge_request: 53556
+author: Yogi (@yo)
+type: other

ee/app/views/projects/settings/ci_cd/_auto_rollback.html.haml

@@ -3,7 +3,7 @@
     .settings-header
       %h4
         = _("Automatic deployment rollbacks")
-      %button.gl-button.btn.js-settings-toggle{ type: 'button' }
+      %button.gl-button.btn-default.btn.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         = s_('AutoRollback|Automatically roll back to the last successful deployment when a critical problem is detected.')

ee/app/views/projects/settings/ci_cd/_pipeline_subscriptions.html.haml

@@ -6,7 +6,7 @@
   .settings-header
     %h4
       = _("Pipeline subscriptions")
-    %button.btn.gl-button.js-settings-toggle{ type: 'button' }
+    %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
       = expanded ? _('Collapse') : _('Expand')
     %p
       - default_branch_docs = link_to(_("default branch"), help_page_path('user/project/repository/branches/index.md', anchor: 'default-branch'))

ee/app/views/projects/settings/ci_cd/_protected_environments.html.haml

@@ -6,7 +6,7 @@
     .settings-header
       %h4
         = _('Protected environments')
-      %button.btn.gl-button.js-settings-toggle{ type: 'button' }
+      %button.btn.gl-button.btn-default.js-settings-toggle{ type: 'button' }
         = expanded ? _('Collapse') : _('Expand')
       %p
         = s_('ProtectedEnvironment|Only specified users can execute deployments in a protected environment.')