1 files changed, 27 insertions, 24 deletions
diff --git a/app/assets/javascripts/ci/job_details/components/empty_state.vue b/app/assets/javascripts/ci/job_details/components/empty_state.vue
index 5756d4a71df..ac4f9c0c7fb 100644
--- a/app/assets/javascripts/ci/job_details/components/empty_state.vue
+++ b/app/assets/javascripts/ci/job_details/components/empty_state.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import ManualVariablesForm from '~/ci/job_details/components/manual_variables_form.vue';
 
 export default {
   components: {
-    GlLink,
+    GlButton,
     ManualVariablesForm,
   },
   props: {
@@ -65,35 +65,38 @@ export default {
 };
 </script>
 <template>
-  <div class="row empty-state">
-    <div class="col-12">
-      <div :class="illustrationSizeClass" class="svg-content">
-        <img :src="illustrationPath" />
-      </div>
+  <div class="gl-display-flex gl-empty-state gl-text-center gl-flex-direction-column">
+    <div :class="illustrationSizeClass" class="gl-max-w-full">
+      <!-- eslint-disable @gitlab/vue-require-i18n-attribute-strings -->
+      <img alt="" class="gl-max-w-full" :src="illustrationPath" />
     </div>
-
-    <div class="col-12">
-      <div class="text-content">
-        <h4 class="text-center" data-testid="job-empty-state-title">{{ title }}</h4>
-
-        <p v-if="content" data-testid="job-empty-state-content">{{ content }}</p>
-      </div>
+    <div class="gl-empty-state-content gl-mx-auto gl-my-0 gl-m-auto gl-p-5">
+      <h1
+        class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
+        data-testid="job-empty-state-title"
+      >
+        {{ title }}
+      </h1>
+      <p v-if="content" class="gl-mt-4 gl-mb-0" data-testid="job-empty-state-content">
+        {{ content }}
+      </p>
       <manual-variables-form
         v-if="shouldRenderManualVariables"
         :is-retryable="isRetryable"
         :job-id="jobId"
         @hideManualVariablesForm="$emit('hideManualVariablesForm')"
       />
-      <div v-if="action && !shouldRenderManualVariables" class="text-content">
-        <div class="text-center">
-          <gl-link
-            :href="action.path"
-            :data-method="action.method"
-            class="btn gl-button btn-confirm gl-text-decoration-none!"
-            data-testid="job-empty-state-action"
-            >{{ action.button_title }}</gl-link
-          >
-        </div>
+      <div
+        v-if="action && !shouldRenderManualVariables"
+        class="gl-display-flex gl-flex-wrap gl-mt-5 gl-justify-content-center"
+      >
+        <gl-button
+          :href="action.path"
+          :data-method="action.method"
+          variant="confirm"
+          data-testid="job-empty-state-action"
+          >{{ action.button_title }}</gl-button
+        >
       </div>
     </div>
   </div>