Audit and update buttons on Projects::JobsController#show

app/assets/javascripts/jobs/components/job_log_controllers.vue

 <script>
-/* eslint-disable vue/no-v-html */
 import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
-import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
@@ -13,7 +11,6 @@ export default {
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-  scrollDown,
   props: {
     erasePath: {
       type: String,
@@ -87,7 +84,6 @@ export default {
         v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
-        class="controllers-buttons"
         data-testid="job-raw-link-controller"
         icon="doc-text"
       />
@@ -98,7 +94,7 @@ export default {
         :title="s__('Job|Erase job log')"
         :href="erasePath"
         :data-confirm="__('Are you sure you want to erase this build?')"
-        class="controllers-buttons"
+        class="gl-ml-3"
         data-testid="job-log-erase-link"
         data-method="post"
         icon="remove"
@@ -106,25 +102,24 @@ export default {
       <!-- eo links -->
 
       <!-- scroll buttons -->
-      <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
+      <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="gl-ml-3">
         <gl-button
           :disabled="isScrollTopDisabled"
-          class="btn-scroll btn-transparent btn-blank"
+          class="btn-scroll"
           data-testid="job-controller-scroll-top"
           icon="scroll_up"
           @click="handleScrollToTop"
         />
       </div>
 
-      <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
+      <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="gl-ml-3">
         <gl-button
           :disabled="isScrollBottomDisabled"
-          class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
+          class="js-scroll-bottom btn-scroll"
           data-testid="job-controller-scroll-bottom"
           icon="scroll_down"
           :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
-          v-html="$options.scrollDown"
         />
       </div>
       <!-- eo scroll buttons -->

app/assets/javascripts/jobs/components/job_sidebar_retry_button.vue

@@ -36,10 +36,10 @@ export default {
     v-gl-modal="modalId"
     :aria-label="$options.i18n.retryLabel"
     category="primary"
-    variant="info"
+    variant="confirm"
     >{{ $options.i18n.retryLabel }}</gl-button
   >
-  <gl-link v-else :href="href" data-method="post" rel="nofollow"
+  <gl-link v-else :href="href" class="btn gl-button btn-confirm" data-method="post" rel="nofollow"
     >{{ $options.i18n.retryLabel }}
   </gl-link>
 </template>

app/assets/javascripts/jobs/svg/scroll_down.svg

-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path class="scroll-arrow" d="M8 10.4142L4.29289 6.70711C3.90237 6.31658 3.90237 5.68342 4.29289 5.2929C4.68342 4.90237 5.31658 4.90237 5.70711 5.2929L7 6.58579L7 1C7 0.447715 7.44772 0 8 0C8.55229 0 9 0.447715 9 1L9 6.58579L10.2929 5.2929C10.6834 4.90237 11.3166 4.90237 11.7071 5.2929C12.0976 5.68342 12.0976 6.31658 11.7071 6.70711L8 10.4142Z"/>
-<path class="scroll-dot" d="M8 16C9.10457 16 10 15.1046 10 14C10 12.8954 9.10457 12 8 12C6.89543 12 6 12.8954 6 14C6 15.1046 6.89543 16 8 16Z"/>
-</svg>

app/assets/javascripts/vue_shared/components/header_ci_component.vue

@@ -102,7 +102,7 @@ export default {
     data-qa-selector="pipeline_header"
     data-testid="ci-header-content"
   >
-    <section class="header-main-content">
+    <section class="header-main-content gl-mr-3">
       <ci-icon-badge :status="status" />
 
       <strong data-testid="ci-header-item-text"> {{ itemName }} #{{ itemId }} </strong>
@@ -142,12 +142,16 @@ export default {
       </template>
     </section>
 
-    <section v-if="$slots.default" data-testid="ci-header-action-buttons" class="gl-display-flex">
+    <section
+      v-if="$slots.default"
+      data-testid="ci-header-action-buttons"
+      class="gl-display-flex gl-mr-3"
+    >
       <slot></slot>
     </section>
     <gl-button
       v-if="hasSidebarButton"
-      class="d-sm-none js-sidebar-build-toggle gl-ml-auto"
+      class="gl-md-display-none gl-ml-auto gl-align-self-start js-sidebar-build-toggle"
       icon="chevron-double-lg-left"
       :aria-label="__('Toggle sidebar')"
       @click="onClickSidebarButton"

changelogs/unreleased/273296-fy21q4-foundations-kr2-audit-and-update-buttons-on-projects-jobsco.yml

+---
+title: Update buttons on a job page to conform to the Pajamas design system
+merge_request: 55858
+author:
+type: other

spec/frontend/jobs/components/job_sidebar_retry_button_spec.js

@@ -54,7 +54,7 @@ describe('Job Sidebar Retry Button', () => {
 
       expect(findRetryButton().attributes()).toMatchObject({
         category: 'primary',
-        variant: 'info',
+        variant: 'confirm',
       });
     });
   });