chore: Use button component in ReplyBox

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

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

@@ -1,31 +1,24 @@
+$default-button-height: 4.0rem;
+
 .button {
   align-items: center;
   display: inline-flex;
-  height: 4.0rem;
+  height: $default-button-height;
   margin-bottom: 0;
 
-  &.button--emoji {
-    align-items: center;
-    background: var(--b-50);
-    border: 1px solid var(--color-border-light);
-    border-radius: var(--border-radius-large);
-    display: flex;
-    font-size: var(--font-size-small);
-    height: var(--space-large);
-    justify-content: center;
-    padding: var(--space-micro);
-    text-align: center;
-    width: var(--space-large);
-
-    &:hover {
-      background: var(--b-200);
-    }
-  }
-
   .spinner {
     padding: 0 var(--space-small);
   }
 
+  .icon--emoji+.button__content {
+    padding-left: var(--space-small);
+  }
+
+  .icon--font+.button__content {
+    padding-left: var(--space-small);
+  }
+
+  // @TODDO - Remove after moving all buttons to woot-button
   .icon+.button__content {
     padding-left: var(--space-small);
   }
@@ -48,23 +41,23 @@
 
   // Smooth style
   &.smooth {
-    @include button-style(var(--w-100), var(--w-50), var(--w-700));
+    @include button-style(var(--w-50), var(--w-100), var(--w-700));
 
 
     &.secondary {
-      @include button-style(var(--s-100), var(--s-50), var(--s-700));
+      @include button-style(var(--s-50), var(--s-100), var(--s-700));
     }
 
     &.success {
-      @include button-style(var(--g-100), var(--g-50), var(--g-700));
+      @include button-style(var(--g-50), var(--g-100), var(--g-700));
     }
 
     &.alert {
-      @include button-style(var(--r-100), var(--r-50), var(--r-700));
+      @include button-style(var(--r-50), var(--r-100), var(--r-700));
     }
 
     &.warning {
-      @include button-style(var(--y-200), var(--y-100), var(--y-900));
+      @include button-style(var(--y-100), var(--y-200), var(--y-900));
     }
   }
 
@@ -81,6 +74,25 @@
     height: var(--space-larger);
   }
 
+  &.button--only-icon {
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+    width: $default-button-height;
+
+    &.tiny {
+      width: var(--space-medium);
+    }
+
+    &.small {
+      width: var(--space-large);
+    }
+
+    &.large {
+      width: var(--space-larger);
+    }
+  }
+
   &.link {
     height: auto;
     margin: 0;

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -52,25 +52,4 @@
     }
   }
 
-  .file-uploads>label {
-    cursor: pointer;
-
-    &:hover .button--emoji {
-      background: var(--b-200);
-    }
-  }
-
-  .bottom-box .button--emoji.button--upload {
-    padding: 0;
-
-    .file-uploads {
-      height: 100%;
-      line-height: var(--space-large);
-      width: 100%;
-    }
-
-    label {
-      padding: var(--space-small);
-    }
-  }
 }

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

@@ -6,6 +6,7 @@
         class-names="resolve"
         color-scheme="success"
         icon="ion-checkmark"
+        emoji="✅"
         :is-loading="isLoading"
         @click="() => toggleStatus(STATUS_TYPE.RESOLVED)"
       >
@@ -16,6 +17,7 @@
         class-names="resolve"
         color-scheme="warning"
         icon="ion-refresh"
+        emoji="👀"
         :is-loading="isLoading"
         @click="() => toggleStatus(STATUS_TYPE.OPEN)"
       >
@@ -36,9 +38,9 @@
         :color-scheme="buttonClass"
         :disabled="isLoading"
         icon="ion-arrow-down-b"
+        emoji="🔽"
         @click="openDropdown"
-      >
+      />
-      </woot-button>
     </div>
     <div
       v-if="showDropdown"

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,

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

@@ -1,34 +1,42 @@
 <template>
   <div class="bottom-box" :class="wrapClass">
     <div class="left-wrap">
-      <button
+      <woot-button
-        class="button clear button--emoji"
         :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="😊" />
+        <woot-button
-      </button>
+          v-if="showAttachButton"
-      <button
+          class-names="button--upload"
-        v-if="showAttachButton"
+          :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
-        class="button clear button--emoji button--upload"
+          icon="ion-android-attach"
-        :title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
+          emoji="📎"
-      >
+          color-scheme="secondary"
-        <file-upload
+          variant="smooth"
-          :size="4096 * 4096"
+          size="small"
-          accept="image/*, application/pdf, audio/mpeg, video/mp4, audio/ogg, text/csv"
+        />
-          @input-file="onFileUpload"
+      </file-upload>
-        >
+      <woot-button
-          <emoji-or-icon icon="ion-android-attach" emoji="📎" />
-        </file-upload>
-      </button>
-      <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
+      <woot-button
-        class="button nice primary button--send"
+        size="small"
-        :class="buttonClass"
+        :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,
+        warning: this.isNote,
-        'button--disabled': this.isSendDisabled,
       };
     },
     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 {
+.left-wrap .button {
-  &.button--emoji {
+  margin-right: var(--space-small);
-    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 {
@@ -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>

app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue

@@ -14,19 +14,17 @@
       </div>
       <div class="actions">
         <woot-button
-          variant="clear"
+          variant="smooth"
           size="small"
           icon="ion-compose"
           color-scheme="secondary"
-          class-names="button--emoji"
           @click="onEdit"
         />
         <woot-button
-          variant="clear"
+          variant="smooth"
           size="small"
           icon="ion-trash-b"
           color-scheme="secondary"
-          class-names="button--emoji"
           @click="onDelete"
         />
       </div>
@@ -111,12 +109,12 @@ export default {
   .actions {
     display: flex;
     visibility: hidden;
-  }
 
-  .button--emoji {
+    .button {
-    margin-left: var(--space-small);
+      margin-left: var(--space-small);
-    height: var(--space-medium);
+      height: var(--space-medium);
-    width: var(--space-medium);
+      width: var(--space-medium);
+    }
   }
 }
 

app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.vue

@@ -23,20 +23,18 @@
         </div>
         <div class="actions">
           <woot-button
-            variant="clear"
+            variant="smooth"
             size="small"
             icon="ion-compose"
             color-scheme="secondary"
-            class-names="button--emoji"
             class="action-button"
             @click="onEdit"
           />
           <woot-button
-            variant="clear"
+            variant="smooth"
             size="small"
             icon="ion-trash-b"
             color-scheme="secondary"
-            class-names="button--emoji"
             class="action-button"
             @click="onDelete"
           />