feat(chatview): chat colors

banbig · Mar 25, 2024 · 274426e · 274426e
1 parent af92768
commit 274426e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/src/components/Chat/Chat.svelte b/src/components/Chat/Chat.svelte
@@ -77,8 +77,8 @@
         bind:this={chatWindow}
         on:scroll={() => (isAutoScrolling = chatWindow.scrollTop + chatWindow.clientHeight + 1 >= chatWindow.scrollHeight)}
         class="chat-window w-full flex-grow select-text overflow-y-scroll rounded-md border border-solid border-[--background-modifier-border] {$isChatInSidebar
-            ? 'bg-[--background-secondary-alt]'
-            : 'bg-[--background-primary-alt]'}"
+            ? 'bg-[--background-secondary]'
+            : 'bg-[--background-primary]'}"
     >
         {#each $chatHistory as message (message.id)}
             <MessageContainer role={message.role}>

diff --git a/src/components/Chat/MessageContainer.svelte b/src/components/Chat/MessageContainer.svelte
@@ -9,31 +9,27 @@
     {#if $data.isChatComfy}
         <div class="my-4 mr-4 flex justify-end">
             <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div class="group max-w-[80%] [&_p]:mb-2 rounded-t-lg rounded-bl-lg pb-1 px-4" style="background-color: var(--text-selection);">
+            <div class="group max-w-[80%] rounded-t-lg rounded-bl-lg bg-[--text-selection] px-4 pb-1 [&_p]:mb-2">
                 <slot />
             </div>
         </div>
     {:else}
         <div class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] p-2 pr-4">
-            <div class="text-[--text-accent] mt-2 font-bold">{$t('chat.user')}</div>
+            <div class="mt-2 font-bold text-[--text-accent]">{$t('chat.user')}</div>
             <slot />
         </div>
     {/if}
 {:else if $data.isChatComfy}
-    <div
-        class="group ml-4 w-fit max-w-[80%] [&_p]:mb-2 rounded-t-lg rounded-br-lg pb-1 px-4 mt-4 pt-[1px] {$isChatInSidebar
-            ? 'bg-[--background-secondary]'
-            : 'bg-[--background-primary]'}"
-    >
+    <div class="group ml-4 mt-4 w-fit max-w-[80%] rounded-t-lg rounded-br-lg bg-[--background-primary-alt] px-4 pb-1 pt-[1px] [&_p]:mb-2">
         <slot />
     </div>
 {:else}
     <div
         class="group border-x-0 border-b border-t-0 border-solid border-[--background-modifier-border] p-2 pr-4 {$isChatInSidebar
-            ? 'bg-[--background-secondary]'
-            : 'bg-[--background-primary]'}"
+            ? 'bg-[--background-secondary-alt]'
+            : 'bg-[--background-primary-alt]'}"
     >
-        <div class="text-[--text-accent] mt-2 font-bold">{$t('chat.assistant')}</div>
+        <div class="mt-2 font-bold text-[--text-accent]">{$t('chat.assistant')}</div>
         <slot />
     </div>
 {/if}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,7 +8,7 @@ export default {
                     DEFAULT: 'hsl(var(--accent-h), var(--accent-s), var(--accent-l))',
                 },
                 secondary: {
-                    DEFAULT: 'var(--color-base-50)',
+                    DEFAULT: 'hsl(var(--accent-h), 10%, var(--accent-l))',
                 },
                 slate: {
                     0o0: 'var(--color-base-00)',