feat: Dark Mode (#7471)

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="menu-container">
+  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
     <menu-item
       v-if="!hasUnreadMessages"
       :option="unreadOption"
@@ -243,12 +243,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.menu-container {
-  padding: var(--space-smaller);
-  background-color: var(--white);
-  box-shadow: var(--shadow-context-menu);
-  border-radius: var(--border-radius-normal);
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -19,7 +19,9 @@
       size="20px"
       class="agent-thumbnail"
     />
-    <p class="menu-label text-truncate">{{ option.label }}</p>
+    <p class="menu-label overflow-hidden whitespace-nowrap text-ellipsis">
+      {{ option.label }}
+    </p>
   </div>
 </template>
 
@@ -44,22 +46,14 @@ export default {
 
 <style scoped lang="scss">
 .menu {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
   width: calc(var(--space-mega) * 2);
-  padding: var(--space-smaller);
-  border-radius: var(--border-radius-small);
-  overflow: hidden;
+  @apply flex items-center flex-nowrap p-1 rounded-sm overflow-hidden cursor-pointer;
   .menu-label {
-    margin: 0 var(--space-small);
-    font-size: var(--font-size-mini);
-    flex-shrink: 0;
+    @apply my-0 mx-2 text-xs flex-shrink-0;
   }
 
   &:hover {
-    background-color: var(--w-500);
-    color: var(--white);
+    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-slate-50;
   }
 }
 
@@ -68,10 +62,6 @@ export default {
 }
 
 .label-pill {
-  width: var(--space-normal);
-  height: var(--space-normal);
-  border-radius: var(--border-radius-rounded);
-  border: 1px solid var(--s-50);
-  flex-shrink: 0;
+  @apply w-4 h-4 rounded-full border border-slate-50 border-solid dark:border-slate-900 flex-shrink-0;
 }
 </style>

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue

@@ -1,14 +1,17 @@
 <template>
   <div
-    class="menu-with-submenu flex-between"
-    :class="{ disabled: !subMenuAvailable }"
+    class="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="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
-    <div class="menu-left">
+    <div class="flex items-center">
       <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
-      <p class="menu-label">{{ option.label }}</p>
+      <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">
+    <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"
+    >
       <slot />
     </div>
   </div>
@@ -31,61 +34,12 @@ export default {
 
 <style scoped lang="scss">
 .menu-with-submenu {
-  width: 100%;
-  padding: var(--space-smaller);
-  border-radius: var(--border-radius-small);
-  position: relative;
-  min-width: calc(var(--space-mega) * 2);
-  background-color: var(--white);
-
-  .menu-left {
-    display: flex;
-    align-items: center;
-
-    .menu-label {
-      margin: 0 var(--space-small);
-      font-size: var(--font-size-mini);
-    }
-  }
-
-  .submenu {
-    padding: var(--space-smaller);
-    background-color: var(--white);
-    box-shadow: var(--shadow-context-menu);
-    border-radius: var(--border-radius-normal);
-    position: absolute;
-    position: absolute;
-    left: 100%;
-    top: 0;
-    display: none;
-    min-height: min-content;
-    max-height: var(--space-giga);
-    overflow-y: auto;
-    // Need this because Firefox adds a horizontal scrollbar, if a text is truncated inside.
-    overflow-x: hidden;
-  }
+  min-width: calc(6.25rem * 2);
 
   &:hover {
-    background-color: var(--w-75);
-
     .submenu {
-      display: block;
+      @apply block;
     }
-    &:before {
-      content: '';
-      position: absolute;
-      z-index: var(--z-index-highest);
-      bottom: -65%;
-      height: 75%;
-      right: 0%;
-      width: 50%;
-      clip-path: polygon(100% 0, 0% 0%, 100% 100%);
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
   }
 }
 </style>