Merge pull request 'development' (#14) from development into main

Reviewed-on: #14

src/routes/private/events/archived/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+    import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -7,7 +8,8 @@
 	let loading = $state(true);
 
 	onMount(async () => {
-		const event_id = new URLSearchParams(window.location.search).get('id');
+		const event_id = page.url.searchParams.get('id');
+        
 		if (!event_id) {
 			loading = false;
 			return;

src/routes/private/events/creator/+page.svelte

@@ -17,7 +17,7 @@
 	let isAddingParticipants = $state(false);
 
 	onMount(async () => {
-		const eventId = page.url.searchParams.get('id');
+		const eventId = page.url.searchParams.get('eventId');
 		if (eventId) {
 			existingEventId = eventId;
 			isAddingParticipants = true;
@@ -74,11 +74,13 @@
 	}
 </script>
 
-<div class="mt-2 mb-4">
-	{#if isAddingParticipants}
-		<h1 class="text-xl font-semibold text-gray-700 text-center">Add Participants to "{event.name}"</h1>
-	{/if}
-</div>
+{#if isAddingParticipants}
+	<div class="mt-2 mb-4">
+		<h1 class="text-center text-xl font-semibold text-gray-700">
+			Adding Participants to "{event.name}"
+		</h1>
+	</div>
+{/if}
 
 {#if step == 0}
 	<StepConnectGoogle bind:authorized />
@@ -106,7 +108,7 @@
 	class="fixed bottom-0 left-0 z-10 flex w-full items-center justify-between gap-4 border-t border-gray-300 bg-white px-4 py-2"
 	style="max-width: 100vw;"
 >
-  <div class="container mx-auto max-w-2xl p-2 flex justify-content-center">
+	<div class="justify-content-center container mx-auto flex max-w-2xl p-2">
 		<button
 			onclick={prevStep}
 			disabled={step === 0}
@@ -115,7 +117,7 @@
 		>
 			Previous
 		</button>
-    <span class="flex-1 flex items-center justify-center text-center font-medium text-gray-600">
+		<span class="flex flex-1 items-center justify-center text-center font-medium text-gray-600">
 			Step {step + 1} of {steps.length}
 		</span>
 		<button

src/routes/private/events/creator/steps/StepConnectGoogle.svelte

@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	{#if loading}
 		<div class="flex items-center space-x-2">
 			<svg class="animate-spin h-5 w-5 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">

src/routes/private/events/creator/steps/StepCraftEmail.svelte

@@ -20,7 +20,7 @@
 </script>
 
 {#if showForm}
-	<form onsubmit={handleSubmit} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
+	<form onsubmit={handleSubmit} class="flex mt-2 flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
 		<h2 class="text-2xl font-semibold text-center mb-4">Craft Email</h2>
 		<label class="flex flex-col text-gray-700">
 			Subject
@@ -51,7 +51,7 @@
 	</form>
 {:else}
 	<button
-		class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 		onclick={showEditForm}
 		aria-label="Edit email"
 	>

src/routes/private/events/creator/steps/StepCreateEvent.svelte

@@ -28,7 +28,7 @@
 	<form
 		onsubmit={handleSubmit}
 		autocomplete="off"
-		class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
 	>
 		<h2 class="mb-4 text-center text-2xl font-semibold">Create Event</h2>
 		<label class="mt-2 flex flex-col text-gray-700">
@@ -63,7 +63,7 @@
 {#if !showForm}
 	{#if !readonly}
 		<button
-			class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+			class="mb-4 mt-2 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 			onclick={showEditForm}
 			aria-label="Edit event"
 		>

src/routes/private/events/creator/steps/StepOverview.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <!-- New Event Overview -->
-<div class="mb-4 rounded border border-gray-300 bg-white p-4">
+<div class="mb-4 mt-2 rounded border border-gray-300 bg-white p-4">
 	<h2 class="mb-2 text-xl font-bold">Event Overview</h2>
 	<ul class="space-y-1">
 		<li><span class="font-semibold">Name:</span> {event.name}</li>

src/routes/private/events/creator/steps/StepUploadParticipants.svelte

@@ -64,7 +64,7 @@
 
 {#if showForm}
 	{#if errors.length > 0}
-		<div class="mb-4 rounded border border-red-400 bg-red-50 p-4 text-red-700">
+		<div class="mb-4 mt-2 rounded border border-red-400 bg-red-50 p-4 text-red-700">
 			<ul class="list-disc ml-4">
 				{#each errors as err}
 					<li>{err}</li>
@@ -76,7 +76,7 @@
 		onsubmit={handleSubmit}
 		autocomplete="off"
 		enctype="multipart/form-data"
-		class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
+		class="flex mt-2 w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
 	>
 		<h2 class="mb-4 text-center text-2xl font-semibold">Upload Participants</h2>
 		<label class="flex flex-col text-gray-700">
@@ -99,7 +99,7 @@
 	</form>
 {:else}
 	<button
-		class="w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
+		class="w-full mt-2 rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
 		onclick={showEditForm}
 		aria-label="Edit participants"
 	>

src/routes/private/events/event/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { page } from '$app/state';
 
 	let { data } = $props();
 
@@ -10,7 +11,8 @@
 	let notScannedCount: number = $state(0);
 
 	onMount(async () => {
-		const event_id = new URLSearchParams(window.location.search).get('id');
+		const event_id = page.url.searchParams.get('id');
+
 		if (!event_id) {
 			loading = false;
 			return;