refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-11-20 19:57:11 -05:00
parent 557170c0b6
commit cd30152c83
4 changed files with 275 additions and 262 deletions

View file

@ -25,6 +25,7 @@
import ChevronDown from '$lib/components/icons/ChevronDown.svelte'; import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { config } from '$lib/stores'; import { config } from '$lib/stores';
import Spinner from '$lib/components/common/Spinner.svelte';
let page = 1; let page = 1;
let items = null; let items = null;
@ -143,13 +144,20 @@
<FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} /> <FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} />
{#if items === null || total === null}
<div class="my-10">
<Spinner className="size-5" />
</div>
{:else}
<div class="mt-0.5 mb-1 gap-1 flex flex-row justify-between"> <div class="mt-0.5 mb-1 gap-1 flex flex-row justify-between">
<div class="flex md:self-center text-lg font-medium px-0.5"> <div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Feedback History')} {$i18n.t('Feedback History')}
</div>
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="text-lg font-medium text-gray-500 dark:text-gray-500">
{total}
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{total}</span> </div>
</div> </div>
{#if total > 0} {#if total > 0}
@ -174,7 +182,9 @@
{$i18n.t('No feedbacks found')} {$i18n.t('No feedbacks found')}
</div> </div>
{:else} {:else}
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"> <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full"
>
<thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200"> <thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
<tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850"> <tr class=" border-b-[1.5px] border-gray-50 dark:border-gray-850">
<th <th
@ -396,3 +406,4 @@
{#if total > 30} {#if total > 30}
<Pagination bind:page count={total} perPage={30} /> <Pagination bind:page count={total} perPage={30} />
{/if} {/if}
{/if}

View file

@ -339,16 +339,14 @@
<div <div
class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900" class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
> >
<div class="flex md:self-center text-lg font-medium px-0.5 shrink-0 items-center"> <div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
<div class=" gap-1"> <div>
{$i18n.t('Leaderboard')} {$i18n.t('Leaderboard')}
</div> </div>
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> <div class="text-lg font-medium text-gray-500 dark:text-gray-500">
{rankedModels.length}
<span class="text-lg font-medium text-gray-500 dark:text-gray-300 mr-1.5" </div>
>{rankedModels.length}</span
>
</div> </div>
<div class=" flex space-x-2"> <div class=" flex space-x-2">

View file

@ -105,11 +105,14 @@
/> />
<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between"> <div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
<div class="flex md:self-center text-lg font-medium px-0.5"> <div class="flex items-center md:self-center text-xl font-medium px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Groups')} {$i18n.t('Groups')}
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" /> </div>
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{groups.length}</span> <div class="text-lg font-medium text-gray-500 dark:text-gray-500">
{groups.length}
</div>
</div> </div>
<div class="flex gap-1"> <div class="flex gap-1">

View file

@ -154,12 +154,12 @@
<div <div
class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900" class="pt-0.5 pb-1 gap-1 flex flex-col md:flex-row justify-between sticky top-0 z-10 bg-white dark:bg-gray-900"
> >
<div class="flex md:self-center text-lg font-medium px-0.5"> <div class="flex md:self-center text-lg font-medium px-0.5 gap-2">
<div class="flex-shrink-0"> <div class="flex-shrink-0">
{$i18n.t('Users')} {$i18n.t('Users')}
</div> </div>
<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
<div>
{#if ($config?.license_metadata?.seats ?? null) !== null} {#if ($config?.license_metadata?.seats ?? null) !== null}
{#if total > $config?.license_metadata?.seats} {#if total > $config?.license_metadata?.seats}
<span class="text-lg font-medium text-red-500" <span class="text-lg font-medium text-red-500"
@ -176,6 +176,7 @@
<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{total}</span> <span class="text-lg font-medium text-gray-500 dark:text-gray-300">{total}</span>
{/if} {/if}
</div> </div>
</div>
<div class="flex gap-1"> <div class="flex gap-1">
<div class=" flex w-full space-x-2"> <div class=" flex w-full space-x-2">