refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2025-11-18 03:54:19 -05:00
parent 73734b186b
commit ed6aabfbfd
3 changed files with 45 additions and 32 deletions

View file

@ -8,6 +8,9 @@
export let name = ''; export let name = '';
export let color = ''; export let color = '';
export let description = ''; export let description = '';
export let edit = false;
export let onDelete: Function = () => {};
</script> </script>
<div class="flex gap-2"> <div class="flex gap-2">
@ -59,3 +62,18 @@
/> />
</div> </div>
</div> </div>
{#if edit}
<div class="flex flex-col w-full mt-2">
<div class=" mb-0.5 text-xs text-gray-500">{$i18n.t('Actions')}</div>
<div class="flex-1">
<button
class="text-xs bg-transparent hover:underline cursor-pointer"
on:click={() => onDelete()}
>
{$i18n.t('Delete')}
</button>
</div>
</div>
{/if}

View file

@ -228,7 +228,14 @@
class="flex-1 mt-1 lg:mt-1 lg:h-[30rem] lg:max-h-[30rem] overflow-y-auto scrollbar-hidden" class="flex-1 mt-1 lg:mt-1 lg:h-[30rem] lg:max-h-[30rem] overflow-y-auto scrollbar-hidden"
> >
{#if selectedTab == 'general'} {#if selectedTab == 'general'}
<Display bind:name bind:description /> <Display
bind:name
bind:description
{edit}
onDelete={() => {
showDeleteConfirmDialog = true;
}}
/>
{:else if selectedTab == 'permissions'} {:else if selectedTab == 'permissions'}
<Permissions bind:permissions {defaultPermissions} /> <Permissions bind:permissions {defaultPermissions} />
{:else if selectedTab == 'users'} {:else if selectedTab == 'users'}
@ -286,37 +293,25 @@
{/if} {/if}
</div> --> </div> -->
<div class="flex justify-between pt-3 text-sm font-medium gap-1.5"> {#if ['general', 'permissions'].includes(selectedTab)}
{#if edit} <div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
<button <button
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-900 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center" class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
type="button" ? ' cursor-not-allowed'
on:click={() => { : ''}"
showDeleteConfirmDialog = true; type="submit"
}} disabled={loading}
> >
{$i18n.t('Delete')} {$i18n.t('Save')}
{#if loading}
<div class="ml-2 self-center">
<Spinner />
</div>
{/if}
</button> </button>
{:else} </div>
<div></div> {/if}
{/if}
<button
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
disabled={loading}
>
{$i18n.t('Save')}
{#if loading}
<div class="ml-2 self-center">
<Spinner />
</div>
{/if}
</button>
</div>
</form> </form>
</div> </div>
</div> </div>

View file

@ -73,8 +73,8 @@
} }
</script> </script>
<div class=" max-h-full h-full w-full flex flex-col"> <div class=" max-h-full h-full w-full flex flex-col overflow-y-hidden">
<div class="w-full h-fit"> <div class="w-full h-fit mb-1.5">
<div class="flex flex-1 h-fit"> <div class="flex flex-1 h-fit">
<div class=" self-center mr-3"> <div class=" self-center mr-3">
<Search /> <Search />
@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="mt-3 overflow-y-auto flex-1"> <div class="flex-1 overflow-y-auto scrollbar-hidden">
<div class="flex flex-col gap-2.5"> <div class="flex flex-col gap-2.5">
{#if users.length > 0} {#if users.length > 0}
{#each users as user, userIdx (user.id)} {#each users as user, userIdx (user.id)}