1 files changed, 47 insertions, 27 deletions

diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index f63fe72a71a..fcf03dff34e 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlLink } from '@gitlab/ui';
+import { GlButton, GlIcon } from '@gitlab/ui';
 import { isEmpty } from 'lodash';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
@@ -20,12 +20,12 @@ export default {
   i18n: {
     ...JOB_SIDEBAR,
   },
+  borderTopClass: ['gl-border-t-solid', 'gl-border-t-1', 'gl-border-t-gray-100'],
   forwardDeploymentFailureModalId,
   components: {
     ArtifactsBlock,
     CommitBlock,
     GlButton,
-    GlLink,
     GlIcon,
     JobsContainer,
     JobSidebarRetryButton,
@@ -45,11 +45,8 @@ export default {
   computed: {
     ...mapGetters(['hasForwardDeploymentFailure']),
     ...mapState(['job', 'stages', 'jobs', 'selectedStage']),
-    retryButtonClass() {
-      let className = 'btn gl-button gl-text-decoration-none!';
-      className +=
-        this.job.status && this.job.recoverable ? ' btn-confirm' : ' btn-confirm-secondary';
-      return className;
+    retryButtonCategory() {
+      return this.job.status && this.job.recoverable ? 'primary' : 'secondary';
     },
     hasArtifact() {
       return !isEmpty(this.job.artifact);
@@ -76,71 +73,94 @@ export default {
   <aside class="right-sidebar build-sidebar" data-offset-top="101" data-spy="affix">
     <div class="sidebar-container">
       <div class="blocks-container">
-        <div class="block d-flex flex-nowrap align-items-center">
+        <div class="gl-py-5 gl-display-flex gl-align-items-center">
           <tooltip-on-truncate :title="job.name" truncate-target="child"
             ><h4 class="my-0 mr-2 gl-text-truncate">
               {{ job.name }}
             </h4>
           </tooltip-on-truncate>
-          <div class="flex-grow-1 flex-shrink-0 text-right">
+          <div class="gl-flex-grow-1 gl-flex-shrink-0 gl-text-right">
             <job-sidebar-retry-button
               v-if="job.retry_path"
-              :class="retryButtonClass"
+              :category="retryButtonCategory"
               :href="job.retry_path"
               :modal-id="$options.forwardDeploymentFailureModalId"
+              variant="confirm"
               data-qa-selector="retry_button"
               data-testid="retry-button"
             />
-            <gl-link
+            <gl-button
               v-if="job.cancel_path"
               :href="job.cancel_path"
-              class="btn gl-button btn-default gl-text-decoration-none!"
               data-method="post"
               data-testid="cancel-button"
               rel="nofollow"
               >{{ $options.i18n.cancel }}
-            </gl-link>
+            </gl-button>
           </div>
 
           <gl-button
             :aria-label="$options.i18n.toggleSidebar"
             category="tertiary"
-            class="gl-md-display-none gl-ml-2 js-sidebar-build-toggle"
+            class="gl-md-display-none gl-ml-2"
             icon="chevron-double-lg-right"
             @click="toggleSidebar"
           />
         </div>
 
-        <div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
-          <gl-link
+        <div
+          v-if="job.terminal_path || job.new_issue_path"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+        >
+          <gl-button
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
-            class="btn gl-button btn-success-secondary float-left mr-2 gl-text-decoration-none!"
+            category="secondary"
+            variant="confirm"
             data-testid="job-new-issue"
-            >{{ $options.i18n.newIssue }}
-          </gl-link>
-          <gl-link
+          >
+            {{ $options.i18n.newIssue }}
+          </gl-button>
+          <gl-button
             v-if="job.terminal_path"
             :href="job.terminal_path"
-            class="btn btn-primary btn-inverted visible-md-block visible-lg-block float-left"
             target="_blank"
             data-testid="terminal-link"
           >
             {{ $options.i18n.debug }}
-            <gl-icon :size="14" name="external-link" />
-          </gl-link>
+            <gl-icon name="external-link" />
+          </gl-button>
         </div>
-        <job-sidebar-details-container />
-        <artifacts-block v-if="hasArtifact" :artifact="job.artifact" :help-url="artifactHelpUrl" />
-        <trigger-block v-if="hasTriggers" :trigger="job.trigger" />
+
+        <job-sidebar-details-container class="gl-py-5" :class="$options.borderTopClass" />
+
+        <artifacts-block
+          v-if="hasArtifact"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+          :artifact="job.artifact"
+          :help-url="artifactHelpUrl"
+        />
+
+        <trigger-block
+          v-if="hasTriggers"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
+          :trigger="job.trigger"
+        />
+
         <commit-block
           :commit="commit"
-          :is-last-block="hasStages"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
           :merge-request="job.merge_request"
         />
 
         <stages-dropdown
           v-if="job.pipeline"
+          class="gl-py-5"
+          :class="$options.borderTopClass"
           :pipeline="job.pipeline"
           :selected-stage="selectedStage"
           :stages="stages"