1 files changed, 12 insertions, 10 deletions
diff --git a/app/assets/javascripts/packages/shared/components/publish_method.vue b/app/assets/javascripts/packages/shared/components/publish_method.vue
index 1e18562a421..d17e23c4032 100644
--- a/app/assets/javascripts/packages/shared/components/publish_method.vue
+++ b/app/assets/javascripts/packages/shared/components/publish_method.vue
@@ -36,26 +36,28 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-items-center text-secondary order-1 order-md-0 mb-md-1">
+  <div class="gl-display-flex gl-align-items-center">
     <template v-if="hasPipeline">
-      <gl-icon name="git-merge" class="mr-1" />
-      <strong ref="pipeline-ref" class="mr-1 text-dark">{{ packageEntity.pipeline.ref }}</strong>
+      <gl-icon name="git-merge" class="gl-mr-2" />
+      <span data-testid="pipeline-ref" class="gl-mr-2">{{ packageEntity.pipeline.ref }}</span>
 
-      <gl-icon name="commit" class="mr-1" />
-      <gl-link ref="pipeline-sha" :href="linkToCommit" class="mr-1">{{ packageShaShort }}</gl-link>
+      <gl-icon name="commit" class="gl-mr-2" />
+      <gl-link data-testid="pipeline-sha" :href="linkToCommit" class="gl-mr-2">{{
+        packageShaShort
+      }}</gl-link>
 
       <clipboard-button
         :text="packageEntity.pipeline.sha"
         :title="__('Copy commit SHA')"
-        css-class="border-0 text-secondary py-0 px-1"
+        css-class="gl-border-0 gl-py-0 gl-px-2"
       />
     </template>
 
     <template v-else>
-      <gl-icon name="upload" class="mr-1" />
-      <strong ref="manual-ref" class="text-dark">{{
-        s__('PackageRegistry|Manually Published')
-      }}</strong>
+      <gl-icon name="upload" class="gl-mr-2" />
+      <span data-testid="manually-published">
+        {{ s__('PackageRegistry|Manually Published') }}
+      </span>
     </template>
   </div>
 </template>