2 files changed, 19 insertions, 10 deletions
diff --git a/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue b/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
index 570954c7200..2ebde10c229 100644
--- a/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
+++ b/app/assets/javascripts/batch_comments/components/diff_file_drafts.vue
@@ -1,11 +1,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import imageDiff from '~/diffs/mixins/image_diff';
+import DesignNotePin from '~/vue_shared/components/design_management/design_note_pin.vue';
 import DraftNote from './draft_note.vue';
 
 export default {
   components: {
     DraftNote,
+    DesignNotePin,
   },
   mixins: [imageDiff],
   props: {
@@ -31,9 +33,12 @@ export default {
       class="discussion-notes diff-discussions position-relative"
     >
       <div class="notes">
-        <span class="d-block btn-transparent badge badge-pill is-draft js-diff-notes-index">
-          {{ toggleText(draft, index) }}
-        </span>
+        <design-note-pin
+          :label="toggleText(draft, index)"
+          is-draft
+          class="js-diff-notes-index gl-translate-x-n50"
+          size="sm"
+        />
         <draft-note :draft="draft" />
       </div>
     </div>
diff --git a/app/assets/javascripts/batch_comments/components/draft_note.vue b/app/assets/javascripts/batch_comments/components/draft_note.vue
index a218624f2d4..c8130c47f5b 100644
--- a/app/assets/javascripts/batch_comments/components/draft_note.vue
+++ b/app/assets/javascripts/batch_comments/components/draft_note.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlButton, GlSafeHtmlDirective, GlBadge } from '@gitlab/ui';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import NoteableNote from '~/notes/components/noteable_note.vue';
 import PublishButton from './publish_button.vue';
@@ -9,6 +9,7 @@ export default {
     NoteableNote,
     PublishButton,
     GlButton,
+    GlBadge,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -100,9 +101,7 @@ export default {
         @toggleResolveStatus="toggleResolveDiscussion(draft.id)"
       >
         <template #note-header-info>
-          <strong class="badge draft-pending-label gl-mr-2">
-            {{ __('Pending') }}
-          </strong>
+          <gl-badge variant="warning" class="gl-mr-2">{{ __('Pending') }}</gl-badge>
         </template>
       </noteable-note>
     </ul>
@@ -115,10 +114,15 @@ export default {
       ></div>
 
       <p class="draft-note-actions d-flex">
-        <publish-button :show-count="true" :should-publish="false" category="secondary" />
+        <publish-button
+          :show-count="true"
+          :should-publish="false"
+          category="secondary"
+          :disabled="isPublishingDraft(draft.id)"
+        />
         <gl-button
-          ref="publishNowButton"
-          :loading="isPublishingDraft(draft.id) || isPublishing"
+          :disabled="isPublishing"
+          :loading="isPublishingDraft(draft.id)"
           class="gl-ml-3"
           @click="publishNow"
         >