Use utility classes in job app

Replace classes  in the build.scss
file for utility based ones

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

@@ -201,7 +201,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation prepend-top-20" />
+    <gl-loading-icon v-if="isLoading" size="lg" class="qa-loading-animation gl-mt-6" />
 
     <template v-else-if="shouldRenderContent">
       <div class="build-page" data-testid="job-content">
@@ -272,17 +272,17 @@ export default {
 
         <div
           v-if="job.archived"
-          class="gl-mt-3 archived-job"
-          :class="{ 'sticky-top border-bottom-0': hasTrace }"
+          class="gl-mt-3 gl-py-2 gl-px-3 gl-align-items-center gl-z-index-1 gl-m-auto archived-job"
+          :class="{ 'sticky-top gl-border-bottom-0': hasTrace }"
           data-testid="archived-job"
         >
-          <gl-icon name="lock" class="align-text-bottom" />
+          <gl-icon name="lock" class="gl-vertical-align-bottom" />
           {{ __('This job is archived. Only the complete pipeline can be retried.') }}
         </div>
         <!-- job log -->
         <div
           v-if="hasTrace"
-          class="build-trace-container position-relative"
+          class="build-trace-container gl-relative"
           :class="{ 'gl-mt-3': !job.archived }"
         >
           <log-top-bar

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

@@ -41,7 +41,7 @@ export default {
 
 <template>
   <div
-    class="build-job position-relative"
+    class="build-job gl-relative"
     :class="{
       retried: job.retried,
       active: isActive,
@@ -56,7 +56,7 @@ export default {
       <gl-icon
         v-if="isActive"
         name="arrow-right"
-        class="js-arrow-right icon-arrow-right position-absolute d-block"
+        class="js-arrow-right icon-arrow-right gl-absolute gl-display-block"
       />
 
       <ci-icon :status="job.status" />

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

@@ -69,7 +69,10 @@ export default {
 <template>
   <div class="top-bar">
     <!-- truncate information -->
-    <div class="truncated-info d-none d-sm-block float-left" data-testid="log-truncated-info">
+    <div
+      class="truncated-info gl-display-none gl-sm-display-block gl-float-left"
+      data-testid="log-truncated-info"
+    >
       <template v-if="isTraceSizeVisible">
         {{ jobLogSize }}
         <gl-link
@@ -83,7 +86,7 @@ export default {
     </div>
     <!-- eo truncate information -->
 
-    <div class="controllers float-right">
+    <div class="controllers gl-float-right">
       <!-- links -->
       <gl-button
         v-if="rawPath"

app/assets/stylesheets/page_bundles/build.scss

@@ -11,10 +11,6 @@
     color: var(--orange-600, $orange-600);
     background-color: var(--orange-50, $orange-50);
     border: 1px solid var(--border-color, $border-color);
-    padding: 3px 12px;
-    margin: auto;
-    align-items: center;
-    z-index: 1;
 
     .with-performance-bar & {
       top: $header-height + $performance-bar-height;