[web] Cleanup UI

web/src/routes/admin/contests/+page.svelte

@@ -14,13 +14,36 @@
 	<a href="/admin/contests/create" class="btn btn-outline-success">Create</a>
 </div>
 
-<div class="mt-3 list-group">
+<div class="mt-3 table-responsive">
+	<table class="table table-bordered table-hover">
+		<thead>
+			<tr>
+				<th>Id</th>
+				<th>Name</th>
+				<th>Status</th>
+				<th>Actions</th>
+			</tr>
+		</thead>
+		<tbody>
 			{#each data.contests as contest}
-		<a
+				<tr>
-			href={'/admin/contests/' + contest.id.toString()}
+					<td>{contest.id}</td>
-			class={`list-group-item list-group-item-action ${
+					<td>{contest.name}</td>
-				contest.activeTeams === 0 ? '' : ' list-group-item-success'
+					<td>
-			}`}>{contest.name}</a
+						{#if contest.activeTeams === 0}
+							<span class="badge bg-secondary">Inactive</span>
+						{:else}
+							<span class="badge bg-success">Active</span>
+						{/if}
+					</td>
+					<td
+						><a
+							href={`/admin/contests/${contest.id.toString()}`}
+							class="btn btn-sm btn-outline-secondary">Details</a
+						></td
 					>
+				</tr>
 			{/each}
+		</tbody>
+	</table>
 </div>

web/src/routes/admin/contests/[contestId]/+page.svelte

@@ -11,12 +11,12 @@
 </script>
 
 <svelte:head>
-	<title>{data.name}</title>
+	<title>Contest - {data.name}</title>
 </svelte:head>
 
 <ConfirmModal bind:this={confirmModal} />
 
-<h1 style="text-align:center" class="mb-4">{data.name}</h1>
+<h1 style="text-align:center" class="mb-4"><i class="bi bi-flag"></i> Contest - {data.name}</h1>
 
 <FormAlert />
 

web/src/routes/admin/contests/[contestId]/logins/+page.svelte

@@ -4,8 +4,12 @@
 	export let data: PageData;
 </script>
 
+<svelte:head>
+	<title>Printable Logins</title>
+</svelte:head>
+
 {#each data.teams as team}
-	<table class="table table-bordered table-striped">
+	<table class="table table-bordered">
 		<thead>
 			<tr>
 				<th>ID</th>

web/src/routes/admin/contests/create/+page.svelte

@@ -44,8 +44,6 @@
 
 <FormAlert />
 
-<a href="/admin/contests" class="mb-3 btn btn-outline-secondary">Cancel</a>
-
 <form method="POST" action="?/create" use:enhance>
 	<h4>Name</h4>
 	<input name="name" class="form-control" />
@@ -106,9 +104,8 @@
 			{/each}
 		</div>
 	</div>
-	<div class="row">
+	<div class="d-flex flex-row justify-content-end gap-2">
-		<div class="text-end">
+		<a href="/admin/contests" class="btn btn-outline-secondary">Cancel</a>
 		<button type="submit" class="btn btn-success">Create</button>
 	</div>
-	</div>
 </form>

web/src/routes/admin/problems/+page.svelte

@@ -19,11 +19,29 @@
 {#if data.problems.length === 0}
 	<div class="alert alert-warning">No problems</div>
 {/if}
-<div class="list-group">
+
+<div class="table-responsive">
+	<table class="table table-bordered table-hover">
+		<thead>
+			<tr>
+				<th>Id</th>
+				<th>Name</th>
+				<th>Actions</th>
+			</tr>
+		</thead>
+		<tbody>
 			{#each data.problems as problem}
-		<a
+				<tr>
-			href={'/admin/problems/' + problem.id.toString()}
+					<td>{problem.id}</td>
-			class="list-group-item list-group-item-action">{problem.friendlyName}</a
+					<td>{problem.friendlyName}</td>
+					<td
+						><a
+							href={`/admin/problems/${problem.id.toString()}`}
+							class="btn btn-sm btn-outline-secondary">Details</a
+						></td
 					>
+				</tr>
 			{/each}
+		</tbody>
+	</table>
 </div>

web/src/routes/admin/problems/[problemId]/+page.svelte

@@ -28,6 +28,10 @@
 	let confirmModal: ConfirmModal;
 </script>
 
+<svelte:head>
+	<title>Problem - {data.problemData.friendlyName}</title>
+</svelte:head>
+
 <ConfirmModal bind:this={confirmModal} />
 
 <h1 style="text-align:center" class="mb-1">

web/src/routes/admin/submissions/+page.server.ts

@@ -12,7 +12,6 @@ export const load = (async () => {
 				id: row.id,
 				createdAt: row.createdAt,
 				gradedAt: row.gradedAt,
-				message: row.message,
 				state: row.state,
 				problemName: problems.find((problem) => {
 					return problem.id == row.problemId;

web/src/routes/admin/submissions/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { goto, invalidateAll } from '$app/navigation';
+	import { invalidateAll } from '$app/navigation';
 	import { onDestroy, onMount } from 'svelte';
 
 	export let data: PageData;
@@ -44,31 +44,21 @@
 		<strong>Last Updated: </strong>{data.timestamp.toLocaleTimeString()}
 	</div>
 </div>
-
+<div class="table-responsive">
 	<table class="table table-bordered table-hover">
 		<thead>
 			<tr>
 				<th>Team</th>
 				<th>Problem</th>
+				<th>State</th>
 				<th>Submit Time</th>
 				<th>Graded Time</th>
-			<th>Message</th>
+				<th>Actions</th>
 			</tr>
 		</thead>
 		<tbody>
 			{#each data.submissions as submission}
-			<tr
+				<tr>
-				on:click={() => {
-					goto('/admin/submissions/' + submission.id.toString());
-				}}
-				class={(submission.state == 'InReview'
-					? 'table-warning'
-					: submission.state == 'Correct'
-					? 'table-success'
-					: submission.state == 'Incorrect'
-					? 'table-danger'
-					: '') + ' submission-row'}
-			>
 					<td>
 						{#if submission.teamName}
 							{submission.teamName}
@@ -79,6 +69,17 @@
 							{submission.problemName}
 						{/if}
 					</td>
+					<td>
+						{#if submission.state === 'Queued'}
+							<span class="badge bg-secondary">Queued</span>
+						{:else if submission.state === 'InReview'}
+							<span class="badge bg-warning">In Review</span>
+						{:else if submission.state === 'Correct'}
+							<span class="badge bg-success">Correct</span>
+						{:else if submission.state === 'Incorrect'}
+							<span class="badge bg-danger">Incorrect</span>
+						{/if}
+					</td>
 					<td
 						>{submission.createdAt.toLocaleDateString() +
 							' ' +
@@ -91,14 +92,14 @@
 								submission.gradedAt.toLocaleTimeString()}
 						{/if}
 					</td>
-				<td>{submission.message ? submission.message : ''}</td>
+					<td>
+						<a
+							href={`/admin/submissions/${submission.id.toString()}`}
+							class="btn btn-sm btn-outline-secondary">Details</a
+						>
+					</td>
 				</tr>
 			{/each}
 		</tbody>
 	</table>
-
+</div>
-<style>
-	.submission-row:hover {
-		cursor: pointer;
-	}
-</style>

web/src/routes/admin/submissions/[submissionId]/+page.svelte

@@ -31,12 +31,14 @@
 </script>
 
 <svelte:head>
-	<title>Submission</title>
+	<title>Submission - {data.teamName} - {data.problemName}</title>
 </svelte:head>
 
 <ConfirmModal bind:this={confirmModal} />
 
-<h1 style="text-align:center" class="mb-4">Submission</h1>
+<h1 style="text-align:center" class="mb-4">
+	<i class="bi bi-envelope-paper"></i> Submission - {data.teamName} - {data.problemName}
+</h1>
 
 {#if form && !form.success}
 	<div class="alert alert-danger">Error</div>
@@ -64,26 +66,20 @@
 	</div>
 </div>
 
+<div class="table-responsive">
 	<table class="table table-bordered">
 		<thead>
 			<tr>
 				<th>Team</th>
 				<th>Problem</th>
+				<th>Status</th>
 				<th>Submit Time</th>
 				<th>Graded Time</th>
 				<th>Message</th>
 			</tr>
 		</thead>
 		<tbody>
-		<tr
+			<tr>
-			class={(data.state == 'InReview'
-				? 'table-warning'
-				: data.state == 'Correct'
-				? 'table-success'
-				: data.state == 'Incorrect'
-				? 'table-danger'
-				: '') + ' submission-row'}
-		>
 				<td>
 					{#if data.teamName}
 						{data.teamName}
@@ -94,6 +90,17 @@
 						{data.problemName}
 					{/if}
 				</td>
+				<td>
+					{#if data.state === 'Queued'}
+						<span class="badge bg-secondary">Queued</span>
+					{:else if data.state === 'InReview'}
+						<span class="badge bg-warning">In Review</span>
+					{:else if data.state === 'Correct'}
+						<span class="badge bg-success">Correct</span>
+					{:else if data.state === 'Incorrect'}
+						<span class="badge bg-danger">Incorrect</span>
+					{/if}
+				</td>
 				<td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td>
 				<td>
 					{#if data.gradedTime}
@@ -104,6 +111,7 @@
 			</tr>
 		</tbody>
 	</table>
+</div>
 
 {#if data.state == 'InReview'}
 	<div class="row">

web/src/routes/admin/teams/+page.svelte

@@ -55,10 +55,27 @@
 	</form>
 {/if}
 
-<div class="list-group">
+<div class="table-responsive">
+	<table class="table table-bordered table-hover">
+		<thead>
+			<tr>
+				<th>Id</th>
+				<th>Name</th>
+				<th>Actions</th>
+			</tr>
+		</thead>
+		<tbody>
 			{#each data.teams as team}
-		<a href={'/admin/teams/' + team.id.toString()} class="list-group-item list-group-item-action">
+				<tr>
-			{team.name}
+					<td>{team.id}</td>
-		</a>
+					<td>{team.name}</td>
+					<td
+						><a href={`/admin/teams/${team.id.toString()}`} class="btn btn-sm btn-outline-secondary"
+							>Details</a
+						></td
+					>
+				</tr>
 			{/each}
+		</tbody>
+	</table>
 </div>

web/src/routes/admin/teams/[teamId]/+page.svelte

@@ -22,12 +22,12 @@
 </script>
 
 <svelte:head>
-	<title>Team</title>
+	<title>Team - {data.team.name}</title>
 </svelte:head>
 
 <ConfirmModal bind:this={confirmModal} />
 
-<h1 style="text-align:center" class="mb-4">{data.team.name}</h1>
+<h1 style="text-align:center" class="mb-4"><i class="bi bi-people"></i> Team - {data.team.name}</h1>
 
 <div class="row">
 	<div class="col-6">
@@ -51,7 +51,7 @@
 	</div>
 </div>
 
-<table class="table table-bordered table-striped">
+<table class="table table-bordered">
 	<thead>
 		<tr>
 			<th>Name</th>