refac: styling

This commit is contained in:
Timothy J. Baek 2024-10-21 21:32:45 -07:00
parent ae44445464
commit a7aa669038
3 changed files with 15 additions and 16 deletions

View File

@ -230,7 +230,7 @@
<div <div
class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay class="w-full {($showOverview || $showArtifacts) && !$showCallOverlay
? ' ' ? ' '
: 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-800'} rounded-lg z-40 pointer-events-auto overflow-y-auto scrollbar-hidden" : 'px-4 py-4 bg-white dark:shadow-lg dark:bg-gray-850 border border-gray-50 dark:border-gray-850'} rounded-xl z-40 pointer-events-auto overflow-y-auto scrollbar-hidden"
> >
{#if $showCallOverlay} {#if $showCallOverlay}
<div class="w-full h-full flex justify-center"> <div class="w-full h-full flex justify-center">

View File

@ -30,7 +30,7 @@
<div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5"> <div class=" dark:text-gray-200 text-sm font-primary py-0.5 px-0.5">
{#if chatFiles.length > 0} {#if chatFiles.length > 0}
<Collapsible title={$i18n.t('Files')} open={true}> <Collapsible title={$i18n.t('Files')} open={true} buttonClassName="w-full">
<div class="flex flex-col gap-1 mt-1.5" slot="content"> <div class="flex flex-col gap-1 mt-1.5" slot="content">
{#each chatFiles as file, fileIdx} {#each chatFiles as file, fileIdx}
<FileItem <FileItem
@ -56,31 +56,31 @@
</div> </div>
</Collapsible> </Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-850" /> <hr class="my-2 border-gray-50 dark:border-gray-800" />
{/if} {/if}
<Collapsible title={$i18n.t('Valves')}> <Collapsible title={$i18n.t('Valves')} buttonClassName="w-full">
<div class="text-sm mt-1.5" slot="content"> <div class="text-sm" slot="content">
<Valves /> <Valves />
</div> </div>
</Collapsible> </Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-850" /> <hr class="my-2 border-gray-50 dark:border-gray-800" />
<Collapsible title={$i18n.t('System Prompt')} open={true}> <Collapsible title={$i18n.t('System Prompt')} open={true} buttonClassName="w-full">
<div class=" mt-1.5" slot="content"> <div class="" slot="content">
<textarea <textarea
bind:value={params.system} bind:value={params.system}
class="w-full rounded-lg px-3.5 py-2.5 text-sm dark:text-gray-300 dark:bg-gray-850 border border-gray-50 dark:border-gray-850 outline-none resize-none" class="w-full text-xs py-1.5 bg-transparent outline-none resize-none"
rows="4" rows="4"
placeholder={$i18n.t('Enter system prompt')} placeholder={$i18n.t('Enter system prompt')}
/> />
</div> </div>
</Collapsible> </Collapsible>
<hr class="my-2 border-gray-50 dark:border-gray-850" /> <hr class="my-2 border-gray-50 dark:border-gray-800" />
<Collapsible title={$i18n.t('Advanced Params')} open={true}> <Collapsible title={$i18n.t('Advanced Params')} open={true} buttonClassName="w-full">
<div class="text-sm mt-1.5" slot="content"> <div class="text-sm mt-1.5" slot="content">
<div> <div>
<AdvancedParams admin={$user?.role === 'admin'} bind:params /> <AdvancedParams admin={$user?.role === 'admin'} bind:params />

View File

@ -12,7 +12,8 @@
export let open = false; export let open = false;
export let className = ''; export let className = '';
export let buttonClassName = 'w-fit'; export let buttonClassName =
'w-fit text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition';
export let title = null; export let title = null;
export let grow = false; export let grow = false;
@ -33,10 +34,8 @@
} }
}} }}
> >
<div <div class=" w-full font-medium flex items-center justify-between gap-2">
class=" w-fit font-medium flex items-center justify-between gap-2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 transition" <div class="">
>
<div class=" ">
{title} {title}
</div> </div>