LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore(v4): Update colors (#10700)

Browse Source
This commit is contained in:
Sivin Varghese
2025-01-16 15:27:23 +05:30
committed by GitHub
parent 542bab617b
commit 88f3b4de48
16 changed files with 75 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
View File

@@ -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"

19
app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue
View File

@@ -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>

6
app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue
View File

@@ -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>