Looking better

src/routes/private/scanner/+page.svelte

@@ -23,9 +23,7 @@
 			if (response.data && response.data.length > 0) {
 				ticket_data = response.data[0];
 				scan_state = ScanState.scan_successful;
-				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id})
-				console.log(scanned_id)
-				console.log(response.data[0]);
+				data.supabase.rpc('scan_ticket', { _ticket_id: scanned_id}).then();
 			} else {
 				ticket_data = defaultTicketData;
 				scan_state = ScanState.scan_failed;

src/routes/private/scanner/QRScanner.svelte

@@ -39,7 +39,7 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full max-w-sm bg-slate-700 rounded-lg overflow-hidden"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none bg-slate-700 overflow-hidden"></div>
 
 <style>
     /* Hide unwanted icons */
@@ -48,6 +48,10 @@
         display: none;
     }
 
+    #qr-scanner {
+        color: white !important;
+    }
+
     /* Change camera permission button text */
     #qr-scanner :global(#html5-qrcode-button-camera-permission) {
         visibility: hidden;

src/routes/private/scanner/TicketDisplay.svelte

@@ -2,23 +2,43 @@
 	import type { TicketData } from '$lib/types';
 	import { ScanState } from '$lib/types';
 
-	let { ticket_data, scan_state }: { ticket_data: TicketData, scan_state: ScanState } = $props();
+	let { ticket_data, scan_state }: { ticket_data: TicketData; scan_state: ScanState } = $props();
+
+	function formatScannedAt(dateString: string): string {
+		const date = new Date(dateString);
+		const day = String(date.getDate()).padStart(2, '0');
+		const month = String(date.getMonth() + 1).padStart(2, '0');
+		const hours = String(date.getHours()).padStart(2, '0');
+		const minutes = String(date.getMinutes()).padStart(2, '0');
+		return `${day}.${month}. ${hours}:${minutes}`;
+	}
 </script>
 
-{#if scan_state === ScanState.scanning}
-	<p>Waiting for data...</p>
-
-{:else if scan_state === ScanState.scan_failed}
-	<p>Scan failed. Please try again.</p>
-
-{:else if scan_state === ScanState.scan_successful}
-	{#if ticket_data.scanned}
-		<p>Ticket already scanned!</p>
-		<p>By {ticket_data.scanned_by} at {ticket_data.scanned_at}</p>
-	{:else}
-		<p>Scan successful!</p>
-		<ol>
-			<li>{ticket_data.name} {ticket_data.surname}</li>
-		</ol>
+<div class="py-3">
+	{#if scan_state === ScanState.scanning}
+		<div class="rounded border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700">
+			<p>Waiting for data...</p>
+		</div>
+	{:else if scan_state === ScanState.scan_failed}
+		<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
+			<p>Scan failed. Please try again.</p>
+		</div>
+	{:else if scan_state === ScanState.scan_successful}
+		{#if ticket_data.scanned}
+		<div class="rounded border-l-4 border-red-500 bg-red-100 p-4 text-red-700">
+			<p>Ticket already scanned!</p>
+			<p>
+				By {ticket_data.scanned_by?.display_name} on
+				{formatScannedAt(ticket_data.scanned_at)}
+			</p>
+		</div>
+		{:else}
+			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
+				<ol>
+					<li>{ticket_data.event.name}</li>
+					<li>{ticket_data.name} {ticket_data.surname}</li>
+				</ol>
+			</div>
+		{/if}
 	{/if}
-{/if}
+</div>