refac: styling

This commit is contained in:
Timothy J. Baek 2024-05-04 02:05:09 -07:00
parent 24c0dbec0d
commit 1c39e5cff9
2 changed files with 28 additions and 25 deletions
src/routes

View File

@ -201,11 +201,11 @@
> >
{#if loaded} {#if loaded}
{#if !['user', 'admin'].includes($user.role)} {#if !['user', 'admin'].includes($user.role)}
<div class="fixed w-full h-full flex z-50"> <div class="fixed w-full h-full flex z-[999]">
<div <div
class="absolute w-full h-full backdrop-blur-md bg-white/20 dark:bg-gray-900/50 flex justify-center" class="absolute w-full h-full backdrop-blur-lg bg-white/10 dark:bg-gray-900/50 flex justify-center"
> >
<div class="m-auto pb-44 flex flex-col justify-center"> <div class="m-auto pb-10 flex flex-col justify-center">
<div class="max-w-md"> <div class="max-w-md">
<div class="text-center dark:text-white text-2xl font-medium z-50"> <div class="text-center dark:text-white text-2xl font-medium z-50">
Account Activation Pending<br /> Contact Admin for WebUI Access Account Activation Pending<br /> Contact Admin for WebUI Access

View File

@ -81,7 +81,7 @@
</div> </div>
</div> </div>
<div class=" bg-white dark:bg-gray-900 min-h-screen w-full flex justify-center font-mona"> <div class=" bg-white dark:bg-gray-950 min-h-screen w-full flex justify-center font-mona">
<!-- <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>
@ -96,7 +96,7 @@
</div> </div>
</div> --> </div> -->
<div class="w-full sm:max-w-lg px-4 min-h-screen flex flex-col"> <div class="w-full sm:max-w-md px-10 min-h-screen flex flex-col text-center">
{#if $config?.trusted_header_auth ?? false} {#if $config?.trusted_header_auth ?? false}
<div class=" my-auto pb-10 w-full"> <div class=" my-auto pb-10 w-full">
<div <div
@ -114,27 +114,29 @@
</div> </div>
</div> </div>
{:else} {:else}
<div class=" my-auto pb-10 w-full"> <div class=" my-auto pb-10 w-full dark:text-gray-100">
<form <form
class=" flex flex-col justify-center bg-white py-6 sm:py-16 px-6 sm:px-16 rounded-2xl" class=" flex flex-col justify-center"
on:submit|preventDefault={() => { on:submit|preventDefault={() => {
submitHandler(); submitHandler();
}} }}
> >
<div class=" text-xl sm:text-2xl font-bold"> <div class="mb-1">
{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Sign up')} <div class=" text-2xl font-bold">
{$i18n.t('to')} {mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Sign up')}
{$WEBUI_NAME} {$i18n.t('to')}
</div> {$WEBUI_NAME}
{#if mode === 'signup'}
<div class=" mt-1 text-xs font-medium text-gray-500">
{$WEBUI_NAME}
{$i18n.t(
'does not make any external connections, and your data stays securely on your locally hosted server.'
)}
</div> </div>
{/if}
{#if mode === 'signup'}
<div class=" mt-1 text-xs font-medium text-gray-500">
{$WEBUI_NAME}
{$i18n.t(
'does not make any external connections, and your data stays securely on your locally hosted server.'
)}
</div>
{/if}
</div>
<div class="flex flex-col mt-4"> <div class="flex flex-col mt-4">
{#if mode === 'signup'} {#if mode === 'signup'}
@ -143,14 +145,14 @@
<input <input
bind:value={name} bind:value={name}
type="text" type="text"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm" class=" px-5 py-3 rounded-2xl w-full text-sm border dark:border-none dark:bg-gray-900"
autocomplete="name" autocomplete="name"
placeholder={$i18n.t('Enter Your Full Name')} placeholder={$i18n.t('Enter Your Full Name')}
required required
/> />
</div> </div>
<hr class=" my-3" /> <hr class=" my-3 dark:border-gray-900" />
{/if} {/if}
<div class="mb-2"> <div class="mb-2">
@ -158,7 +160,7 @@
<input <input
bind:value={email} bind:value={email}
type="email" type="email"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm" class=" px-5 py-3 rounded-2xl w-full text-sm border dark:border-none dark:bg-gray-900"
autocomplete="email" autocomplete="email"
placeholder={$i18n.t('Enter Your Email')} placeholder={$i18n.t('Enter Your Email')}
required required
@ -167,10 +169,11 @@
<div> <div>
<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Password')}</div> <div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Password')}</div>
<input <input
bind:value={password} bind:value={password}
type="password" type="password"
class=" border px-4 py-2.5 rounded-2xl w-full text-sm" class=" px-5 py-3 rounded-2xl w-full text-sm border dark:border-none dark:bg-gray-900"
placeholder={$i18n.t('Enter Your Password')} placeholder={$i18n.t('Enter Your Password')}
autocomplete="current-password" autocomplete="current-password"
required required
@ -180,7 +183,7 @@
<div class="mt-5"> <div class="mt-5">
<button <button
class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition" class=" bg-gray-900 hover:bg-gray-800 w-full rounded-2xl text-white font-semibold text-sm py-3 transition"
type="submit" type="submit"
> >
{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')} {mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}