From d0f555a7c5ecfceccf15bcc15c857934eb88c969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Mon, 14 Jul 2025 16:05:29 +0200
Subject: [PATCH] Minor styling changes

---
 src/routes/private/+layout.svelte             |  7 +-
 .../private/errors/events/denied/+page.svelte | 51 +++++++++++-
 src/routes/private/home/+page.svelte          | 78 ++++++++++---------
 3 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/src/routes/private/+layout.svelte b/src/routes/private/+layout.svelte
index 748cf77..4cba364 100644
--- a/src/routes/private/+layout.svelte
+++ b/src/routes/private/+layout.svelte
@@ -3,7 +3,7 @@
 	import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
 	import ToastContainer from '$lib/components/ToastContainer.svelte';
 
-	let { data } = $props();
+	let { data, children } = $props();
 
 	const queryClient = new QueryClient({
 		defaultOptions: {
@@ -19,10 +19,9 @@
 <nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
 	<div class="container mx-auto max-w-2xl p-2">
 		<div class="flex items-center justify-between">
-			<div class="text-lg font-bold">ScanWave</div>
+			<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>
 
 			<ul class="flex space-x-4">
-				<li><a href="/private/home">Home</a></li>
 				<li><a href="/private/scanner">Scanner</a></li>
 				{#if data.profile?.section_position === 'events_manager'}
 					<li><a href="/private/events">Events</a></li>
@@ -35,7 +34,7 @@
 
 <div class="container mx-auto max-w-2xl bg-white p-2">
 	<QueryClientProvider client={queryClient}>
-		<slot />
+		{@render children()}
 	</QueryClientProvider>
 </div>
 
diff --git a/src/routes/private/errors/events/denied/+page.svelte b/src/routes/private/errors/events/denied/+page.svelte
index 884187a..00c9788 100644
--- a/src/routes/private/errors/events/denied/+page.svelte
+++ b/src/routes/private/errors/events/denied/+page.svelte
@@ -1 +1,50 @@
-Access to events denied!
\ No newline at end of file
+<script lang="ts">
+  // Get the profile from the page data if available
+  let { data } = $props();
+  let profile = $derived(data.profile);
+</script>
+
+<div class="flex flex-col items-center justify-center min-h-[70vh] p-6">
+  <div class="rounded-lg border border-gray-300 p-6 max-w-md w-full flex flex-col gap-6 text-center">
+    <div class="flex flex-col items-center gap-2">
+      <div class="text-red-600 bg-red-50 p-3 rounded-full">
+        <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+        </svg>
+      </div>
+      <h1 class="text-2xl font-semibold text-gray-800">Access Denied</h1>
+      <p class="text-gray-600">You don't have permission to access the events section.</p>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      {#if profile}
+        <p class="text-sm text-gray-500">
+          Your current role: <span class="font-semibold">{profile.section_position || 'Not assigned'}</span>
+        </p>
+        {#if profile.section}
+          <p class="text-sm text-gray-500">
+            Section: <span class="font-semibold">{profile.section.name}</span>
+          </p>
+        {/if}
+      {/if}
+      
+      <p class="text-gray-600">
+        You need the <span class="font-semibold">events_manager</span> role to access this section.
+        Please contact your administrator for assistance.
+      </p>
+    </div>
+    
+    <div class="flex flex-col gap-3">
+      <a href="/private/home" class="rounded-md px-4 py-2 bg-blue-600 text-white">
+        Go to Dashboard
+      </a>
+      <button 
+        onclick={() => window.history.back()} 
+        class="rounded-md px-4 py-2 border border-gray-300 text-gray-700"
+        aria-label="Go back"
+      >
+        Go Back
+      </button>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/private/home/+page.svelte b/src/routes/private/home/+page.svelte
index 9ac6c24..c9febf3 100644
--- a/src/routes/private/home/+page.svelte
+++ b/src/routes/private/home/+page.svelte
@@ -1,46 +1,54 @@
 <script lang="ts">
-    let { data } = $props();
+	let { data } = $props();
 </script>
 
 <h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
 
 <div class="mb-4 rounded border border-gray-300 bg-white p-6">
-    <div class="flex flex-col gap-2">
-        <div class="flex items-center gap-3 mb-4">
-            <div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
-                {data.user?.user_metadata.display_name?.[0] ?? "U"}
-            </div>
-            <div>
-                <span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
-                <div class="text-sm text-gray-500">{data.user?.email}</div>
-            </div>
-        </div>
-        <div class="flex flex-col gap-1">
-            <div>
-                <span class="font-medium text-gray-700">Section:</span>
-                <span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
-            </div>
-            <div>
-                <span class="font-medium text-gray-700">Position:</span>
-                <span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
-            </div>
-        </div>
-        <h2 class="text-lg mb-2 mt-4">User guide</h2>
-        <p class="text-gray-700 text-sm leading-relaxed">
-            To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions.
-            If you close and open your browser and your camera is stuck, simply refresh the page or click Stop scanning and then Start scanning again.
-            When you scan a QR code, a request is sent to the server to get the user's personal information and to mark their tickets as scanned.
-        </p>
-        <h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
-        <p class="text-gray-700 text-sm leading-relaxed">
-            You can view events 
-        </p>
-    </div>
+	<div class="flex flex-col gap-2">
+		<div class="rounded-lg overflow-hidden border border-gray-200">
+			<div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200">
+				<div
+					class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-200 text-xl font-bold text-gray-600 flex-shrink-0"
+				>
+					{data.user?.user_metadata.display_name?.[0] ?? 'U'}
+				</div>
+				<div class="flex flex-col">
+					<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
+					<div class="text-sm text-gray-500">{data.user?.email}</div>
+				</div>
+			</div>
+			<table class="min-w-full">
+				<tbody class="divide-y divide-gray-200 bg-white">
+					<tr>
+						<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Section</td>
+						<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section?.name ?? 'N/A'}</td>
+					</tr>
+					<tr>
+						<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Position</td>
+						<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section_position ?? 'N/A'}</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+		<h2 class="mt-4 mb-2 text-lg">User guide</h2>
+		<p class="text-sm leading-relaxed text-gray-700">
+			To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and
+			allow camera permissions. If you close and open your browser and your camera is stuck, simply
+			refresh the page or click Stop scanning and then Start scanning again. When you scan a QR
+			code, a request is sent to the server to get the user's personal information and to mark their
+			tickets as scanned.
+		</p>
+		{#if data.profile?.section_position === 'events_manager'}
+			<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2>
+			<p class="text-sm leading-relaxed text-gray-700">You can view events</p>
+		{/if}
+	</div>
 </div>
 
 <a
-    href="/auth/signout"
-    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
+	href="/auth/signout"
+	class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full border border-gray-300 bg-red-500 px-8 py-3 font-semibold text-white shadow-none transition hover:bg-red-600"
 >
-    Sign out
+	Sign out
 </a>