1 files changed, 20 insertions, 21 deletions
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue b/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
index 90402a89280..7f927498fa1 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlEmptyState } from '@gitlab/ui';
 import { __ } from '~/locale';
 import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 
@@ -7,6 +7,7 @@ export default {
   components: {
     GlButton,
     GlSprintf,
+    GlEmptyState,
     PipelineEditorFileNav,
   },
   i18n: {
@@ -40,24 +41,22 @@ export default {
 <template>
   <div>
     <pipeline-editor-file-nav v-on="$listeners" />
-    <div class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-mt-11">
-      <img :src="emptyStateIllustrationPath" />
-      <div
-        v-if="usesExternalConfig"
-        class="gl-display-flex gl-flex-direction-column gl-align-items-center"
-      >
-        <h1 class="gl-font-size-h1">{{ $options.i18n.externalCiNote }}</h1>
-        <p class="gl-mt-3">{{ $options.i18n.externalCiInstructions }}</p>
-      </div>
-      <div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center">
-        <h1 class="gl-font-size-h1">{{ $options.i18n.title }}</h1>
-        <p class="gl-mt-3">
-          <gl-sprintf :message="$options.i18n.body">
-            <template #code="{ content }">
-              <code>{{ content }}</code>
-            </template>
-          </gl-sprintf>
-        </p>
+    <gl-empty-state
+      v-if="usesExternalConfig"
+      :title="$options.i18n.externalCiNote"
+      :description="$options.i18n.externalCiInstructions"
+      :svg-path="emptyStateIllustrationPath"
+    />
+
+    <gl-empty-state v-else :title="$options.i18n.title" :svg-path="emptyStateIllustrationPath">
+      <template #description>
+        <gl-sprintf :message="$options.i18n.body">
+          <template #code="{ content }">
+            <code>{{ content }}</code>
+          </template>
+        </gl-sprintf>
+      </template>
+      <template #actions>
         <gl-button
           variant="confirm"
           class="gl-mt-3"
@@ -66,7 +65,7 @@ export default {
         >
           {{ $options.i18n.btnText }}
         </gl-button>
-      </div>
-    </div>
+      </template>
+    </gl-empty-state>
   </div>
 </template>