Updated to use new utility classes

Changed classes throughout package_title.vue
Updated test snapshots

ee/app/assets/javascripts/packages/details/components/package_title.vue

@@ -36,8 +36,8 @@ export default {
       {{ packageEntity.name }}
     </h1>
 
-    <div class="d-flex align-items-center text-secondary">
-      <gl-icon name="eye" class="append-right-8" />
+    <div class="gl-display-flex gl-align-items-center text-secondary">
+      <gl-icon name="eye" class="gl-mr-3" />
       <gl-sprintf message="v%{version} published %{timeAgo}">
         <template #version>
           {{ packageEntity.version }}
@@ -51,18 +51,18 @@ export default {
       </gl-sprintf>
     </div>
 
-    <div class="d-flex flex-wrap align-items-center append-bottom-8">
-      <div v-if="packageTypeDisplay" class="d-flex align-items-center append-right-default">
-        <gl-icon name="package" class="text-secondary append-right-8" />
+    <div class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8">
+      <div v-if="packageTypeDisplay" class="gl-display-flex align-items-center gl-mr-5">
+        <gl-icon name="package" class="text-secondary gl-mr-3" />
         <span ref="package-type" class="font-weight-bold">{{ packageTypeDisplay }}</span>
       </div>
 
-      <div v-if="hasTagsToDisplay" class="d-flex align-items-center append-right-default">
+      <div v-if="hasTagsToDisplay" class="gl-display-flex gl-align-items-center gl-mr-5">
         <package-tags :tag-display-limit="1" :tags="packageEntity.tags" />
       </div>
 
-      <div v-if="packagePipeline" class="d-flex align-items-center append-right-default">
-        <gl-icon name="review-list" class="text-secondary append-right-8" />
+      <div v-if="packagePipeline" class="gl-display-flex gl-align-items-center gl-mr-5">
+        <gl-icon name="review-list" class="text-secondary gl-mr-3" />
         <gl-link
           ref="pipeline-project"
           :href="packagePipeline.project.web_url"
@@ -75,9 +75,9 @@ export default {
       <div
         v-if="packagePipeline"
         ref="package-ref"
-        class="d-flex align-items-center append-right-default"
+        class="gl-display-flex gl-align-items-center gl-mr-5"
       >
-        <gl-icon name="branch" class="text-secondary append-right-8" />
+        <gl-icon name="branch" class="text-secondary gl-mr-3" />
         <span
           v-gl-tooltip
           class="font-weight-bold text-truncate mw-xs"
@@ -86,8 +86,8 @@ export default {
         >
       </div>
 
-      <div class="d-flex align-items-center append-right-default">
-        <gl-icon name="disk" class="text-secondary append-right-8" />
+      <div class="gl-display-flex gl-align-items-center gl-mr-5">
+        <gl-icon name="disk" class="text-secondary gl-mr-3" />
         <span ref="package-size" class="font-weight-bold">{{ totalSize }}</span>
       </div>
     </div>

ee/spec/frontend/packages/details/components/__snapshots__/package_title_spec.js.snap

@@ -13,10 +13,10 @@ exports[`PackageTitle renders with tags 1`] = `
   </h1>
    
   <div
-    class="d-flex align-items-center text-secondary"
+    class="gl-display-flex gl-align-items-center text-secondary"
   >
     <gl-icon-stub
-      class="append-right-8"
+      class="gl-mr-3"
       name="eye"
       size="16"
     />
@@ -27,13 +27,13 @@ exports[`PackageTitle renders with tags 1`] = `
   </div>
    
   <div
-    class="d-flex flex-wrap align-items-center append-bottom-8"
+    class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
   >
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="package"
         size="16"
       />
@@ -46,7 +46,7 @@ exports[`PackageTitle renders with tags 1`] = `
     </div>
      
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <package-tags-stub
         tagdisplaylimit="1"
@@ -59,10 +59,10 @@ exports[`PackageTitle renders with tags 1`] = `
     <!---->
      
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="disk"
         size="16"
       />
@@ -90,10 +90,10 @@ exports[`PackageTitle renders without tags 1`] = `
   </h1>
    
   <div
-    class="d-flex align-items-center text-secondary"
+    class="gl-display-flex gl-align-items-center text-secondary"
   >
     <gl-icon-stub
-      class="append-right-8"
+      class="gl-mr-3"
       name="eye"
       size="16"
     />
@@ -104,13 +104,13 @@ exports[`PackageTitle renders without tags 1`] = `
   </div>
    
   <div
-    class="d-flex flex-wrap align-items-center append-bottom-8"
+    class="gl-display-flex flex-wrap gl-align-items-center append-bottom-8"
   >
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="package"
         size="16"
       />
@@ -129,10 +129,10 @@ exports[`PackageTitle renders without tags 1`] = `
     <!---->
      
     <div
-      class="d-flex align-items-center append-right-default"
+      class="gl-display-flex gl-align-items-center gl-mr-5"
     >
       <gl-icon-stub
-        class="text-secondary append-right-8"
+        class="text-secondary gl-mr-3"
         name="disk"
         size="16"
       />