rodrigo/iachat
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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
16 changed files with 75 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/assets/scss/widgets/_buttons.scss
View File

@ -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; @apply bg-n-brand/80 dark:bg-n-brand/80;
} }

2
app/javascript/dashboard/components-next/Label/AddLabel.vue
View File

@ -21,7 +21,7 @@ const showDropdown = ref(false);
<template> <template>
<div class="relative"> <div class="relative">
<button <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 }" :class="{ 'bg-n-alpha-2': showDropdown }"
@click="showDropdown = !showDropdown" @click="showDropdown = !showDropdown"
> >

2
app/javascript/dashboard/components/CustomAttribute.vue
View File

@ -200,7 +200,7 @@ export default {
<div v-if="isAttributeTypeCheckbox" class="flex items-center"> <div v-if="isAttributeTypeCheckbox" class="flex items-center">
<input <input
v-model="editedValue" 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" type="checkbox"
@change="onUpdate" @change="onUpdate"
/> />

8
app/javascript/dashboard/components/ui/Label.vue
View File

@ -113,7 +113,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.label { .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 { &.small {
@apply text-xs py-0.5 px-1 leading-tight h-5; @apply text-xs py-0.5 px-1 leading-tight h-5;
@ -143,7 +143,7 @@ export default {
} }
} }
&.secondary { &.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 { a {
@apply text-slate-900 dark:text-slate-100; @apply text-slate-900 dark:text-slate-100;
@ -184,11 +184,11 @@ export default {
} }
&.smooth { &.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 { &.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;
} }
} }

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

@ -382,7 +382,7 @@ export default {
} }
&.conversation-selected { &.conversation-selected {
@apply bg-slate-25 dark:bg-slate-800; @apply bg-n-slate-2 dark:bg-n-slate-3;
} }
&.has-inbox-name { &.has-inbox-name {

9
app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
View File

@ -38,15 +38,16 @@ export default {
delay: { show: 1500, hide: 0 }, delay: { show: 1500, hide: 0 },
hideOnClick: true, 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="{ :class="{
'bg-n-ruby-5 text-n-ruby-11': isUrgent, 'bg-n-ruby-4 text-n-ruby-10': isUrgent,
'bg-n-slate-5 text-n-slate-11': !isUrgent, 'bg-n-slate-4 text-n-slate-11': !isUrgent,
}" }"
> >
<fluent-icon <fluent-icon
:icon="`priority-${priority.toLowerCase()}`" :icon="`priority-${priority.toLowerCase()}`"
size="14" :size="isUrgent ? 12 : 14"
class="flex-shrink-0"
view-box="0 0 14 14" view-box="0 0 14 14"
/> />
</span> </span>

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

@ -196,7 +196,7 @@ export default {
</script> </script>
<template> <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 <MenuItem
v-if="!hasUnreadMessages" v-if="!hasUnreadMessages"
:option="unreadOption" :option="unreadOption"

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

@ -18,16 +18,19 @@ export default {
</script> </script>
<template> <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 <fluent-icon
v-if="variant === 'icon' && option.icon" v-if="variant === 'icon' && option.icon"
:icon="option.icon" :icon="option.icon"
size="14" size="14"
class="menu-icon" class="flex-shrink-0"
/> />
<span <span
v-if="variant === 'label' && option.color" v-if="variant === 'label' && option.color"
class="label-pill" class="label-pill flex-shrink-0"
:style="{ backgroundColor: option.color }" :style="{ backgroundColor: option.color }"
/> />
<Thumbnail <Thumbnail
@ -36,9 +39,9 @@ export default {
:src="option.thumbnail" :src="option.thumbnail"
:status="option.status" :status="option.status"
size="20px" 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 }} {{ option.label }}
</p> </p>
</div> </div>
@ -47,14 +50,14 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.menu { .menu {
width: calc(var(--space-mega) * 2); 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 { .menu-label {
@apply my-0 mx-2 text-xs flex-shrink-0; @apply my-0 mx-2 text-xs flex-shrink-0;
} }
&:hover { &: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 { .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> </style>

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

@ -15,17 +15,17 @@ export default {
<template> <template>
<div <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' : ''" :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" /> <fluent-icon :icon="option.icon" size="14" class="menu-icon" />
<p class="my-0 mx-2 text-xs">{{ option.label }}</p> <p class="my-0 mx-2 text-xs">{{ option.label }}</p>
</div> </div>
<fluent-icon icon="chevron-right" size="12" /> <fluent-icon icon="chevron-right" size="12" />
<div <div
v-if="subMenuAvailable" 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 /> <slot />
</div> </div>

10
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
View File

@ -185,7 +185,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bulk-action__agents { .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 { .header {
@apply p-2.5; @apply p-2.5;
@ -200,7 +200,7 @@ export default {
@apply h-full; @apply h-full;
} }
.agent-list-search { .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 { .search-icon {
@apply text-slate-400 dark:text-slate-200; @apply text-slate-400 dark:text-slate-200;
} }
@ -215,7 +215,7 @@ export default {
@apply block z-10 absolute -top-3 text-left; @apply block z-10 absolute -top-3 text-left;
svg path { 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 { .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 { span {
@apply text-sm; @apply text-sm;
} }
@ -248,7 +248,7 @@ ul {
} }
} }
.search-container { .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 { .agent__list-loading {

44
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
View File

@ -9,6 +9,7 @@ import {
CMD_BULK_ACTION_RESOLVE_CONVERSATION, CMD_BULK_ACTION_RESOLVE_CONVERSATION,
} from 'dashboard/helper/commandbar/events'; } from 'dashboard/helper/commandbar/events';
import NextButton from 'dashboard/components-next/button/Button.vue';
import AgentSelector from './AgentSelector.vue'; import AgentSelector from './AgentSelector.vue';
import UpdateActions from './UpdateActions.vue'; import UpdateActions from './UpdateActions.vue';
import LabelActions from './LabelActions.vue'; import LabelActions from './LabelActions.vue';
@ -21,6 +22,7 @@ export default {
LabelActions, LabelActions,
TeamActions, TeamActions,
CustomSnoozeModal, CustomSnoozeModal,
NextButton,
}, },
props: { props: {
conversations: { conversations: {
@ -171,36 +173,36 @@ export default {
</span> </span>
</label> </label>
<div class="flex items-center gap-1 bulk-action__actions"> <div class="flex items-center gap-1 bulk-action__actions">
<woot-button <NextButton
v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')" v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
size="tiny" icon="i-lucide-tags"
variant="smooth" slate
color-scheme="secondary" xs
icon="tag" faded
@click="toggleLabelActions" @click="toggleLabelActions"
/> />
<woot-button <NextButton
v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')" v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
size="tiny" icon="i-lucide-repeat"
variant="smooth" slate
color-scheme="secondary" xs
icon="repeat" faded
@click="toggleUpdateActions" @click="toggleUpdateActions"
/> />
<woot-button <NextButton
v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')" v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
size="tiny" icon="i-lucide-user-round-plus"
variant="smooth" slate
color-scheme="secondary" xs
icon="person-assign" faded
@click="toggleAgentList" @click="toggleAgentList"
/> />
<woot-button <NextButton
v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')" v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
size="tiny" icon="i-lucide-users-round"
variant="smooth" slate
color-scheme="secondary" xs
icon="people-team-add" faded
@click="toggleTeamsList" @click="toggleTeamsList"
/> />
</div> </div>
@ -270,7 +272,7 @@ export default {
} }
.bulk-action__container { .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 { .bulk-action__panel {

14
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
View File

@ -110,7 +110,7 @@ export default {
@apply flex flex-col max-h-[15rem] min-h-[auto]; @apply flex flex-col max-h-[15rem] min-h-[auto];
.labels-list__header { .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 { .labels-list__body {
@ -131,7 +131,7 @@ export default {
} }
.label-list-search { .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 { .search-icon {
@apply text-slate-400 dark:text-slate-200; @apply text-slate-400 dark:text-slate-200;
@ -143,7 +143,7 @@ export default {
} }
.labels-container { .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 { .header {
@apply p-2.5; @apply p-2.5;
@ -166,7 +166,7 @@ export default {
@apply block z-10 absolute text-left -top-3; @apply block z-10 absolute text-left -top-3;
svg path { 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; @apply my-1 mx-0 py-0 px-2.5;
.item { .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 { &.label-selected {
@apply bg-slate-50 dark:bg-slate-900; @apply bg-slate-50 dark:bg-slate-900;
@ -202,13 +202,13 @@ ul {
} }
.label-pill { .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 { .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 { .actions-container {

10
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
View File

@ -92,7 +92,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.bulk-action__teams { .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 { .header {
@apply p-2.5; @apply p-2.5;
@ -107,7 +107,7 @@ export default {
@apply h-full; @apply h-full;
} }
.agent-list-search { .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 { .search-icon {
@apply text-slate-400 dark:text-slate-200; @apply text-slate-400 dark:text-slate-200;
} }
@ -122,7 +122,7 @@ export default {
@apply block z-10 absolute text-left -top-3; @apply block z-10 absolute text-left -top-3;
svg path { 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 { .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 { span {
@apply text-sm; @apply text-sm;
} }
} }
.search-container { .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> </style>

5
app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue
View File

@ -67,7 +67,7 @@ const actionLabel = key => {
<template> <template>
<div <div
v-on-clickaway="onClose" 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 <div
class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3" 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" d="M20 12l-8-8-12 12"
fill-rule="evenodd" fill-rule="evenodd"
stroke-width="1px" 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> </svg>
</div> </div>
@ -102,6 +102,7 @@ const actionLabel = key => {
color-scheme="secondary" color-scheme="secondary"
size="small" size="small"
:icon="action.icon" :icon="action.icon"
class="hover:!bg-n-slate-3 dark:hover:!bg-n-solid-3"
@click="updateConversations(action.key)" @click="updateConversations(action.key)"
> >
{{ actionLabel(action.key) }} {{ actionLabel(action.key) }}

2
app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue
View File

@ -86,7 +86,7 @@ const onShowLabels = e => {
? $t('CONVERSATION.CARD.HIDE_LABELS') ? $t('CONVERSATION.CARD.HIDE_LABELS')
: $t('CONVERSATION.CARD.SHOW_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" @click="onShowLabels"
> >
<fluent-icon <fluent-icon

2
app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
View File

@ -86,7 +86,7 @@ export default {
> >
<div <div
v-on-clickaway="closeDropdownLabel" v-on-clickaway="closeDropdownLabel"
class="label-wrap" class="label-wrap flex flex-wrap"
@keyup.esc="closeDropdownLabel" @keyup.esc="closeDropdownLabel"
> >
<AddLabel @add="toggleLabels" /> <AddLabel @add="toggleLabels" />