Changing errors to a descructive color.

This commit is contained in:
Bradley Shellnut 2023-06-30 16:02:45 -07:00
parent 3d99710eb8
commit f80b8f5391

View file

@ -34,32 +34,32 @@ import { userSchema } from '$lib/config/zod-schemas.js';
<Label for="firstName">First Name</Label>
<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
{#if $errors.firstName}
<p class="text-sm text-muted-foreground">{$errors.firstName}</p>
<p class="text-sm text-destructive">{$errors.firstName}</p>
{/if}
<Label for="firstName">Last Name</Label>
<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
{#if $errors.lastName}
<p class="text-sm text-muted-foreground">{$errors.lastName}</p>
<p class="text-sm text-destructive">{$errors.lastName}</p>
{/if}
<Label for="email">Email</Label>
<Input type="email" id="email" name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
{#if $errors.email}
<p class="text-sm text-muted-foreground">{$errors.email}</p>
<p class="text-sm text-destructive">{$errors.email}</p>
{/if}
<Label for="username">Username</Label>
<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
{#if $errors.username}
<p class="text-sm text-muted-foreground">{$errors.username}</p>
<p class="text-sm text-destructive">{$errors.username}</p>
{/if}
<Label for="password">Password</Label>
<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
{#if $errors.password}
<p class="text-sm text-muted-foreground">{$errors.password}</p>
<p class="text-sm text-destructive">{$errors.password}</p>
{/if}
<Label for="confirm_password">Confirm Password</Label>
<Input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
{#if $errors.confirm_password}
<p class="text-sm text-muted-foreground">{$errors.confirm_password}</p>
<p class="text-sm text-destructive">{$errors.confirm_password}</p>
{/if}
<div class="flex place-content-">
<Button type="submit">Signup</Button>