feat: update colors for v4 (#10660)

Porting changes from https://github.com/chatwoot/chatwoot/pull/10552

---------

Co-authored-by: Pranav <pranav@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: iamsivin <iamsivin@gmail.com>
Co-authored-by: Pranav <pranavrajs@gmail.com>
This commit is contained in:
Shivam Mishra
2025-01-15 17:13:03 +05:30
committed by GitHub
parent a4c0c76fa5
commit 7fd8b4d03a
79 changed files with 660 additions and 795 deletions

View File

@@ -33,22 +33,21 @@ const onToggle = () => {
</script>
<template>
<div class="-mt-px text-sm">
<div class="text-sm">
<button
class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
class="flex items-center select-none w-full rounded-lg bg-n-slate-2 border border-n-weak m-0 cursor-grab justify-between py-2 px-4 drag-handle"
:class="{ 'rounded-bl-none rounded-br-none': isOpen }"
@click.stop="onToggle"
>
<div class="flex justify-between mb-0.5">
<div class="flex justify-between">
<EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
<h5
class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
>
<h5 class="text-n-slate-12 text-sm mb-0 py-0 pr-2 pl-0">
{{ title }}
</h5>
</div>
<div class="flex flex-row">
<slot name="button" />
<div class="flex justify-end w-3 text-woot-500">
<div class="flex justify-end w-3 text-n-blue-text cursor-pointer">
<fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
<fluent-icon v-else size="24" icon="add" type="solid" />
</div>
@@ -56,8 +55,8 @@ const onToggle = () => {
</button>
<div
v-if="isOpen"
class="bg-white dark:bg-slate-900"
:class="compact ? 'p-0' : 'p-4'"
class="bg-n-background border border-n-weak dark:border-n-slate-2 border-t-0 rounded-br-lg rounded-bl-lg overflow-hidden"
:class="compact ? 'p-0' : 'px-2 py-4'"
>
<slot />
</div>