Merge pull request 'CSS Styling' (#21) from development into main

Reviewed-on: #21

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

@@ -2,10 +2,9 @@
 	let { data } = $props();
 </script>
 
-<div class="p-4 sm:p-6">
+<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Dashboard</h1>
-	<h1 class="mb-6 text-2xl font-bold text-gray-800">User Dashboard</h1>
 
-	<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
 	<!-- Left Column: User Profile -->
 	<div class="lg:col-span-1">
 		<div class="flex h-full flex-col rounded-lg border border-gray-300 bg-white p-6">
@@ -21,8 +20,7 @@
 			<div class="mt-6 text-center">
 				<a
 					href="/auth/signout"
-						class="text-sm text-red-500 transition hover:text-red-700 hover:underline"
+					class="text-sm text-red-500 transition hover:text-red-700 hover:underline">Sign Out</a
-						>Sign Out</a
 				>
 			</div>
 		</div>
@@ -53,10 +51,10 @@
 		<div class="rounded-lg border border-gray-300 bg-white p-6">
 			<h2 class="mb-2 text-lg font-semibold text-gray-900">User Guide</h2>
 			<p class="text-sm leading-relaxed text-gray-700">
-					To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click
+				To scan a QR code, head over to <strong>Scanner</strong> in the top right corner. Click on "Start
-					on "Start Scanning" and allow camera permissions. If your camera gets stuck, simply
+				Scanning" and allow camera permissions. If your camera gets stuck, simply refresh the page or
-					refresh the page or click "Stop Scanning" and then "Start Scanning" again. When you scan
+				click "Stop Scanning" and then "Start Scanning" again. When you scan a QR code, the participant's
-					a QR code, the participant's ticket is automatically marked as scanned.
+				ticket is automatically marked as scanned.
 			</p>
 		</div>
 
@@ -65,12 +63,11 @@
 			<div class="rounded-lg border border-gray-300 bg-white p-6">
 				<h2 class="mb-2 text-lg font-semibold text-gray-900">Events Manager Guide</h2>
 				<p class="text-sm leading-relaxed text-gray-700">
-						As an Events Manager, you have access to the <strong>Events</strong> section. Here you
+					As an Events Manager, you have access to the <strong>Events</strong> section. Here you can
-						can create new events, manage participants by syncing with Google Sheets, send email
+					create new events, manage participants by syncing with Google Sheets, send email invitations
-						invitations with QR codes, and view event statistics.
+					with QR codes, and view event statistics.
 				</p>
 			</div>
 		{/if}
 	</div>
-	</div>
 </div>

src/routes/private/scanner/QRScanner.svelte

@@ -45,9 +45,9 @@
     });
 </script>
 
-<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded-lg border border-gray-300"></div>
+<div id="qr-scanner" class="w-full h-full max-w-none overflow-hidden rounded"></div>
 
-<style>
+<style lang="postcss"> 
     /* Hide unwanted icons */
     #qr-scanner :global(img[alt='Info icon']),
     #qr-scanner :global(img[alt='Camera based scan']) {
@@ -58,21 +58,51 @@
         color: black !important;
     }
 
-    /* Change camera permission button text */
-    #qr-scanner :global(#html5-qrcode-button-camera-permission) {
-        visibility: hidden;
-    }
-    #qr-scanner :global(#html5-qrcode-button-camera-permission::after) {
-        position: absolute;
-        inset: auto 0 0;
-        display: block;
-        content: 'Allow camera access';
-        visibility: visible;
-        padding: 10px 0;
-    }
-
     #qr-scanner :global(#qr-scanner__scan_region) {
         min-height: auto !important;
         aspect-ratio: 1 !important;
     }
+
+    #qr-scanner :global(button.html5-qrcode-element) {
+        border-radius: 0.375rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+        background-color: #2563eb;
+        color: #fff;
+        font-weight: 500;
+        transition-property: background-color, border-color, color, fill, stroke;
+        transition-duration: 150ms;
+        outline: none;
+        }
+
+    #qr-scanner :global(button.html5-qrcode-element:hover) {
+    background-color: #1d4ed8;
+    }
+
+    #qr-scanner :global(button.html5-qrcode-element:focus) {
+    box-shadow: 0 0 0 2px #60a5fa, 0 0 0 4px #fff;
+    }
+    #qr-scanner :global(input) {
+        border-radius: 0.375rem; /* rounded-md */
+        border-width: 1px;
+        border-color: #d1d5db; /* border-gray-300 */
+        padding-left: 1rem; /* px-4 */
+        padding-right: 1rem;
+        padding-top: 0.5rem; /* py-2 */
+        padding-bottom: 0.5rem;
+        background-color: #f9fafb; /* bg-gray-50 */
+        color: #111827; /* text-gray-900 */
+        font-size: 1rem;
+        line-height: 1.5rem;
+        outline: none;
+        transition-property: border-color, box-shadow;
+        transition-duration: 150ms;
+    }
+
+    #qr-scanner :global(input:focus) {
+        border-color: #2563eb; /* border-blue-600 */
+        box-shadow: 0 0 0 2px #60a5fa;
+    }
 </style>