From 3e75ac2de58dd0346ab6b68c46ebdd4ec32a9747 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 17 Jul 2023 15:10:56 +0530
Subject: [PATCH] feat: update the UX around label suggestions (#7532)

---
 .../conversation/conversation/LabelSuggestion.vue    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
index 6a45a7425..5192be341 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -1,5 +1,10 @@
 <template>
-  <li v-if="shouldShowSuggestions" class="label-suggestion right">
+  <li
+    v-if="shouldShowSuggestions"
+    class="label-suggestion right"
+    @mouseover="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
     <div class="wrap">
       <div class="label-suggestion--container">
         <h6 class="label-suggestion--title">Suggested labels</h6>
@@ -33,6 +38,7 @@
               hideOnClick: true,
             }"
             variant="smooth"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
             class="label--add"
             icon="dismiss"
             size="tiny"
@@ -41,7 +47,7 @@
         </div>
         <div v-if="preparedLabels.length > 1">
           <woot-button
-            variant="smooth"
+            :variant="selectedLabels.length === 0 ? 'smooth' : ''"
             class="label--add"
             icon="add"
             size="tiny"
@@ -55,6 +61,7 @@
               delay: { show: 600, hide: 0 },
               hideOnClick: true,
             }"
+            :color-scheme="isHovered ? 'alert' : 'primary'"
             variant="smooth"
             class="label--add"
             icon="dismiss"
@@ -117,6 +124,7 @@ export default {
     return {
       isDismissed: false,
       fetchingSuggestions: false,
+      isHovered: false,
       selectedLabels: [],
     };
   },