Fix style issues in job details sidebar

This commit fixes a number of minor style issues in the job details
sidebar - spacing, font weights, button sizes, and font sizes.

More details here:
https://gitlab.com/gitlab-org/gitlab-ce/issues/54814

7 files changed, 58 insertions, 61 deletions

diff --git a/app/assets/javascripts/jobs/components/artifacts_block.vue b/app/assets/javascripts/jobs/components/artifacts_block.vue
index 309b7427b9e..0bce860df91 100644
--- a/app/assets/javascripts/jobs/components/artifacts_block.vue
+++ b/app/assets/javascripts/jobs/components/artifacts_block.vue
@@ -28,27 +28,29 @@ export default {
 </script>
 <template>
   <div class="block">
-    <div class="title">{{ s__('Job|Job artifacts') }}</div>
+    <div class="title font-weight-bold">{{ s__('Job|Job artifacts') }}</div>
 
-    <p v-if="isExpired" class="js-artifacts-removed build-detail-row">
-      {{ s__('Job|The artifacts were removed') }}
+    <p
+      v-if="isExpired || willExpire"
+      :class="{
+        'js-artifacts-removed': isExpired,
+        'js-artifacts-will-be-removed': willExpire,
+      }"
+      class="build-detail-row"
+    >
+      <span v-if="isExpired">{{ s__('Job|The artifacts were removed') }}</span>
+      <span v-if="willExpire">{{ s__('Job|The artifacts will be removed') }}</span>
+      <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" />
     </p>
 
-    <p v-else-if="willExpire" class="js-artifacts-will-be-removed build-detail-row">
-      {{ s__('Job|The artifacts will be removed in') }}
-    </p>
-
-    <timeago-tooltip v-if="artifact.expire_at" :time="artifact.expire_at" />
-
-    <div class="btn-group d-flex" role="group">
+    <div class="btn-group d-flex prepend-top-10" role="group">
       <gl-link
         v-if="artifact.keep_path"
         :href="artifact.keep_path"
         class="js-keep-artifacts btn btn-sm btn-default"
         data-method="post"
+        >{{ s__('Job|Keep') }}</gl-link
       >
-        {{ s__('Job|Keep') }}
-      </gl-link>
 
       <gl-link
         v-if="artifact.download_path"
@@ -56,17 +58,15 @@ export default {
         class="js-download-artifacts btn btn-sm btn-default"
         download
         rel="nofollow"
+        >{{ s__('Job|Download') }}</gl-link
       >
-        {{ s__('Job|Download') }}
-      </gl-link>
 
       <gl-link
         v-if="artifact.browse_path"
         :href="artifact.browse_path"
         class="js-browse-artifacts btn btn-sm btn-default"
+        >{{ s__('Job|Browse') }}</gl-link
       >
-        {{ s__('Job|Browse') }}
-      </gl-link>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/commit_block.vue b/app/assets/javascripts/jobs/components/commit_block.vue
index 3b9c61bd48c..e0f55518eef 100644
--- a/app/assets/javascripts/jobs/components/commit_block.vue
+++ b/app/assets/javascripts/jobs/components/commit_block.vue
@@ -31,12 +31,12 @@ export default {
       block: !isLastBlock,
     }"
   >
-    <p>
-      {{ __('Commit') }}
+    <p class="append-bottom-5">
+      <span class="font-weight-bold">{{ __('Commit') }}</span>
 
-      <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">{{
-        commit.short_id
-      }}</gl-link>
+      <gl-link :href="commit.commit_path" class="js-commit-sha commit-sha link-commit">
+        {{ commit.short_id }}
+      </gl-link>
 
       <clipboard-button
         :text="commit.short_id"
@@ -44,11 +44,14 @@ export default {
         css-class="btn btn-clipboard btn-transparent"
       />
 
-      <gl-link v-if="mergeRequest" :href="mergeRequest.path" class="js-link-commit link-commit"
-        >!{{ mergeRequest.iid }}</gl-link
-      >
+      <span v-if="mergeRequest">
+        {{ __('in') }}
+        <gl-link :href="mergeRequest.path" class="js-link-commit link-commit"
+          >!{{ mergeRequest.iid }}</gl-link
+        >
+      </span>
     </p>
 
-    <p class="build-light-text append-bottom-0">{{ commit.title }}</p>
+    <p class="append-bottom-0">{{ commit.title }}</p>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index 934ecd0e3ec..ad3e7dabc79 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -110,22 +110,20 @@ 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">
-          <strong class="inline prepend-top-8"> {{ job.name }} </strong>
+        <div class="block d-flex align-items-center">
+          <h4 class="flex-grow-1 prepend-top-8 m-0">{{ job.name }}</h4>
           <gl-link
             v-if="job.retry_path"
             :class="retryButtonClass"
             :href="job.retry_path"
             data-method="post"
             rel="nofollow"
+            >{{ __('Retry') }}</gl-link
           >
-            {{ __('Retry') }}
-          </gl-link>
           <gl-link
             v-if="job.terminal_path"
             :href="job.terminal_path"
-            class="js-terminal-link pull-right btn btn-primary
-      btn-inverted visible-md-block visible-lg-block"
+            class="js-terminal-link pull-right btn btn-primary btn-inverted visible-md-block visible-lg-block"
             target="_blank"
           >
             {{ __('Debug') }} <icon name="external-link" />
@@ -133,8 +131,7 @@ export default {
           <gl-button
             :aria-label="__('Toggle Sidebar')"
             type="button"
-            class="btn btn-blank gutter-toggle
-        float-right d-block d-md-none js-sidebar-build-toggle"
+            class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
             @click="toggleSidebar"
           >
             <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
@@ -145,25 +142,18 @@ export default {
             v-if="job.new_issue_path"
             :href="job.new_issue_path"
             class="js-new-issue btn btn-success btn-inverted"
+            >{{ __('New issue') }}</gl-link
           >
-            {{ __('New issue') }}
-          </gl-link>
           <gl-link
             v-if="job.retry_path"
             :href="job.retry_path"
             class="js-retry-job btn btn-inverted-secondary"
             data-method="post"
             rel="nofollow"
+            >{{ __('Retry') }}</gl-link
           >
-            {{ __('Retry') }}
-          </gl-link>
         </div>
         <div :class="{ block: renderBlock }">
-          <p v-if="job.merge_request" class="build-detail-row js-job-mr">
-            <span class="build-light-text"> {{ __('Merge Request:') }} </span>
-            <gl-link :href="job.merge_request.path"> !{{ job.merge_request.iid }} </gl-link>
-          </p>
-
           <detail-row
             v-if="job.duration"
             :value="duration"
@@ -198,10 +188,10 @@ export default {
             title="Coverage"
           />
           <p v-if="job.tags.length" class="build-detail-row js-job-tags">
-            <span class="build-light-text"> {{ __('Tags:') }} </span>
-            <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary">
-              {{ tag }}
-            </span>
+            <span class="font-weight-bold">{{ __('Tags:') }}</span>
+            <span v-for="(tag, i) in job.tags" :key="i" class="badge badge-primary mr-1">{{
+              tag
+            }}</span>
           </p>
 
           <div v-if="job.cancel_path" class="btn-group prepend-top-5" role="group">
@@ -210,9 +200,8 @@ export default {
               class="js-cancel-job btn btn-sm btn-default"
               data-method="post"
               rel="nofollow"
+              >{{ __('Cancel') }}</gl-link
             >
-              {{ __('Cancel') }}
-            </gl-link>
           </div>
         </div>
 
diff --git a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
index 77be295e802..b826007ec2c 100644
--- a/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
+++ b/app/assets/javascripts/jobs/components/sidebar_detail_row.vue
@@ -34,8 +34,7 @@ export default {
 </script>
 <template>
   <p class="build-detail-row">
-    <span v-if="hasTitle" class="build-light-text"> {{ title }}: </span> {{ value }}
-
+    <span v-if="hasTitle" class="font-weight-bold">{{ title }}:</span> {{ value }}
     <span v-if="hasHelpURL" class="help-button float-right">
       <gl-link :href="helpUrl" target="_blank" rel="noopener noreferrer nofollow">
         <i class="fa fa-question-circle" aria-hidden="true"></i>
diff --git a/app/assets/javascripts/jobs/components/stages_dropdown.vue b/app/assets/javascripts/jobs/components/stages_dropdown.vue
index 90482500bbf..7f79e92067f 100644
--- a/app/assets/javascripts/jobs/components/stages_dropdown.vue
+++ b/app/assets/javascripts/jobs/components/stages_dropdown.vue
@@ -38,11 +38,11 @@ export default {
   <div class="block-last dropdown">
     <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
-    {{ __('Pipeline') }}
-    <a :href="pipeline.path" class="js-pipeline-path link-commit"> #{{ pipeline.id }} </a>
+    <span class="font-weight-bold">{{ __('Pipeline') }}</span>
+    <a :href="pipeline.path" class="js-pipeline-path link-commit">#{{ pipeline.id }}</a>
     <template v-if="hasRef">
       {{ __('from') }}
-      <a :href="pipeline.ref.path" class="link-commit ref-name"> {{ pipeline.ref.name }} </a>
+      <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>
     </template>
 
     <button
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 3cd3b743108..997737b3e23 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -43,23 +43,24 @@ export default {
 
 <template>
   <div class="build-widget block">
-    <h4 class="title">{{ __('Trigger') }}</h4>
-
     <p
       v-if="trigger.short_token"
       class="js-short-token"
-      :class="{ 'append-bottom-0': !hasVariables }"
+      :class="{ 'append-bottom-5': hasVariables, 'append-bottom-0': !hasVariables }"
     >
-      <span class="build-light-text"> {{ __('Token') }} </span> {{ trigger.short_token }}
+      <span class="font-weight-bold">{{ __('Trigger token:') }}</span> {{ trigger.short_token }}
     </p>
 
     <template v-if="hasVariables">
       <p class="trigger-variables-btn-container">
-        <span class="build-light-text"> {{ __('Variables:') }} </span>
+        <span class="font-weight-bold">{{ __('Trigger variables:') }}</span>
 
-        <gl-button v-if="hasValues" class="group js-reveal-variables" @click="toggleValues">
-          {{ getToggleButtonText }}
-        </gl-button>
+        <gl-button
+          v-if="hasValues"
+          class="btn-sm group js-reveal-variables trigger-variables-btn"
+          @click="toggleValues"
+          >{{ getToggleButtonText }}</gl-button
+        >
       </p>
 
       <table class="js-build-variables trigger-build-variables">
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 57918eafd6f..c7dde2f0f2a 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -232,6 +232,11 @@
     @extend .d-flex;
     justify-content: space-between;
     align-items: center;
+
+    .trigger-variables-btn {
+      margin-top: -5px;
+      margin-bottom: -5px;
+    }
   }
 
   .trigger-build-variables {