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

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;
}

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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];
.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 {

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

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

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

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

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

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

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