From df665376ef96591bce41f938959d7407f1c4397a Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Tue, 12 Sep 2023 16:49:04 -0700
Subject: [PATCH] Fixing up logged in sheet.

---
 src/lib/components/header/index.svelte |   5 +-
 src/routes/(auth)/+layout.svelte       |   2 +-
 src/routes/(auth)/sign-up/+page.svelte | 175 +++++++++++++++----------
 3 files changed, 105 insertions(+), 77 deletions(-)

diff --git a/src/lib/components/header/index.svelte b/src/lib/components/header/index.svelte
index 38a1e88..40b09bc 100644
--- a/src/lib/components/header/index.svelte
+++ b/src/lib/components/header/index.svelte
@@ -2,7 +2,7 @@
 	import { enhance } from '$app/forms';
 	import { LogOut } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
-	import { Toggle } from "$lib/components/ui/toggle";
+	// import { Toggle } from "$lib/components/ui/toggle"; -- TODO: Add light/dark toggle
 	import * as Avatar from "$lib/components/ui/avatar";
 	import * as Sheet from "$lib/components/ui/sheet";
 	import Logo from '$components/logo.svelte';
@@ -34,9 +34,6 @@
 				<Sheet.Content side="right">
 					<Sheet.Header>
 						<Sheet.Title>Menu</Sheet.Title>
-						<Toggle aria-label="toggle bold">
-
-						</Toggle>
 					</Sheet.Header>
 					<div class="menu">
 						<Sheet.Close asChild let:builder>
diff --git a/src/routes/(auth)/+layout.svelte b/src/routes/(auth)/+layout.svelte
index d99233c..0448225 100644
--- a/src/routes/(auth)/+layout.svelte
+++ b/src/routes/(auth)/+layout.svelte
@@ -39,7 +39,7 @@
 		<div class="quote-wrapper">
 			<blockquote class="quote">
 				<p>
-					"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sound like you then Bored Game is your new best friend."
+					"How many games do I own? What was the last one I played? What haven't I played in a long time? If this sounds like you then Bored Game is your new best friend."
 				</p>
 				<footer>Bradley</footer>
 			</blockquote>
diff --git a/src/routes/(auth)/sign-up/+page.svelte b/src/routes/(auth)/sign-up/+page.svelte
index bca1832..9f79a1d 100644
--- a/src/routes/(auth)/sign-up/+page.svelte
+++ b/src/routes/(auth)/sign-up/+page.svelte
@@ -43,82 +43,113 @@
 	<title>Bored Game | Sign Up</title>
 </svelte:head>
 
-<div class="page">
+<div class="sign-up">
 	<form method="POST" action="/sign-up" use:enhance>
-		<div class="grid w-full max-w-sm items-center gap-2.5">
-			<h2
-				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-			>
-				Signup for an account
-			</h2>
-			<Label for="username">Username</Label>
-			<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
-			{#if $errors.username}
-				<p class="text-sm text-destructive">{$errors.username}</p>
-			{/if}
-			<Label for="password">Password</Label>
-			<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
-			{#if $errors.password}
-				<p class="text-sm text-destructive">{$errors.password}</p>
-			{/if}
-			<Label for="confirm_password">Confirm Password</Label>
-			<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} 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-destructive">{$errors.confirm_password}</p>
-			{/if}
-			<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
-				<div>
-					Optional Fields:
-					<Collapsible.Trigger asChild let:builder>
-						<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
-							<ChevronsUpDown class="h-4 w-4" />
-							<span class="sr-only">Toggle</span>
-						</Button>
-					</Collapsible.Trigger>
-				</div>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="email">Email</Label>
-					<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
-					{#if $errors.email}
-						<p class="text-sm text-destructive">{$errors.email}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="firstName">First Name</Label>
-					<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
-					{#if $errors.firstName}
-						<p class="text-sm text-destructive">{$errors.firstName}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-				<Collapsible.Content>
-					<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
-					<Label for="firstName">Last Name</Label>
-					<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
-					{#if $errors.lastName}
-						<p class="text-sm text-destructive">{$errors.lastName}</p>
-					{/if}
-					</div>
-				</Collapsible.Content>
-			</Collapsible.Root>
-			<div class="grid grid-cols-2">
-				<Button type="submit">Signup</Button>
-				<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
+		<h2>Signup for an account</h2>
+		<Label for="username">Username</Label>
+		<Input type="text" id="username" class={$errors.username && "outline outline-destructive"} name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
+		{#if $errors.username}
+			<p class="text-sm text-destructive">{$errors.username}</p>
+		{/if}
+		<Label for="password">Password</Label>
+		<Input type="password" id="password" class={$errors.password && "outline outline-destructive"} name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
+		{#if $errors.password}
+			<p class="text-sm text-destructive">{$errors.password}</p>
+		{/if}
+		<Label for="confirm_password">Confirm Password</Label>
+		<Input type="password" id="confirm_password" class={$errors.confirm_password && "outline outline-destructive"} 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-destructive">{$errors.confirm_password}</p>
+		{/if}
+		<Collapsible.Root class="grid w-full max-w-sm items-center gap-2.5">
+			<div>
+				Optional Fields:
+				<Collapsible.Trigger asChild let:builder>
+					<Button builders={[builder]} variant="ghost" size="sm" type="button" class="w-9 p-0">
+						<ChevronsUpDown class="h-4 w-4" />
+						<span class="sr-only">Toggle</span>
+					</Button>
+				</Collapsible.Trigger>
 			</div>
-			{#if !$form.email}
-				<Alert.Root>
-					<Alert.Title level="h3">Heads up!</Alert.Title>
-					<Alert.Description>
-						Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
-					</Alert.Description>
-				</Alert.Root>
-			{/if}
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="email">Email</Label>
+				<Input type="email" id="email" class={$errors.email && "outline outline-destructive"} name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
+				{#if $errors.email}
+					<p class="text-sm text-destructive">{$errors.email}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="firstName">First Name</Label>
+				<Input type="text" id="firstName" class={$errors.firstName && "outline outline-destructive"} name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
+				{#if $errors.firstName}
+					<p class="text-sm text-destructive">{$errors.firstName}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+			<Collapsible.Content>
+				<div transition:slide|global={{ delay: 10, duration: 150, easing: quintIn }}>
+				<Label for="firstName">Last Name</Label>
+				<Input type="text" id="lastName" class={$errors.firstName && "outline outline-destructive"} name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
+				{#if $errors.lastName}
+					<p class="text-sm text-destructive">{$errors.lastName}</p>
+				{/if}
+				</div>
+			</Collapsible.Content>
+		</Collapsible.Root>
+		<div class="grid grid-cols-2">
+			<Button type="submit">Signup</Button>
+			<Button variant="link" class="text-secondary-foreground" href="/">or Cancel</Button>
 		</div>
+		{#if !$form.email}
+			<Alert.Root>
+				<Alert.Title level="h3">Heads up!</Alert.Title>
+				<Alert.Description>
+					Without an email address, you won't be able to reset your password. Submit only if you are sure. You can always add this later.
+				</Alert.Description>
+			</Alert.Root>
+		{/if}
   </form>
 </div>
 
-<style scoped>
+<style lang="postcss">
+	.sign-up {
+		display: flex;
+		margin-top: 1.5rem;
+		flex-direction: column;
+		justify-content: center;
+		width: 100%;
+		margin-right: auto;
+		margin-left: auto;
+
+		@media (min-width: 640px) {
+			width: 350px;
+		}
+
+		form {
+			display: grid;
+			gap: 0.5rem;
+			align-items: center;
+			max-width: 24rem;
+
+			h2:first-child {
+				margin-top: 0;
+			}
+
+			h2 {
+				padding-bottom: 0.5rem;
+				border-bottom-width: 1px;
+				font-size: 1.875rem;
+				line-height: 2.25rem;
+				font-weight: 600;
+				letter-spacing: -0.025em;
+				transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+				transition-duration: 300ms;
+				scroll-margin: 5rem;
+			}
+		}
+	}
 </style>
\ No newline at end of file