Skip to content

Commit

Permalink
Merge pull request #274 from xyvora/tailwindformat
Browse files Browse the repository at this point in the history 
Tailwindformat
  • Loading branch information
@iLevyTate
iLevyTate authored Aug 6, 2023
2 parents 45e4d6a + aabc5e0 commit b91f150
Show file tree
Hide file tree
Showing 6 changed files with 920 additions and 621 deletions.
220 changes: 117 additions & 103 deletions frontend/src/lib/components/AccountInfoForm.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,112 +202,126 @@
});
</script>

<form
on:submit|preventDefault={handleSubmit}
class="w-full max-w-lg mx-auto my-10 p-5 rounded shadow"
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<Input
inputId="first-name"
labelText="First Name*"
placeholder="first name"
errorMessage="First Name is required."
isError={firstNameError}
bind:value={user.firstName}
/>
</div>
<div class="w-full md:w-1/2 px-3">
<Input
inputId="last-name"
labelText="Last Name*"
placeholder="last name"
errorMessage="Last Name is required."
isError={lastNameError}
bind:value={user.lastName}
/>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<Input
inputId="user-name"
labelText="User Name*"
placeholder="user name"
errorMessage="User Name is required."
isError={userNameError}
bind:value={user.userName}
/>
</div>
<div class="w-full md:w-1/2 px-3">
<Input
inputId="country"
labelText="Country"
placeholder="country"
bind:value={user.country}
/>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3">
<Input
inputId="password"
labelText="Password*"
placeholder="password"
errorMessage="Password is required."
isError={passwordError}
isPassword={true}
bind:value={user.password}
/>
</div>
<div class="w-full md:w-1/2 px-3">
<Input
inputId="verify-password"
labelText="Verify Password*"
placeholder="verify password"
isPassword={true}
bind:value={user.verifyPassword}
/>
</div>
{#if passwordVerifyError}
<div class="w-full text-center">
<ErrorMessage
errorMessageId="password-verify-error"
errorMessage="Passwords don't match"
showError={passwordVerifyError}
<div class="page-fade-in">
<form
on:submit|preventDefault={handleSubmit}
class="w-full max-w-lg mx-auto my-10 p-5 rounded shadow"
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<Input
inputId="first-name"
labelText="First Name*"
placeholder="first name"
errorMessage="First Name is required."
isError={firstNameError}
bind:value={user.firstName}
/>
</div>
{/if}
</div>
<ErrorMessage
errorMessageId="generic-error"
errorMessage={genericErrorMessage}
showError={genericError}
/>
<div class="flex items-center justify-between">
{#if $isLoggedIn}
<div class="ml-2">
<button class="btn btn-primary" type="submit" id="btn-save">Save</button>
<div class="w-full md:w-1/2 px-3">
<Input
inputId="last-name"
labelText="Last Name*"
placeholder="last name"
errorMessage="Last Name is required."
isError={lastNameError}
bind:value={user.lastName}
/>
</div>
<div>
<button class="btn btn-primary" type="button" id="btn-log-out" on:click={() => logOut()}
>Log Out</button
>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<Input
inputId="user-name"
labelText="User Name*"
placeholder="user name"
errorMessage="User Name is required."
isError={userNameError}
bind:value={user.userName}
/>
</div>
<div class="w-full md:w-1/2 px-3">
<Input
inputId="country"
labelText="Country"
placeholder="country"
bind:value={user.country}
/>
</div>
<div>
<button
class="btn btn-secondary"
type="button"
id="btn-delete"
on:click={() => deleteUser()}>Delete</button
>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3">
<Input
inputId="password"
labelText="Password*"
placeholder="password"
errorMessage="Password is required."
isError={passwordError}
isPassword={true}
bind:value={user.password}
/>
</div>
{:else if $isLoading}
<div class="mt-6 text-center">
<span class="loading loading-spinner text-primary" id="sign-up-spinner" />
<div class="w-full md:w-1/2 px-3">
<Input
inputId="verify-password"
labelText="Verify Password*"
placeholder="verify password"
isPassword={true}
bind:value={user.verifyPassword}
/>
</div>
{:else}
<button class="btn btn-primary" type="submit" id="btn-sign-up">Sign Up</button>
{/if}
</div>
</form>
{#if passwordVerifyError}
<div class="w-full text-center">
<ErrorMessage
errorMessageId="password-verify-error"
errorMessage="Passwords don't match"
showError={passwordVerifyError}
/>
</div>
{/if}
</div>
<ErrorMessage
errorMessageId="generic-error"
errorMessage={genericErrorMessage}
showError={genericError}
/>
<div class="flex items-center justify-between">
{#if $isLoggedIn}
<div class="ml-2">
<button class="btn btn-primary" type="submit" id="btn-save">Save</button>
</div>
<div>
<button class="btn btn-ghost" type="button" id="btn-log-out" on:click={() => logOut()}
>Log Out</button
>
</div>
<div>
<button class="btn btn-ghost" type="button" id="btn-delete" on:click={() => deleteUser()}
>Delete</button
>
</div>
{:else if $isLoading}
<div class="mt-6 text-center">
<span class="loading loading-spinner text-primary" id="sign-up-spinner" />
</div>
{:else}
<button class="btn btn-primary" type="submit" id="btn-sign-up">Sign Up</button>
{/if}
</div>
</form>
</div>

<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.page-fade-in {
animation: fadeIn 1s ease-in-out;
}
</style>
2 changes: 1 addition & 1 deletion frontend/src/lib/components/DaysOfWeekSelector.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}
</script>

<div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mt-4">
<div class="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 mt-4">
{#each Object.entries(daysOfWeek) as [day, value]}
{#if day === 'monday' || day === 'tuesday' || day === 'wednesday' || day === 'thursday' || day === 'friday' || day === 'saturday' || day === 'sunday'}
<div class="rounded-xl shadow p-2">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Error.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
console.log(error);
</script>

<section class="bg-white dark:bg-gray-900">
<section class="bg-gradient-to-b from-primary to-transparent">
<div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div class="mx-auto max-w-screen-sm text-center">
<h1
Expand Down
Loading

0 comments on commit b91f150

Please sign in to comment.