From 88f3b4de48f2144c8c7f5edb171404798f25583e Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:27:23 +0530
Subject: [PATCH] chore(v4): Update colors (#10700)

---
 .../assets/scss/widgets/_buttons.scss         |  4 +-
 .../components-next/Label/AddLabel.vue        |  2 +-
 .../dashboard/components/CustomAttribute.vue  |  2 +-
 .../dashboard/components/ui/Label.vue         |  8 ++--
 .../widgets/conversation/ConversationCard.vue |  2 +-
 .../widgets/conversation/PriorityMark.vue     |  9 ++--
 .../conversation/contextMenu/Index.vue        |  2 +-
 .../conversation/contextMenu/menuItem.vue     | 19 ++++----
 .../contextMenu/menuItemWithSubmenu.vue       |  6 +--
 .../conversationBulkActions/AgentSelector.vue | 10 ++---
 .../conversationBulkActions/Index.vue         | 44 ++++++++++---------
 .../conversationBulkActions/LabelActions.vue  | 14 +++---
 .../conversationBulkActions/TeamActions.vue   | 10 ++---
 .../conversationBulkActions/UpdateActions.vue |  5 ++-
 .../conversationCardComponents/CardLabels.vue |  2 +-
 .../conversation/labels/LabelBox.vue          |  2 +-
 16 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
index 729e10368..1213e7c26 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
+++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss
@@ -42,7 +42,9 @@ button {
     }
   }
 
-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(.clear) {
+  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
+      .clear
+    ):not(.smooth):not(.hollow) {
     @apply bg-n-brand/80 dark:bg-n-brand/80;
   }
 
diff --git a/app/javascript/dashboard/components-next/Label/AddLabel.vue b/app/javascript/dashboard/components-next/Label/AddLabel.vue
index c9571e771..568ed6879 100644
--- a/app/javascript/dashboard/components-next/Label/AddLabel.vue
+++ b/app/javascript/dashboard/components-next/Label/AddLabel.vue
@@ -21,7 +21,7 @@ const showDropdown = ref(false);
 <template>
   <div class="relative">
     <button
-      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-6 outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
       :class="{ 'bg-n-alpha-2': showDropdown }"
       @click="showDropdown = !showDropdown"
     >
diff --git a/app/javascript/dashboard/components/CustomAttribute.vue b/app/javascript/dashboard/components/CustomAttribute.vue
index e3cb79e18..b86d5e0ba 100644
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -200,7 +200,7 @@ export default {
         <div v-if="isAttributeTypeCheckbox" class="flex items-center">
           <input
             v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
+            class="!my-0 ltr:mr-2 ltr:ml-0 rtl:mr-0 rtl:ml-2"
             type="checkbox"
             @change="onUpdate"
           />
diff --git a/app/javascript/dashboard/components/ui/Label.vue b/app/javascript/dashboard/components/ui/Label.vue
index e787eca57..96e08fd7b 100644
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -113,7 +113,7 @@ export default {
 
 <style scoped lang="scss">
 .label {
-  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
+  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-n-strong h-6;
 
   &.small {
     @apply text-xs py-0.5 px-1 leading-tight h-5;
@@ -143,7 +143,7 @@ export default {
     }
   }
   &.secondary {
-    @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
+    @apply bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-slate-100 border border-solid border-n-weak;
 
     a {
       @apply text-slate-900 dark:text-slate-100;
@@ -184,11 +184,11 @@ export default {
   }
 
   &.smooth {
-    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-slate-100 dark:border-slate-700;
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-solid border-n-strong;
   }
 
   &.dashed {
-    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-slate-100 dark:border-slate-700;
+    @apply bg-transparent text-slate-700 dark:text-slate-100 border border-dashed border-n-strong;
   }
 }
 
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
index 4575dde78..7e8ad507c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -382,7 +382,7 @@ export default {
   }
 
   &.conversation-selected {
-    @apply bg-slate-25 dark:bg-slate-800;
+    @apply bg-n-slate-2 dark:bg-n-slate-3;
   }
 
   &.has-inbox-name {
diff --git a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
index d000937e0..3a47da9c6 100644
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -38,15 +38,16 @@ export default {
       delay: { show: 1500, hide: 0 },
       hideOnClick: true,
     }"
-    class="shrink-0 rounded-sm inline-flex w-3.5 h-3.5"
+    class="shrink-0 rounded-sm inline-flex items-center justify-center w-3.5 h-3.5"
     :class="{
-      'bg-n-ruby-5 text-n-ruby-11': isUrgent,
-      'bg-n-slate-5 text-n-slate-11': !isUrgent,
+      'bg-n-ruby-4 text-n-ruby-10': isUrgent,
+      'bg-n-slate-4 text-n-slate-11': !isUrgent,
     }"
   >
     <fluent-icon
       :icon="`priority-${priority.toLowerCase()}`"
-      size="14"
+      :size="isUrgent ? 12 : 14"
+      class="flex-shrink-0"
       view-box="0 0 14 14"
     />
   </span>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
index beec7ca37..8778fc461 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -196,7 +196,7 @@ export default {
 </script>
 
 <template>
-  <div class="p-1 bg-white rounded-md shadow-xl dark:bg-slate-700">
+  <div class="p-1 rounded-md shadow-xl bg-n-alpha-3/50 backdrop-blur-[100px]">
     <MenuItem
       v-if="!hasUnreadMessages"
       :option="unreadOption"
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
index 23ef13fd7..2b58e9389 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
@@ -18,16 +18,19 @@ export default {
 </script>
 
 <template>
-  <div class="menu text-slate-800 dark:text-slate-100" role="button">
+  <div
+    class="menu text-slate-800 dark:text-slate-100 min-h-7 min-w-0"
+    role="button"
+  >
     <fluent-icon
       v-if="variant === 'icon' && option.icon"
       :icon="option.icon"
       size="14"
-      class="menu-icon"
+      class="flex-shrink-0"
     />
     <span
       v-if="variant === 'label' && option.color"
-      class="label-pill"
+      class="label-pill flex-shrink-0"
       :style="{ backgroundColor: option.color }"
     />
     <Thumbnail
@@ -36,9 +39,9 @@ export default {
       :src="option.thumbnail"
       :status="option.status"
       size="20px"
-      class="agent-thumbnail"
+      class="flex-shrink-0"
     />
-    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+    <p class="menu-label truncate min-w-0 flex-1">
       {{ option.label }}
     </p>
   </div>
@@ -47,14 +50,14 @@ export default {
 <style scoped lang="scss">
 .menu {
   width: calc(var(--space-mega) * 2);
-  @apply flex items-center flex-nowrap p-1 rounded-sm overflow-hidden cursor-pointer;
+  @apply flex items-center flex-nowrap p-1 rounded-md overflow-hidden cursor-pointer;
 
   .menu-label {
     @apply my-0 mx-2 text-xs flex-shrink-0;
   }
 
   &:hover {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-slate-50;
+    @apply bg-n-brand text-white dark:text-slate-50;
   }
 }
 
@@ -63,6 +66,6 @@ export default {
 }
 
 .label-pill {
-  @apply w-4 h-4 rounded-full border border-slate-50 border-solid dark:border-slate-900 flex-shrink-0;
+  @apply w-4 h-4 rounded-full border border-n-strong border-solid flex-shrink-0;
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
index 37fa5a36c..6d0a26d52 100644
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
@@ -15,17 +15,17 @@ export default {
 
 <template>
   <div
-    class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-white dark:bg-slate-700 justify-between hover:bg-woot-75 cursor-pointer dark:hover:bg-slate-800"
+    class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
     :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
-    <div class="flex items-center">
+    <div class="flex items-center h-4">
       <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
       <p class="my-0 mx-2 text-xs">{{ option.label }}</p>
     </div>
     <fluent-icon icon="chevron-right" size="12" />
     <div
       v-if="subMenuAvailable"
-      class="submenu bg-white dark:bg-slate-700 p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
     >
       <slot />
     </div>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
index 4b4820cd5..38d51ce79 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -185,7 +185,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__agents {
-  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
+  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
   .header {
     @apply p-2.5;
 
@@ -200,7 +200,7 @@ export default {
       @apply h-full;
     }
     .agent-list-search {
-      @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
+      @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
       .search-icon {
         @apply text-slate-400 dark:text-slate-200;
       }
@@ -215,7 +215,7 @@ export default {
     @apply block z-10 absolute -top-3 text-left;
 
     svg path {
-      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
     }
   }
 }
@@ -232,7 +232,7 @@ ul {
 }
 
 .agent-list-item {
-  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
+  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
   span {
     @apply text-sm;
   }
@@ -248,7 +248,7 @@ ul {
   }
 }
 .search-container {
-  @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-n-alpha-3 backdrop-blur-[100px];
 }
 
 .agent__list-loading {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
index 2b21948f9..0cc9a50ba 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -9,6 +9,7 @@ import {
   CMD_BULK_ACTION_RESOLVE_CONVERSATION,
 } from 'dashboard/helper/commandbar/events';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
 import LabelActions from './LabelActions.vue';
@@ -21,6 +22,7 @@ export default {
     LabelActions,
     TeamActions,
     CustomSnoozeModal,
+    NextButton,
   },
   props: {
     conversations: {
@@ -171,36 +173,36 @@ export default {
         </span>
       </label>
       <div class="flex items-center gap-1 bulk-action__actions">
-        <woot-button
+        <NextButton
           v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="tag"
+          icon="i-lucide-tags"
+          slate
+          xs
+          faded
           @click="toggleLabelActions"
         />
-        <woot-button
+        <NextButton
           v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="repeat"
+          icon="i-lucide-repeat"
+          slate
+          xs
+          faded
           @click="toggleUpdateActions"
         />
-        <woot-button
+        <NextButton
           v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="person-assign"
+          icon="i-lucide-user-round-plus"
+          slate
+          xs
+          faded
           @click="toggleAgentList"
         />
-        <woot-button
+        <NextButton
           v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-          size="tiny"
-          variant="smooth"
-          color-scheme="secondary"
-          icon="people-team-add"
+          icon="i-lucide-users-round"
+          slate
+          xs
+          faded
           @click="toggleTeamsList"
         />
       </div>
@@ -270,7 +272,7 @@ export default {
 }
 
 .bulk-action__container {
-  @apply p-4 relative border-b border-solid border-slate-100 dark:border-slate-600/70;
+  @apply p-4 relative border-b border-solid border-n-strong dark:border-n-weak;
 }
 
 .bulk-action__panel {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
index 7cacb8cdc..fe127b899 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -110,7 +110,7 @@ export default {
   @apply flex flex-col max-h-[15rem] min-h-[auto];
 
   .labels-list__header {
-    @apply bg-white dark:bg-slate-800 py-0 px-2.5;
+    @apply bg-n-alpha-3 backdrop-blur-[100px] py-0 px-2.5;
   }
 
   .labels-list__body {
@@ -131,7 +131,7 @@ export default {
 }
 
 .label-list-search {
-  @apply bg-slate-50 dark:bg-slate-900 py-0 px-2.5 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
+  @apply bg-n-alpha-black2 py-0 px-2.5 border border-solid border-n-strong rounded-md;
 
   .search-icon {
     @apply text-slate-400 dark:text-slate-200;
@@ -143,7 +143,7 @@ export default {
 }
 
 .labels-container {
-  @apply absolute right-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
+  @apply absolute right-2 top-12 origin-top-right w-auto z-20 max-w-[15rem] min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
 
   .header {
     @apply p-2.5;
@@ -166,7 +166,7 @@ export default {
     @apply block z-10 absolute text-left -top-3;
 
     svg path {
-      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
     }
   }
 }
@@ -183,7 +183,7 @@ ul {
   @apply my-1 mx-0 py-0 px-2.5;
 
   .item {
-    @apply items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-slate-50 dark:hover:bg-slate-900;
+    @apply items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
 
     &.label-selected {
       @apply bg-slate-50 dark:bg-slate-900;
@@ -202,13 +202,13 @@ ul {
     }
 
     .label-pill {
-      @apply bg-slate-50 rounded-md h-3 w-3 flex-shrink-0 border border-solid border-slate-50 dark:border-slate-900;
+      @apply bg-slate-50 rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak;
     }
   }
 }
 
 .search-container {
-  @apply bg-white py-0 px-2.5 sticky top-0 z-20;
+  @apply bg-n-alpha-3 backdrop-blur-[100px] py-0 px-2.5 sticky top-0 z-20;
 }
 
 .actions-container {
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
index 4783e5629..80ae9622c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -92,7 +92,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__teams {
-  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-white dark:bg-slate-800 rounded-lg border border-solid border-slate-50 dark:border-slate-700 shadow-md;
+  @apply max-w-[75%] absolute right-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
   .header {
     @apply p-2.5;
 
@@ -107,7 +107,7 @@ export default {
       @apply h-full;
     }
     .agent-list-search {
-      @apply py-0 px-2.5 bg-slate-50 dark:bg-slate-900 border border-solid border-slate-100 dark:border-slate-600/70 rounded-md;
+      @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
       .search-icon {
         @apply text-slate-400 dark:text-slate-200;
       }
@@ -122,7 +122,7 @@ export default {
     @apply block z-10 absolute text-left -top-3;
 
     svg path {
-      @apply fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50;
+      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
     }
   }
 }
@@ -139,13 +139,13 @@ ul {
 }
 
 .team__list-item {
-  @apply flex items-center p-2.5 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-900;
+  @apply flex items-center p-2.5 cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
   span {
     @apply text-sm;
   }
 }
 
 .search-container {
-  @apply py-0 px-2.5 sticky top-0 z-20 bg-white dark:bg-slate-800;
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-n-alpha-3 backdrop-blur-[100px];
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
index 2b27b04e8..b7f65e3e0 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
@@ -67,7 +67,7 @@ const actionLabel = key => {
 <template>
   <div
     v-on-clickaway="onClose"
-    class="absolute z-20 w-auto origin-top-right bg-white border border-solid rounded-lg shadow-md right-2 top-12 dark:bg-slate-800 border-slate-50 dark:border-slate-700"
+    class="absolute z-20 w-auto origin-top-right border border-solid rounded-lg shadow-md right-2 top-12 bg-n-alpha-3 backdrop-blur-[100px] border-n-weak"
   >
     <div
       class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
@@ -77,7 +77,7 @@ const actionLabel = key => {
           d="M20 12l-8-8-12 12"
           fill-rule="evenodd"
           stroke-width="1px"
-          class="fill-white dark:fill-slate-800 stroke-slate-50 dark:stroke-slate-600/50"
+          class="fill-n-alpha-3 backdrop-blur-[100px] stroke-n-weak"
         />
       </svg>
     </div>
@@ -102,6 +102,7 @@ const actionLabel = key => {
               color-scheme="secondary"
               size="small"
               :icon="action.icon"
+              class="hover:!bg-n-slate-3 dark:hover:!bg-n-solid-3"
               @click="updateConversations(action.key)"
             >
               {{ actionLabel(action.key) }}
diff --git a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
index 86a2dfe0f..65260444e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
@@ -86,7 +86,7 @@ const onShowLabels = e => {
             ? $t('CONVERSATION.CARD.HIDE_LABELS')
             : $t('CONVERSATION.CARD.SHOW_LABELS')
         "
-        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"
+        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 border-n-strong dark:border-n-strong"
         @click="onShowLabels"
       >
         <fluent-icon
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 9e51817d5..be46d268f 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -86,7 +86,7 @@ export default {
     >
       <div
         v-on-clickaway="closeDropdownLabel"
-        class="label-wrap"
+        class="label-wrap flex flex-wrap"
         @keyup.esc="closeDropdownLabel"
       >
         <AddLabel @add="toggleLabels" />