1 files changed, 18 insertions, 15 deletions
diff --git a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
index 7520cc2401b..2b37ed19176 100644
--- a/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
+++ b/app/assets/javascripts/batch_comments/components/preview_dropdown.vue
@@ -1,16 +1,16 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import { sprintf, n__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 import DraftsCount from './drafts_count.vue';
 import PublishButton from './publish_button.vue';
 import PreviewItem from './preview_item.vue';
 
 export default {
   components: {
+    GlButton,
     GlLoadingIcon,
-    Icon,
+    GlIcon,
     DraftsCount,
     PublishButton,
     PreviewItem,
@@ -29,7 +29,7 @@ export default {
   watch: {
     showPreviewDropdown() {
       if (this.showPreviewDropdown && this.$refs.dropdown) {
-        this.$nextTick(() => this.$refs.dropdown.focus());
+        this.$nextTick(() => this.$refs.dropdown.$el.focus());
       }
     },
   },
@@ -63,32 +63,35 @@ export default {
       show: showPreviewDropdown,
     }"
   >
-    <button
+    <gl-button
       ref="dropdown"
       type="button"
-      class="btn btn-success review-preview-dropdown-toggle qa-review-preview-toggle"
+      category="primary"
+      variant="success"
+      class="review-preview-dropdown-toggle qa-review-preview-toggle"
       @click="toggleReviewDropdown"
     >
       {{ __('Finish review') }}
       <drafts-count />
-      <icon name="angle-up" />
-    </button>
+      <gl-icon name="angle-up" />
+    </gl-button>
     <div
       class="dropdown-menu dropdown-menu-large dropdown-menu-right dropdown-open-top"
       :class="{
         show: showPreviewDropdown,
       }"
     >
-      <div class="dropdown-title">
-        {{ dropdownTitle }}
-        <button
+      <div class="dropdown-title gl-display-flex gl-align-items-center">
+        <span class="gl-ml-auto">{{ dropdownTitle }}</span>
+        <gl-button
           :aria-label="__('Close')"
           type="button"
-          class="dropdown-title-button dropdown-menu-close"
+          category="tertiary"
+          size="small"
+          class="dropdown-title-button gl-ml-auto gl-p-0!"
+          icon="close"
           @click="toggleReviewDropdown"
-        >
-          <icon name="close" />
-        </button>
+        />
       </div>
       <div class="dropdown-content">
         <ul v-if="isNotesFetched">