Chore: Fixes icon size in button (#3555)

* Chore: Fixes icon size in button

* Changes normal button to woot button

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

@@ -8,7 +8,6 @@
         color-scheme="secondary"
         variant="smooth"
         size="small"
-        :icon-size="14"
         @click="toggleEmojiPicker"
       />
 
@@ -27,7 +26,6 @@
           :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
           icon="attach"
           emoji="📎"
-          :icon-size="14"
           color-scheme="secondary"
           variant="smooth"
           size="small"
@@ -37,7 +35,6 @@
         v-if="enableRichEditor && !isOnPrivateNote"
         icon="quote"
         emoji="🖊️"
-        :icon-size="16"
         color-scheme="secondary"
         variant="smooth"
         size="small"

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

@@ -1,23 +1,23 @@
 <template>
   <div class="top-box">
     <div class="mode-wrap button-group">
-      <button
-        class="button clear button--reply"
+      <woot-button
+        variant="clear"
+        class="button--reply"
         :class="replyButtonClass"
         @click="handleReplyClick"
       >
-        <emoji-or-icon icon="" emoji="💬" />
         {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </button>
+      </woot-button>
 
-      <button
-        class="button clear button--note"
+      <woot-button
+        class="button--note"
+        variant="clear"
         :class="noteButtonClass"
         @click="handleNoteClick"
       >
-        <emoji-or-icon icon="" emoji="📝" />
         {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
-      </button>
+      </woot-button>
     </div>
     <div class="action-wrap">
       <div v-if="isMessageLengthReachingThreshold" class="tabs-title">
@@ -29,7 +29,6 @@
     <woot-button
       v-if="popoutReplyBox"
       variant="clear"
-      size="large"
       icon="dismiss"
       color-scheme="secondary"
       class-names="popout-button"
@@ -38,7 +37,6 @@
     <woot-button
       v-else
       variant="clear"
-      size="large"
       icon="resize-large"
       color-scheme="secondary"
       class-names="popout-button"
@@ -49,7 +47,6 @@
 
 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
 import {
   hasPressedAltAndPKey,
   hasPressedAltAndLKey,
@@ -57,9 +54,6 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 export default {
   name: 'ReplyTopPanel',
-  components: {
-    EmojiOrIcon,
-  },
   mixins: [eventListenerMixins],
   props: {
     mode: {
@@ -189,11 +183,4 @@ export default {
     color: var(--s-600);
   }
 }
-
-.popout-button {
-  display: flex;
-  justify-content: flex-end;
-  height: auto;
-  padding-right: var(--space-normal);
-}
 </style>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -22,7 +22,6 @@
         <div class="filter-actions">
           <woot-button
             icon="add"
-            icon-size="16"
             color-scheme="success"
             variant="smooth"
             size="small"

app/javascript/dashboard/components/widgets/conversation/MoreActions.vue

@@ -3,8 +3,7 @@
     <woot-button
       v-if="!currentChat.muted"
       v-tooltip="$t('CONTACT_PANEL.MUTE_CONTACT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
       color-scheme="secondary"
       icon="speaker-mute"
       @click="mute"
@@ -12,16 +11,14 @@
     <woot-button
       v-else
       v-tooltip.left="$t('CONTACT_PANEL.UNMUTE_CONTACT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
       color-scheme="secondary"
       icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="smooth"
-      size="small"
+      variant="clear"
       color-scheme="secondary"
       icon="share"
       @click="toggleEmailActionsModal"
@@ -93,8 +90,8 @@ export default {
 .actions--container {
   align-items: center;
 
-  .button {
-    margin-right: var(--space-small);
+  .resolve-actions {
+    margin-left: var(--space-small);
   }
 }