Remove btn-build class

This change removes the .btn-build in favor of using the current
pajamas classe for buttons. It adds a .btn-group to the jobs view
where needed.

app/assets/stylesheets/framework/buttons.scss

@@ -348,14 +348,6 @@
   }
 }
 
-.btn-build {
-  margin-left: 10px;
-
-  svg {
-    fill: $gl-text-color-secondary;
-  }
-}
-
 .clone-dropdown-btn a {
   color: $gray-700;
 

app/views/projects/artifacts/_artifact.html.haml

@@ -50,12 +50,12 @@
     .table-action-buttons
       .btn-group
         - if can?(current_user, :read_build, @project)
-          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-default btn-build has-tooltip ml-0' do
+          = link_to download_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', download: '', title: _('Download artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Download artifacts') }, class: 'gl-button btn btn-default btn-default-secondary btn-icon has-tooltip' do
             = sprite_icon('download')
 
-          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-default btn-build has-tooltip' do
+          = link_to browse_project_job_artifacts_path(@project, artifact.job), rel: 'nofollow', title: _('Browse artifacts'), data: { placement: 'top', container: 'body' }, ref: 'tooltip', aria: { label: _('Browse artifacts') }, class: 'gl-button btn btn-default btn-default-secondary btn-icon has-tooltip' do
             = sprite_icon('folder-open')
 
         - if can?(current_user, :destroy_artifacts, @project)
-          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger has-tooltip' do
+          = link_to project_artifact_path(@project, artifact), data: { placement: 'top', container: 'body', confirm: _('Are you sure you want to delete these artifacts?') }, method: :delete, title: _('Delete artifacts'), ref: 'tooltip', aria: { label: _('Delete artifacts') }, class: 'gl-button btn btn-danger btn-icon has-tooltip' do
             = sprite_icon('remove')

app/views/projects/ci/builds/_build.html.haml

@@ -98,16 +98,16 @@
 
   %td
     .gl-display-flex
-      - if can?(current_user, :read_job_artifacts, job) && job.artifacts?
-        = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), class: 'btn btn-build btn-default gl-button btn-icon btn-svg' do
-          = sprite_icon('download')
-      - if can?(current_user, :update_build, job)
-        - if job.active?
-          = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'btn gl-button btn-build btn-default' do
-            = sprite_icon('close')
-        - elsif job.scheduled?
-          .btn-group
-            .btn.gl-button.btn-default{ disabled: true }
+      .btn-group
+        - if can?(current_user, :read_job_artifacts, job) && job.artifacts?
+          = link_to download_project_job_artifacts_path(job.project, job), rel: 'nofollow', download: '', title: _('Download artifacts'), class: 'gl-button btn btn-default btn-default-secondary btn-icon' do
+            = sprite_icon('download')
+        - if can?(current_user, :update_build, job)
+          - if job.active?
+            = link_to cancel_project_job_path(job.project, job, continue: { to: request.fullpath }), method: :post, title: _('Cancel'), class: 'gl-button btn btn-default btn-default-secondary btn-icon' do
+              = sprite_icon('close')
+          - elsif job.scheduled?
+            .gl-button.btn.btn-default.btn-default-secondary.btn-icon.disabled{ disabled: true }
               = sprite_icon('planning')
               %time.js-remaining-time{ datetime: job.scheduled_at.utc.iso8601 }
                 = duration_in_numbers(job.execute_in)
@@ -115,18 +115,18 @@
             = link_to play_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Start now'),
-              class: 'btn gl-button btn-default btn-build has-tooltip',
+              class: 'gl-button btn btn-default btn-default-secondary btn-icon has-tooltip',
               data: { confirm: confirmation_message } do
               = sprite_icon('play')
             = link_to unschedule_project_job_path(job.project, job, return_to: request.original_url),
               method: :post,
               title: s_('DelayedJobs|Unschedule'),
-              class: 'btn gl-button btn-default btn-build has-tooltip' do
+              class: 'gl-button btn btn-default btn-default-secondary btn-icon has-tooltip' do
               = sprite_icon('time-out')
-        - elsif allow_retry
-          - if job.playable? && !admin && can?(current_user, :update_build, job)
-            = link_to play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), class: 'btn gl-button btn-build btn-default' do
-              = custom_icon('icon_play')
-          - elsif job.retryable?
-            = link_to retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), class: 'btn btn-build gl-button btn-icon btn-default' do
-              = sprite_icon('repeat', css_class: 'gl-icon')
+          - elsif allow_retry
+            - if job.playable? && !admin && can?(current_user, :update_build, job)
+              = link_to play_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Play'), class: 'gl-button btn btn-default btn-default-secondary btn-icon' do
+                = sprite_icon('play')
+            - elsif job.retryable?
+              = link_to retry_project_job_path(job.project, job, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-default-secondary btn-icon' do
+                = sprite_icon('repeat', css_class: 'gl-icon')

app/views/projects/deployments/_rollback.haml

 - if deployment.deployable && can?(current_user, :create_deployment, deployment)
   - tooltip = deployment.last? ? s_('Environments|Re-deploy to environment') : s_('Environments|Rollback environment')
-  = button_tag class: 'btn gl-button btn-default btn-build has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do
+  = button_tag class: 'gl-button btn btn-default btn-default-secondary btn-icon has-tooltip', type: 'button', data: { toggle: 'modal', target: "#confirm-rollback-modal-#{deployment.id}" }, title: tooltip do
     - if deployment.last?
       = sprite_icon('repeat')
     - else

app/views/projects/pipelines/_with_tabs.html.haml

@@ -67,8 +67,8 @@
                 = build.present.callout_failure_message
               %td.responsive-table-cell.build-actions
                 - if can?(current_user, :update_build, job) && job.retryable?
-                  = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'btn btn-build gl-button btn-icon btn-default' do
-                    = sprite_icon('repeat', css_class: 'gl-icon')
+                  = link_to retry_project_job_path(build.project, build, return_to: request.original_url), method: :post, title: _('Retry'), class: 'gl-button btn btn-default btn-default-secondary btn-icon' do
+                    = sprite_icon('repeat')
             - if can?(current_user, :read_build, job)
               %tr.build-trace-row.responsive-table-border-end
                 %td

changelogs/unreleased/300263-remove-btn-build-class.yml

+---
+title: Align action buttons in jobs page. Reduce icon buttons width in jobs, artifacts
+  and environment pages.
+merge_request: 53155
+author:
+type: changed