refac: styling

This commit is contained in:
Timothy J. Baek 2024-07-08 13:35:25 -07:00
parent 4b6ee584c2
commit 088e7b02a9
14 changed files with 26 additions and 26 deletions

View File

@ -24,7 +24,7 @@
<Modal bind:show> <Modal bind:show>
<div class="px-5 pt-4 dark:text-gray-300 text-gray-700"> <div class="px-5 pt-4 dark:text-gray-300 text-gray-700">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="text-xl font-bold"> <div class="text-xl font-semibold">
{$i18n.t('Whats New in')} {$i18n.t('Whats New in')}
{$WEBUI_NAME} {$WEBUI_NAME}
<Confetti x={[-1, -0.25]} y={[0, 0.5]} /> <Confetti x={[-1, -0.25]} y={[0, 0.5]} />
@ -63,7 +63,7 @@
{#if changelog} {#if changelog}
{#each Object.keys(changelog) as version} {#each Object.keys(changelog) as version}
<div class=" mb-3 pr-2"> <div class=" mb-3 pr-2">
<div class="font-bold text-xl mb-1 dark:text-white"> <div class="font-semibold text-xl mb-1 dark:text-white">
v{version} - {changelog[version].date} v{version} - {changelog[version].date}
</div> </div>
@ -72,7 +72,7 @@
{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section} {#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
<div class=""> <div class="">
<div <div
class="font-bold uppercase text-xs {section === 'added' class="font-semibold uppercase text-xs {section === 'added'
? 'text-white bg-blue-600' ? 'text-white bg-blue-600'
: section === 'fixed' : section === 'fixed'
? 'text-white bg-green-600' ? 'text-white bg-green-600'

View File

@ -1,3 +1,3 @@
<div class=" self-center font-bold mb-0.5 line-clamp-1 contents"> <div class=" self-center font-semibold mb-0.5 line-clamp-1 contents">
<slot /> <slot />
</div> </div>

View File

@ -260,7 +260,7 @@
<div class="flex gap-0.5 self-start h-full mb-0.5 -translate-x-1"> <div class="flex gap-0.5 self-start h-full mb-0.5 -translate-x-1">
{#each item.model?.info?.meta.tags as tag} {#each item.model?.info?.meta.tags as tag}
<div <div
class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{tag.name} {tag.name}
</div> </div>
@ -299,7 +299,7 @@
<div class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px]"> <div class="flex gap-0.5 self-center items-center h-full translate-y-[0.5px]">
{#each item.model?.info?.meta.tags as tag} {#each item.model?.info?.meta.tags as tag}
<div <div
class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{tag.name} {tag.name}
</div> </div>

View File

@ -45,7 +45,7 @@
<div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5"> <div class=" flex flex-col md:flex-row md:items-center flex-1 text-sm w-fit gap-1.5">
<div class="flex justify-between self-start"> <div class="flex justify-between self-start">
<div <div
class=" text-xs font-black {classNames[banner.type] ?? class=" text-xs font-bold {classNames[banner.type] ??
classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5" classNames['info']} w-fit px-2 rounded uppercase line-clamp-1 mr-0.5"
> >
{banner.type} {banner.type}
@ -54,7 +54,7 @@
{#if banner.url} {#if banner.url}
<div class="flex md:hidden group w-fit md:items-center"> <div class="flex md:hidden group w-fit md:items-center">
<a <a
class="text-gray-700 dark:text-white text-xs font-bold underline" class="text-gray-700 dark:text-white text-xs font-semibold underline"
href="/assets/files/whitepaper.pdf" href="/assets/files/whitepaper.pdf"
target="_blank">Learn More</a target="_blank">Learn More</a
> >
@ -88,7 +88,7 @@
{#if banner.url} {#if banner.url}
<div class="hidden md:flex group w-fit md:items-center"> <div class="hidden md:flex group w-fit md:items-center">
<a <a
class="text-gray-700 dark:text-white text-xs font-bold underline" class="text-gray-700 dark:text-white text-xs font-semibold underline"
href="/" href="/"
target="_blank">Learn More</a target="_blank">Learn More</a
> >

View File

@ -109,7 +109,7 @@
<div class="flex flex-1"> <div class="flex flex-1">
<div <div
class="bg-gray-200 dark:bg-gray-800 font-bold px-3 py-0.5 border border-r-0 dark:border-gray-800 rounded-l-xl flex items-center" class="bg-gray-200 dark:bg-gray-800 font-semibold px-3 py-0.5 border border-r-0 dark:border-gray-800 rounded-l-xl flex items-center"
> >
# #
</div> </div>

View File

@ -407,7 +407,7 @@
{/if} {/if}
</div> </div>
<div class=" self-center flex-1"> <div class=" self-center flex-1">
<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div> <div class=" font-semibold line-clamp-1">#{doc.name} ({doc.filename})</div>
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> <div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
{doc.title} {doc.title}
</div> </div>

View File

@ -200,14 +200,14 @@
<div class=" flex-1 self-center pl-1"> <div class=" flex-1 self-center pl-1">
<div class=" font-semibold flex items-center gap-1.5"> <div class=" font-semibold flex items-center gap-1.5">
<div <div
class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{func.type} {func.type}
</div> </div>
{#if func?.meta?.manifest?.version} {#if func?.meta?.manifest?.version}
<div <div
class="text-xs font-black px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class="text-xs font-bold px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
v{func?.meta?.manifest?.version ?? ''} v{func?.meta?.manifest?.version ?? ''}
</div> </div>
@ -430,7 +430,7 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold line-clamp-1">{$i18n.t('Discover a function')}</div> <div class=" font-semibold line-clamp-1">{$i18n.t('Discover a function')}</div>
<div class=" text-sm line-clamp-1"> <div class=" text-sm line-clamp-1">
{$i18n.t('Discover, download, and explore custom functions')} {$i18n.t('Discover, download, and explore custom functions')}
</div> </div>

View File

@ -271,7 +271,7 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold line-clamp-1">{$i18n.t('Create a model')}</div> <div class=" font-semibold line-clamp-1">{$i18n.t('Create a model')}</div>
<div class=" text-sm line-clamp-1">{$i18n.t('Customize models for a specific purpose')}</div> <div class=" text-sm line-clamp-1">{$i18n.t('Customize models for a specific purpose')}</div>
</div> </div>
</a> </a>
@ -307,7 +307,7 @@
<div <div
class=" flex-1 self-center {model?.info?.meta?.hidden ?? false ? 'text-gray-500' : ''}" class=" flex-1 self-center {model?.info?.meta?.hidden ?? false ? 'text-gray-500' : ''}"
> >
<div class=" font-bold line-clamp-1">{model.name}</div> <div class=" font-semibold line-clamp-1">{model.name}</div>
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> <div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
{!!model?.info?.meta?.description ? model?.info?.meta?.description : model.id} {!!model?.info?.meta?.description ? model?.info?.meta?.description : model.id}
</div> </div>
@ -518,7 +518,7 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold line-clamp-1">{$i18n.t('Discover a model')}</div> <div class=" font-semibold line-clamp-1">{$i18n.t('Discover a model')}</div>
<div class=" text-sm line-clamp-1"> <div class=" text-sm line-clamp-1">
{$i18n.t('Discover, download, and explore model presets')} {$i18n.t('Discover, download, and explore model presets')}
</div> </div>

View File

@ -119,7 +119,7 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
class=" w-fit text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" w-fit text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
{item?.type ?? 'Document'} {item?.type ?? 'Document'}
</div> </div>

View File

@ -119,7 +119,7 @@
<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> <div class=" flex flex-1 space-x-4 cursor-pointer w-full">
<a href={`/workspace/prompts/edit?command=${encodeURIComponent(prompt.command)}`}> <a href={`/workspace/prompts/edit?command=${encodeURIComponent(prompt.command)}`}>
<div class=" flex-1 self-center pl-5"> <div class=" flex-1 self-center pl-5">
<div class=" font-bold line-clamp-1">{prompt.command}</div> <div class=" font-semibold line-clamp-1">{prompt.command}</div>
<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1"> <div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
{prompt.title} {prompt.title}
</div> </div>
@ -299,7 +299,7 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold line-clamp-1">{$i18n.t('Discover a prompt')}</div> <div class=" font-semibold line-clamp-1">{$i18n.t('Discover a prompt')}</div>
<div class=" text-sm line-clamp-1"> <div class=" text-sm line-clamp-1">
{$i18n.t('Discover, download, and explore custom prompts')} {$i18n.t('Discover, download, and explore custom prompts')}
</div> </div>

View File

@ -177,14 +177,14 @@
<div class=" flex-1 self-center pl-1"> <div class=" flex-1 self-center pl-1">
<div class=" font-semibold flex items-center gap-1.5"> <div class=" font-semibold flex items-center gap-1.5">
<div <div
class=" text-xs font-black px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class=" text-xs font-bold px-1 rounded uppercase line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
TOOL TOOL
</div> </div>
{#if tool?.meta?.manifest?.version} {#if tool?.meta?.manifest?.version}
<div <div
class="text-xs font-black px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200" class="text-xs font-bold px-1 rounded line-clamp-1 bg-gray-500/20 text-gray-700 dark:text-gray-200"
> >
v{tool?.meta?.manifest?.version ?? ''} v{tool?.meta?.manifest?.version ?? ''}
</div> </div>
@ -389,7 +389,7 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold line-clamp-1">{$i18n.t('Discover a tool')}</div> <div class=" font-semibold line-clamp-1">{$i18n.t('Discover a tool')}</div>
<div class=" text-sm line-clamp-1"> <div class=" text-sm line-clamp-1">
{$i18n.t('Discover, download, and explore custom tools')} {$i18n.t('Discover, download, and explore custom tools')}
</div> </div>

View File

@ -137,7 +137,7 @@
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<div <div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg" class="bg-gray-200 dark:bg-gray-600 font-semibold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
> >
/ /
</div> </div>

View File

@ -123,7 +123,7 @@
<div class="flex items-center mb-1"> <div class="flex items-center mb-1">
<div <div
class="bg-gray-200 dark:bg-gray-600 font-bold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg" class="bg-gray-200 dark:bg-gray-600 font-semibold px-3 py-1 border border-r-0 dark:border-gray-600 rounded-l-lg"
> >
/ /
</div> </div>

View File

@ -120,7 +120,7 @@
<!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center"> <!-- <div class="hidden lg:flex lg:flex-1 px-10 md:px-16 w-full bg-yellow-50 justify-center">
<div class=" my-auto pb-16 text-left"> <div class=" my-auto pb-16 text-left">
<div> <div>
<div class=" font-bold text-yellow-600 text-4xl"> <div class=" font-semibold text-yellow-600 text-4xl">
Get up and running with <br />large language models, locally. Get up and running with <br />large language models, locally.
</div> </div>