chore: Use button component in ReplyBox

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

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -1,34 +1,42 @@
 <template>
   <div class="bottom-box" :class="wrapClass">
     <div class="left-wrap">
-      <button
-        class="button clear button--emoji"
+      <woot-button
         :title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
+        icon="ion-happy-outline"
+        emoji="😊"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
         @click="toggleEmojiPicker"
+      />
+
+      <file-upload
+        :size="4096 * 4096"
+        accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
+        @input-file="onFileUpload"
       >
-        <emoji-or-icon icon="ion-happy-outline" emoji="😊" />
-      </button>
-      <button
-        v-if="showAttachButton"
-        class="button clear button--emoji button--upload"
-        :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-      >
-        <file-upload
-          :size="4096 * 4096"
-          accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
-          @input-file="onFileUpload"
-        >
-          <emoji-or-icon icon="ion-android-attach" emoji="📎" />
-        </file-upload>
-      </button>
-      <button
+        <woot-button
+          v-if="showAttachButton"
+          class-names="button--upload"
+          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+          icon="ion-android-attach"
+          emoji="📎"
+          color-scheme="secondary"
+          variant="smooth"
+          size="small"
+        />
+      </file-upload>
+      <woot-button
         v-if="enableRichEditor && !isOnPrivateNote"
-        class="button clear button--emoji"
+        icon="ion-quote"
+        emoji="🖊️"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
         :title="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
         @click="toggleFormatMode"
-      >
-        <emoji-or-icon icon="ion-quote" emoji="🖊️" />
-      </button>
+      />
     </div>
     <div class="right-wrap">
       <div v-if="isFormatMode" class="enter-to-send--checkbox">
@@ -42,25 +50,25 @@
           {{ $t('CONVERSATION.REPLYBOX.ENTER_TO_SEND') }}
         </label>
       </div>
-      <button
-        class="button nice primary button--send"
-        :class="buttonClass"
+      <woot-button
+        size="small"
+        :class-names="buttonClass"
+        :is-disabled="isSendDisabled"
         @click="onSend"
       >
         {{ sendButtonText }}
-      </button>
+      </woot-button>
     </div>
   </div>
 </template>
 
 <script>
 import FileUpload from 'vue-upload-component';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 
 import { REPLY_EDITOR_MODES } from './constants';
 export default {
   name: 'ReplyTopPanel',
-  components: { EmojiOrIcon, FileUpload },
+  components: { FileUpload },
   props: {
     mode: {
       type: String,
@@ -126,8 +134,7 @@ export default {
     },
     buttonClass() {
       return {
-        'button--note': this.isNote,
-        'button--disabled': this.isSendDisabled,
+        warning: this.isNote,
       };
     },
     showAttachButton() {
@@ -146,9 +153,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~widget/assets/scss/variables.scss';
-@import '~widget/assets/scss/mixins.scss';
-
 .bottom-box {
   display: flex;
   justify-content: space-between;
@@ -159,39 +163,8 @@ export default {
   }
 }
 
-.button {
-  &.button--emoji {
-    margin-right: var(--space-small);
-  }
-
-  &.is-active {
-    background: white;
-  }
-
-  &.button--note {
-    background: var(--y-800);
-    color: white;
-
-    &:hover {
-      background: var(--y-700);
-    }
-  }
-
-  &.button--disabled {
-    background: var(--b-100);
-    color: var(--b-400);
-    cursor: default;
-
-    &:hover {
-      background: var(--b-100);
-    }
-  }
-}
-
-.bottom-box.is-note-mode {
-  .button--emoji {
-    background: white;
-  }
+.left-wrap .button {
+  margin-right: var(--space-small);
 }
 
 .left-wrap {
@@ -199,15 +172,6 @@ export default {
   display: flex;
 }
 
-.button--reply {
-  border-right: 1px solid var(--color-border-light);
-}
-
-.icon--font {
-  color: var(--s-600);
-  font-size: var(--font-size-default);
-}
-
 .right-wrap {
   display: flex;
 
@@ -225,4 +189,13 @@ export default {
     }
   }
 }
+
+::v-deep .file-uploads {
+  label {
+    cursor: pointer;
+  }
+  &:hover .button {
+    background: var(--s-100);
+  }
+}
 </style>