From 0f26351fd30dab8adc38d0cc2ebc99d61b72da7a Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Fri, 4 Oct 2024 00:00:35 -0700
Subject: [PATCH] fix: Update card labels button with a new one to fix the CSS
 issue (#10222)

---
 .../conversationCardComponents/CardLabels.vue | 30 +++++--------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index de1a081dc..86a2dfe0f 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -79,35 +79,21 @@ const onShowLabels = e => {
           'invisible absolute': !showAllLabels && index > labelPosition,
         }"
       />
-      <woot-button
+      <button
         v-if="showExpandLabelButton"
         :title="
           showAllLabels
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
-        color-scheme="secondary"
-        variant="hollow"
-        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
-        size="tiny"
+        class="h-5 py-0 px-1 flex-shrink-0 mr-6 ml-0 rtl:ml-6 rtl:mr-0 rtl:rotate-180 text-slate-700 dark:text-slate-200 hover:border-slate-300 border-slate-100 dark:border-slate-700"
         @click="onShowLabels"
-      />
+      >
+        <fluent-icon
+          :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+          size="12"
+        />
+      </button>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.show-more--button {
-  @apply h-5;
-  &.secondary:focus {
-    @apply text-slate-700 dark:text-slate-200 border-slate-300 dark:border-slate-700;
-  }
-}
-
-.labels-wrap {
-  .secondary {
-    @apply border border-solid border-slate-100 dark:border-slate-700;
-  }
-}
-</style>