Chore: Fixes icon size in button (#3555)

* Chore: Fixes icon size in button

* Changes normal button to woot button

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -66,6 +66,27 @@ $default-button-height: 4.0rem;
     }
   }
 
+  &.clear.button--only-icon:hover {
+    background: var(--w-50);
+
+
+    &.secondary {
+      background: var(--s-50);
+    }
+
+    &.success {
+      background: var(--g-50);
+    }
+
+    &.alert {
+      background: var(--r-50);
+    }
+
+    &.warning {
+      background: var(--y-100);
+    }
+  }
+
   // Sizes
   &.tiny {
     height: var(--space-medium);

app/javascript/dashboard/components/ChatList.vue

@@ -13,9 +13,9 @@ l<template>
         />
         <woot-button
           v-else
+          size="small"
           variant="clear"
-          color-scheme="danger"
+          color-scheme="alert"
-          class="btn-clear-filters"
           @click="resetAndFetchData"
         >
           {{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
@@ -24,10 +24,11 @@ l<template>
           v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
           variant="clear"
           color-scheme="secondary"
+          icon="filter"
+          size="small"
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
         >
-          <fluent-icon icon="filter" />
         </woot-button>
       </div>
     </div>
@@ -405,16 +406,10 @@ export default {
 .filter--actions {
   display: flex;
   align-items: center;
-  .btn-filter {
+}
-    cursor: pointer;
+
-    i {
+.btn-filter {
-      font-size: var(--font-size-two);
+  margin: 0 var(--space-smaller);
-    }
-  }
-  .btn-clear-filters {
-    color: var(--r-500);
-    cursor: pointer;
-  }
 }
 
 .filter__applied {

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -7,7 +7,6 @@
         color-scheme="success"
         icon="checkmark"
         emoji="✅"
-        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
@@ -19,7 +18,6 @@
         color-scheme="warning"
         icon="arrow-redo"
         emoji="👀"
-        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -30,7 +28,6 @@
         class-names="resolve"
         color-scheme="primary"
         icon="person"
-        icon-size="16"
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
@@ -42,7 +39,6 @@
         :color-scheme="buttonClass"
         :disabled="isLoading"
         icon="chevron-down"
-        icon-size="16"
         emoji="🔽"
         @click="openDropdown"
       />

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -40,7 +40,7 @@
             :class="{ 'is-active': isActive }"
             @click="e => newLinkClick(e, navigate)"
           >
-            <fluent-icon icon="add" />
+            <fluent-icon icon="add" size="16" />
             <span class="button__content">
               {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
             </span>

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

@@ -36,10 +36,6 @@ export default {
       type: String,
       default: '',
     },
-    iconSize: {
-      type: [Number, String],
-      default: 20,
-    },
     emoji: {
       type: String,
       default: '',
@@ -72,10 +68,12 @@ export default {
       }
       return this.variant;
     },
-    hasOnlyIconClasses() {
+    hasOnlyIcon() {
       const hasEmojiOrIcon = this.emoji || this.icon;
-      if (!this.$slots.default && hasEmojiOrIcon) return 'button--only-icon';
+      return !this.$slots.default && hasEmojiOrIcon;
-      return '';
+    },
+    hasOnlyIconClasses() {
+      return this.hasOnlyIcon ? 'button--only-icon' : '';
     },
     buttonClasses() {
       return [
@@ -88,6 +86,41 @@ export default {
         this.isExpanded ? 'expanded' : '',
       ];
     },
+    withTextIconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 12;
+        case 'small':
+          return 14;
+        case 'medium':
+          return 16;
+        case 'large':
+          return 18;
+
+        default:
+          return 16;
+      }
+    },
+    withoutTextIconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 14;
+        case 'small':
+          return 16;
+        case 'medium':
+          return 18;
+        case 'large':
+          return 20;
+
+        default:
+          return 18;
+      }
+    },
+    iconSize() {
+      return this.hasOnlyIcon
+        ? this.withoutTextIconSize
+        : this.withTextIconSize;
+    },
   },
   methods: {
     handleClick(evt) {

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
+      <woot-button
-        class="button clear button--reply"
+        variant="clear"
+        class="button--reply"
         :class="replyButtonClass"
         @click="handleReplyClick"
       >
-        <emoji-or-icon icon="" emoji="💬" />
         {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </button>
+      </woot-button>
 
-      <button
+      <woot-button
-        class="button clear button--note"
+        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"
+      variant="clear"
-      size="small"
       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"
+      variant="clear"
-      size="small"
       color-scheme="secondary"
       icon="speaker-1"
       @click="unmute"
     />
     <woot-button
       v-tooltip="$t('CONTACT_PANEL.SEND_TRANSCRIPT')"
-      variant="smooth"
+      variant="clear"
-      size="small"
       color-scheme="secondary"
       icon="share"
       @click="toggleEmailActionsModal"
@@ -93,8 +90,8 @@ export default {
 .actions--container {
   align-items: center;
 
-  .button {
+  .resolve-actions {
-    margin-right: var(--space-small);
+    margin-left: var(--space-small);
   }
 }
 

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -19,7 +19,6 @@
             variant="clear"
             size="small"
             icon="clipboard"
-            icon-size="16"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -31,7 +30,6 @@
             color-scheme="alert"
             size="small"
             icon="delete"
-            icon-size="16"
             @click="handleDelete"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.DELETE') }}

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -20,7 +20,6 @@
           variant="smooth"
           size="tiny"
           icon="delete"
-          icon-size="16"
           color-scheme="secondary"
           @click="onDelete"
         />

app/javascript/dashboard/routes/dashboard/conversation/ConversationAction.vue

@@ -9,7 +9,6 @@
           <woot-button
             v-if="showSelfAssign"
             icon="arrow-right"
-            icon-size="14"
             variant="link"
             size="small"
             @click="onSelfAssign"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -63,8 +63,7 @@
           title="$t('CONTACT_PANEL.NEW_MESSAGE')"
           class="new-message"
           icon="chat"
-          icon-size="14"
+          size="small"
-          size="small expanded"
           @click="toggleConversationModal"
         />
         <woot-button
@@ -72,9 +71,8 @@
           title="$t('EDIT_CONTACT.BUTTON_LABEL')"
           class="edit-contact"
           icon="edit"
-          icon-size="14"
           variant="smooth"
-          size="small expanded"
+          size="small"
           @click="toggleEditModal"
         />
         <woot-button
@@ -83,9 +81,8 @@
           title="$t('CONTACT_PANEL.MERGE_CONTACT')"
           class="merge-contact"
           icon="merge"
-          icon-size="14"
           variant="smooth"
-          size="small expanded"
+          size="small"
           color-scheme="secondary"
           :disabled="uiFlags.isMerging"
           @click="openMergeModal"
@@ -96,9 +93,8 @@
           title="$t('DELETE_CONTACT.BUTTON_LABEL')"
           class="delete-contact"
           icon="delete"
-          icon-size="14"
           variant="smooth"
-          size="small expanded"
+          size="small"
           color-scheme="alert"
           :disabled="uiFlags.isDeleting"
           @click="toggleDeleteModal"

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfoRow.vue

@@ -13,7 +13,6 @@
         variant="link"
         color-scheme="secondary"
         icon="clipboard"
-        icon-size="14"
         class-names="icon copy-icon"
         @click="onCopy"
       />