refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-09-16 15:57:20 -05:00
parent 71f99228ef
commit c870b2ea29
6 changed files with 24 additions and 36 deletions

View file

@ -56,7 +56,7 @@
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4"> <div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
<div <div
id="users-tabs-container" id="users-tabs-container"
class="tabs mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none" class="tabs mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
> >
<button <button
id="leaderboard" id="leaderboard"

View file

@ -169,7 +169,7 @@
<FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} /> <FeedbackModal bind:show={showFeedbackModal} {selectedFeedback} onClose={closeFeedbackModal} />
<div class="mt-0.5 mb-2 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 md:self-center text-lg font-medium px-0.5">
{$i18n.t('Feedback History')} {$i18n.t('Feedback History')}
@ -194,24 +194,18 @@
{/if} {/if}
</div> </div>
<div <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
>
{#if (feedbacks ?? []).length === 0} {#if (feedbacks ?? []).length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1"> <div class="text-center text-xs text-gray-500 dark:text-gray-400 py-1">
{$i18n.t('No feedbacks found')} {$i18n.t('No feedbacks found')}
</div> </div>
{:else} {:else}
<table <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm" <thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
> <tr class=" border-b-2 border-gray-100 dark:border-gray-800">
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5"
>
<tr class="">
<th <th
scope="col" scope="col"
class="px-3 py-1.5 cursor-pointer select-none w-3" class="px-2.5 py-2 cursor-pointer select-none w-3"
on:click={() => setSortKey('user')} on:click={() => setSortKey('user')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">
@ -234,7 +228,7 @@
<th <th
scope="col" scope="col"
class="px-3 pr-1.5 cursor-pointer select-none" class="px-2.5 py-2 cursor-pointer select-none"
on:click={() => setSortKey('model_id')} on:click={() => setSortKey('model_id')}
> >
<div class="flex gap-1.5 items-center"> <div class="flex gap-1.5 items-center">
@ -257,7 +251,7 @@
<th <th
scope="col" scope="col"
class="px-3 py-1.5 text-right cursor-pointer select-none w-fit" class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
on:click={() => setSortKey('rating')} on:click={() => setSortKey('rating')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">
@ -280,7 +274,7 @@
<th <th
scope="col" scope="col"
class="px-3 py-1.5 text-right cursor-pointer select-none w-0" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"
on:click={() => setSortKey('updated_at')} on:click={() => setSortKey('updated_at')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">
@ -301,7 +295,7 @@
</div> </div>
</th> </th>
<th scope="col" class="px-3 py-1.5 text-right cursor-pointer select-none w-0"> </th> <th scope="col" class="px-2.5 py-2 text-right cursor-pointer select-none w-0"> </th>
</tr> </tr>
</thead> </thead>
<tbody class=""> <tbody class="">

View file

@ -337,7 +337,7 @@
/> />
<div <div
class="pt-0.5 pb-2 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 md:self-center text-lg font-medium px-0.5 shrink-0 items-center">
<div class=" gap-1"> <div class=" gap-1">
@ -370,9 +370,7 @@
</div> </div>
</div> </div>
<div <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm">
class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full rounded-sm pt-0.5"
>
{#if loadingLeaderboard} {#if loadingLeaderboard}
<div class=" absolute top-0 bottom-0 left-0 right-0 flex"> <div class=" absolute top-0 bottom-0 left-0 right-0 flex">
<div class="m-auto"> <div class="m-auto">
@ -386,17 +384,15 @@
</div> </div>
{:else} {:else}
<table <table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded {loadingLeaderboard class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full {loadingLeaderboard
? 'opacity-20' ? 'opacity-20'
: ''}" : ''}"
> >
<thead <thead class="text-xs text-gray-800 uppercase bg-transparent dark:text-gray-200">
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-850 dark:text-gray-400 -translate-y-0.5" <tr class=" border-b-2 border-gray-100 dark:border-gray-800">
>
<tr class="">
<th <th
scope="col" scope="col"
class="px-3 py-1.5 cursor-pointer select-none w-3" class="px-2.5 py-2 cursor-pointer select-none w-3"
on:click={() => setSortKey('rating')} on:click={() => setSortKey('rating')}
> >
<div class="flex gap-1.5 items-center"> <div class="flex gap-1.5 items-center">
@ -418,7 +414,7 @@
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-1.5 cursor-pointer select-none" class="px-2.5 py-2 cursor-pointer select-none"
on:click={() => setSortKey('name')} on:click={() => setSortKey('name')}
> >
<div class="flex gap-1.5 items-center"> <div class="flex gap-1.5 items-center">
@ -440,7 +436,7 @@
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-1.5 text-right cursor-pointer select-none w-fit" class="px-2.5 py-2 text-right cursor-pointer select-none w-fit"
on:click={() => setSortKey('rating')} on:click={() => setSortKey('rating')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">
@ -462,7 +458,7 @@
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-1.5 text-right cursor-pointer select-none w-5" class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
on:click={() => setSortKey('won')} on:click={() => setSortKey('won')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">
@ -484,7 +480,7 @@
</th> </th>
<th <th
scope="col" scope="col"
class="px-3 py-1.5 text-right cursor-pointer select-none w-5" class="px-2.5 py-2 text-right cursor-pointer select-none w-5"
on:click={() => setSortKey('lost')} on:click={() => setSortKey('lost')}
> >
<div class="flex gap-1.5 items-center justify-end"> <div class="flex gap-1.5 items-center justify-end">

View file

@ -83,7 +83,7 @@
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4"> <div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
<div <div
id="admin-settings-tabs-container" id="admin-settings-tabs-container"
class="tabs mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none" class="tabs mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
> >
<button <button
id="general" id="general"

View file

@ -58,7 +58,7 @@
<div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4"> <div class="flex flex-col lg:flex-row w-full h-full pb-2 lg:space-x-4">
<div <div
id="users-tabs-container" id="users-tabs-container"
class="mx-[16px] lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none" class="mx-[16px] lg:mx-0 lg:pl-[16px] lg:pr-0 flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
> >
<button <button
id="overview" id="overview"

View file

@ -220,9 +220,7 @@
</div> </div>
<div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full"> <div class="scrollbar-hidden relative whitespace-nowrap overflow-x-auto max-w-full">
<table <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full">
class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto max-w-full rounded-sm"
>
<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-2 border-gray-100 dark:border-gray-800"> <tr class=" border-b-2 border-gray-100 dark:border-gray-800">
<th <th