1 files changed, 26 insertions, 28 deletions
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
index 8389c2a5104..7ab48da1a9d 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary_table.vue
@@ -34,33 +34,31 @@ export default {
 
 <template>
   <div>
-    <div class="row gl-mt-3">
-      <div class="col-12">
-        <h4>{{ heading }}</h4>
-      </div>
+    <div class="gl-mt-5">
+      <h4>{{ heading }}</h4>
     </div>
 
-    <div v-if="hasSuites" class="test-reports-table gl-mb-3 js-test-suites-table">
-      <div role="row" class="gl-responsive-table-row table-row-header font-weight-bold">
-        <div role="rowheader" class="table-section section-25 pl-3">
+    <div v-if="hasSuites" class="js-test-suites-table">
+      <div role="row" class="gl-responsive-table-row table-row-header gl-font-weight-bold">
+        <div role="rowheader" class="table-section section-25 gl-pl-5">
           {{ __('Job') }}
         </div>
         <div role="rowheader" class="table-section section-25">
           {{ __('Duration') }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Failed') }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Errors'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Skipped'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 text-center">
+        <div role="rowheader" class="table-section section-10 gl-text-center">
           {{ __('Passed'), }}
         </div>
-        <div role="rowheader" class="table-section section-10 pr-3 text-right">
+        <div role="rowheader" class="table-section section-10 gl-pr-5 gl-text-right">
           {{ __('Total') }}
         </div>
       </div>
@@ -69,17 +67,17 @@ export default {
         v-for="(testSuite, index) in getTestSuites"
         :key="index"
         role="row"
-        class="gl-responsive-table-row test-reports-summary-row rounded js-suite-row"
+        class="gl-responsive-table-row gl-rounded-base js-suite-row"
         :class="{
-          'gl-responsive-table-row-clickable cursor-pointer': !testSuite.suite_error,
+          'gl-responsive-table-row-clickable gl-cursor-pointer': !testSuite.suite_error,
         }"
         @click="tableRowClick(index)"
       >
         <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Suite') }}
           </div>
-          <div class="table-mobile-content underline cgray pl-3">
+          <div class="table-mobile-content underline gl-text-gray-900 gl-pl-5">
             {{ testSuite.name }}
             <gl-icon
               v-if="testSuite.suite_error"
@@ -93,44 +91,44 @@ export default {
         </div>
 
         <div class="table-section section-25">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Duration') }}
           </div>
-          <div class="table-mobile-content text-md-left">
+          <div class="table-mobile-content gl-text-left">
             {{ testSuite.formattedTime }}
           </div>
         </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Failed') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.failed_count }}</div>
         </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Errors') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.error_count }}</div>
         </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Skipped') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.skipped_count }}</div>
         </div>
 
-        <div class="table-section section-10 text-center">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-center">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Passed') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.success_count }}</div>
         </div>
 
-        <div class="table-section section-10 text-right pr-md-3">
-          <div role="rowheader" class="table-mobile-header font-weight-bold">
+        <div class="table-section section-10 gl-text-right pr-md-3">
+          <div role="rowheader" class="table-mobile-header gl-font-weight-bold">
             {{ __('Total') }}
           </div>
           <div class="table-mobile-content">{{ testSuite.total_count }}</div>