1 files changed, 51 insertions, 40 deletions

diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 9acb837c27f..03ee5547fc8 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,14 +1,15 @@
 <script>
 /* eslint-disable vue/no-v-html */
 import { mapGetters, mapActions, mapState } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
-import eventHub from '../event_hub';
 import markdownField from '~/vue_shared/components/markdown/field.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import issuableStateMixin from '../mixins/issuable_state';
-import resolvable from '../mixins/resolvable';
 import { __, sprintf } from '~/locale';
 import { getDraft, updateDraft } from '~/lib/utils/autosave';
+import issuableStateMixin from '../mixins/issuable_state';
+import resolvable from '../mixins/resolvable';
+import eventHub from '../event_hub';
 import CommentFieldLayout from './comment_field_layout.vue';
 
 export default {
@@ -16,6 +17,7 @@ export default {
   components: {
     markdownField,
     CommentFieldLayout,
+    GlButton,
   },
   mixins: [glFeatureFlagsMixin(), issuableStateMixin, resolvable],
   props: {
@@ -378,61 +380,70 @@ export default {
               </template>
             </label>
           </p>
-          <div>
-            <button
+          <div class="gl-display-sm-flex gl-flex-wrap">
+            <gl-button
               :disabled="isDisabled"
-              type="button"
-              class="btn btn-success"
+              category="primary"
+              variant="success"
+              class="gl-mr-3"
               data-qa-selector="start_review_button"
               @click="handleAddToReview"
             >
               <template v-if="hasDrafts">{{ __('Add to review') }}</template>
               <template v-else>{{ __('Start a review') }}</template>
-            </button>
-            <button
+            </gl-button>
+            <gl-button
               :disabled="isDisabled"
-              type="button"
-              class="btn js-comment-button"
+              category="secondary"
+              variant="default"
               data-qa-selector="comment_now_button"
+              class="gl-mr-3 js-comment-button"
               @click="handleUpdate()"
             >
               {{ __('Add comment now') }}
-            </button>
-            <button
-              class="btn note-edit-cancel js-close-discussion-note-form"
-              type="button"
+            </gl-button>
+            <gl-button
+              class="note-edit-cancel js-close-discussion-note-form"
+              category="secondary"
+              variant="default"
               data-testid="cancelBatchCommentsEnabled"
               @click="cancelHandler(true)"
             >
               {{ __('Cancel') }}
-            </button>
+            </gl-button>
           </div>
         </template>
         <template v-else>
-          <button
-            :disabled="isDisabled"
-            type="button"
-            class="js-vue-issue-save btn btn-success js-comment-button"
-            data-qa-selector="reply_comment_button"
-            @click="handleUpdate()"
-          >
-            {{ saveButtonTitle }}
-          </button>
-          <button
-            v-if="discussion.resolvable"
-            class="btn btn-default gl-mr-3 js-comment-resolve-button"
-            @click.prevent="handleUpdate(true)"
-          >
-            {{ resolveButtonTitle }}
-          </button>
-          <button
-            class="btn btn-cancel note-edit-cancel js-close-discussion-note-form"
-            type="button"
-            data-testid="cancel"
-            @click="cancelHandler(true)"
-          >
-            {{ __('Cancel') }}
-          </button>
+          <div class="gl-display-sm-flex gl-flex-wrap">
+            <gl-button
+              :disabled="isDisabled"
+              category="primary"
+              variant="success"
+              data-qa-selector="reply_comment_button"
+              class="gl-mr-3 js-vue-issue-save js-comment-button"
+              @click="handleUpdate()"
+            >
+              {{ saveButtonTitle }}
+            </gl-button>
+            <gl-button
+              v-if="discussion.resolvable"
+              category="secondary"
+              variant="default"
+              class="gl-mr-3 js-comment-resolve-button"
+              @click.prevent="handleUpdate(true)"
+            >
+              {{ resolveButtonTitle }}
+            </gl-button>
+            <gl-button
+              class="note-edit-cancel js-close-discussion-note-form"
+              category="secondary"
+              variant="default"
+              data-testid="cancel"
+              @click="cancelHandler(true)"
+            >
+              {{ __('Cancel') }}
+            </gl-button>
+          </div>
         </template>
       </div>
     </form>