chore: Use button component in ReplyBox

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/ui/WootButton.vue

@@ -6,16 +6,22 @@
     @click="handleClick"
   >
     <spinner v-if="isLoading" size="small" />
-    <i v-else-if="icon" class="icon" :class="icon"></i>
+    <emoji-or-icon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+    />
     <span v-if="$slots.default" class="button__content"><slot></slot></span>
   </button>
 </template>
 <script>
-import Spinner from 'shared/components/Spinner.vue';
+import Spinner from 'shared/components/Spinner';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 
 export default {
   name: 'WootButton',
-  components: { Spinner },
+  components: { EmojiOrIcon, Spinner },
   props: {
     variant: {
       type: String,
@@ -29,12 +35,16 @@ export default {
       type: String,
       default: '',
     },
+    emoji: {
+      type: String,
+      default: '',
+    },
     colorScheme: {
       type: String,
       default: 'primary',
     },
     classNames: {
-      type: String,
+      type: [String, Object],
       default: '',
     },
     isDisabled: {
@@ -57,9 +67,15 @@ export default {
       }
       return this.variant;
     },
+    hasOnlyIconClasses() {
+      const hasEmojiOrIcon = this.emoji || this.icon;
+      if (!this.$slots.default && hasEmojiOrIcon) return 'button--only-icon';
+      return '';
+    },
     buttonClasses() {
       return [
         this.variantClasses,
+        this.hasOnlyIconClasses,
         this.size,
         this.colorScheme,
         this.classNames,