From 8cc59b89dadb53b9dc3d591ffb366ad18f20aafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roman=20Kr=C4=8Dek?= <roman.krcek@tietoevry.com>
Date: Sat, 21 Jun 2025 23:34:49 +0200
Subject: [PATCH] Looking much better

---
 src/routes/+page.svelte                       | 28 +++++++--
 src/routes/auth/+page.svelte                  | 16 ++++-
 src/routes/auth/login/+page.svelte            | 44 ++++++++++----
 src/routes/auth/signup/+page.svelte           | 58 ++++++++++++++-----
 src/routes/private/+layout.svelte             | 12 ++--
 src/routes/private/scanner/QRScanner.svelte   |  9 ++-
 .../private/scanner/TicketDisplay.svelte      | 19 +++---
 7 files changed, 137 insertions(+), 49 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f229fc2..0447531 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,22 @@
-<script lang="ts">
-
-</script>
-
-
-<p>hello world</p>
+<div class="min-h-screen flex flex-col justify-center items-center">
+    <!-- SVG QR Code Art on Top -->
+    <div class="mb-8">
+        <!-- Simple QR code SVG (static, for illustration) -->
+        <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect width="96" height="96" rx="16" fill="#F3F4F6"/>
+            <rect x="12" y="12" width="20" height="20" fill="#111827"/>
+            <rect x="64" y="12" width="20" height="20" fill="#111827"/>
+            <rect x="12" y="64" width="20" height="20" fill="#111827"/>
+            <rect x="40" y="40" width="8" height="8" fill="#111827"/>
+            <rect x="56" y="56" width="8" height="8" fill="#111827"/>
+            <rect x="72" y="40" width="8" height="8" fill="#111827"/>
+            <rect x="40" y="72" width="8" height="8" fill="#111827"/>
+        </svg>
+    </div>
+    <h1 class="text-3xl font-bold text-center mb-2">ESN Scanner App</h1>
+    <h2 class="text-lg text-gray-600 text-center mb-8">Make entrance to your events a breeze.</h2>
+    <div class="flex space-x-4 w-full justify-center">
+        <a href="/auth/login" class="w-32 py-2 bg-blue-600 text-white rounded text-center hover:bg-blue-700 transition">Login</a>
+        <a href="/auth/signup" class="w-32 py-2 bg-gray-200 text-blue-700 rounded text-center hover:bg-gray-300 transition">Signup</a>
+    </div>
+</div>
diff --git a/src/routes/auth/+page.svelte b/src/routes/auth/+page.svelte
index 66f5f56..95811a2 100644
--- a/src/routes/auth/+page.svelte
+++ b/src/routes/auth/+page.svelte
@@ -1,2 +1,14 @@
-<a href="/auth/login"><button>Login</button></a>
-<a href="/auth/singup"><button>Signup</button></a>
\ No newline at end of file
+<div class="flex items-center justify-center min-h-screen">
+    <div class="flex flex-col space-y-4">
+        <a href="/auth/login">
+            <button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
+                Login
+            </button>
+        </a>
+        <a href="/auth/singup">
+            <button class="w-40 py-2 bg-white border border-gray-300 text-gray-800 rounded hover:border-gray-400 transition">
+                Signup
+            </button>
+        </a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index 518928c..8d3efde 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -1,11 +1,33 @@
-<form method="POST" action="?/login">
-  <label>
-    Email
-    <input name="email" type="email" />
-  </label>
-  <label>
-    Password
-    <input name="password" type="password" />
-  </label>
-  <button>Login</button>
-</form>
\ No newline at end of file
+<div class="flex items-center justify-center min-h-screen bg-gray-50">
+  <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
+    <h2 class="text-2xl font-semibold text-center mb-4">Login</h2>
+    <label class="flex flex-col text-gray-700">
+      Email
+      <input
+        name="email"
+        type="email"
+        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+        required
+      />
+    </label>
+    <label class="flex flex-col text-gray-700">
+      Password
+      <input
+        name="password"
+        type="password"
+        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+        required
+      />
+    </label>
+    <button
+      type="submit"
+      class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
+    >
+      Login
+    </button>
+    <div class="text-center text-sm text-gray-500 mt-2">
+      Don't have an account?
+      <a href="/auth/signup" class="text-blue-600 hover:underline">Signup</a>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/routes/auth/signup/+page.svelte b/src/routes/auth/signup/+page.svelte
index 4b9c71a..f3d1b2b 100644
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@@ -1,15 +1,43 @@
-<form method="POST" action="?/login">
-  <label>
-    Email
-    <input name="email" type="email" />
-  </label>
-  <label>
-    Password
-    <input name="password" type="password" />
-  </label>
-  <label>
-    Display name
-    <input name="display_name" type="text" />
-  </label>
-  <button formaction="?/signup">Sign up</button>
-</form>
\ No newline at end of file
+<div class="flex items-center justify-center min-h-screen bg-gray-50">
+  <form method="POST" action="?/login" class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-80 shadow-none">
+    <h2 class="text-2xl font-semibold text-center mb-4">Sign Up</h2>
+    <label class="flex flex-col text-gray-700">
+      Email
+      <input
+        name="email"
+        type="email"
+        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+        required
+      />
+    </label>
+    <label class="flex flex-col text-gray-700">
+      Password
+      <input
+        name="password"
+        type="password"
+        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+        required
+      />
+    </label>
+    <label class="flex flex-col text-gray-700">
+      Display name
+      <input
+        name="display_name"
+        type="text"
+        class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
+        required
+      />
+    </label>
+    <button
+      type="submit"
+      formaction="?/signup"
+      class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
+    >
+      Sign up
+    </button>
+    <div class="text-center text-sm text-gray-500 mt-2">
+      Already have an account?
+      <a href="/auth/login" class="text-blue-600 hover:underline">Login</a>
+    </div>
+  </form>
+</div>
\ No newline at end of file
diff --git a/src/routes/private/+layout.svelte b/src/routes/private/+layout.svelte
index d3993d8..24ad58a 100644
--- a/src/routes/private/+layout.svelte
+++ b/src/routes/private/+layout.svelte
@@ -2,12 +2,12 @@
 // Add any navbar logic here if needed
 </script>
 
-<nav class="bg-gray-800 text-white p-4 flex items-center justify-between">
-  <div class="font-bold text-lg">ESN Scanner</div>
-  <ul class="flex space-x-4">
-    <li><a href="/private/home" class="hover:underline">Home</a></li>
-    <li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
-  </ul>
+<nav class="bg-white border-b border-gray-300 text-gray-900 p-4 flex items-center justify-between">
+    <div class="font-bold text-lg">ESN Scanner</div>
+    <ul class="flex space-x-4">
+        <li><a href="/private/home" class="hover:underline">Home</a></li>
+        <li><a href="/private/scanner" class="hover:underline">Scanner</a></li>
+    </ul>
 </nav>
 
 <div class="container p-2 bg-white ">
diff --git a/src/routes/private/scanner/QRScanner.svelte b/src/routes/private/scanner/QRScanner.svelte
index e2f8d73..c3a8e1e 100644
--- a/src/routes/private/scanner/QRScanner.svelte
+++ b/src/routes/private/scanner/QRScanner.svelte
@@ -39,7 +39,7 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full h-full max-w-none bg-slate-700 overflow-hidden"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-sm"></div>
 
 <style>
     /* Hide unwanted icons */
@@ -49,7 +49,7 @@
     }
 
     #qr-scanner {
-        color: white !important;
+        color: black !important;
     }
 
     /* Change camera permission button text */
@@ -64,4 +64,9 @@
         visibility: visible;
         padding: 10px 0;
     }
+
+    #qr-scanner :global(#qr-scanner__scan_region) {
+        min-height: auto !important;
+        aspect-ratio: 1 !important;
+    }
 </style>
\ No newline at end of file
diff --git a/src/routes/private/scanner/TicketDisplay.svelte b/src/routes/private/scanner/TicketDisplay.svelte
index 8269f04..ca5a730 100644
--- a/src/routes/private/scanner/TicketDisplay.svelte
+++ b/src/routes/private/scanner/TicketDisplay.svelte
@@ -25,13 +25,18 @@
 		</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>
+			<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>
+				<hr class="my-2 border-t border-red-300" />
+				<ol>
+					<li>{ticket_data.event.name}</li>
+					<li>{ticket_data.name} {ticket_data.surname}</li>
+				</ol>
+			</div>
 		{:else}
 			<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700">
 				<ol>