prettied up some stuff

src/routes/projects/[projectId]/+page.svelte

@@ -191,7 +191,7 @@
 										</div>
 										<div>
 											<a class="text-orange-200" href={datePlayerURL(dateMilliseconds)}
-												>Play Changes</a
+												>Replay Changes</a
 											>
 										</div>
 									</div>

src/routes/projects/[projectId]/commit/+page.svelte

@@ -13,9 +13,9 @@
 	const { project, user, filesStatus } = data;
 
 	let commitSubject: string;
-	let placeholderSubject = 'One line summary of changes';
+	let placeholderSubject = 'Summary (required)';
 	let commitMessage: string;
-	let placeholderMessage = 'Optional fuller description of changes';
+	let placeholderMessage = 'Optional description of changes';
 	let messageRows = 6;
 	let filesSelectedForCommit: string[] = [];
 
@@ -127,7 +127,7 @@
 	}
 </script>
 
-<div class="flex flex-row">
+<div class="flex flex-row h-full">
 	<div class="flex w-[500px] min-w-[500px] flex-shrink-0 flex-col p-2">
 		<div
 			class="button group mb-2 flex max-w-[500px] rounded border border-zinc-600 bg-zinc-700 py-2 px-4 text-zinc-300 shadow"
@@ -160,23 +160,51 @@
 				</svg>
 			</div>
 		</div>
-		<div transition:slide={{ duration: 150 }}>
+		
-			<h3 class="mb-2 text-base font-semibold text-zinc-200">Commit Message</h3>
+		<div class="changed-files-list-container mt-2 mb-4">
+			<div class="changed-files-list rounded border font-mono text-zinc-900 border-t-[0.5px] border-r-[0.5px] border-b-[0.5px] border-l-[0.5px] border-gb-700 bg-gb-900">
+				<div
+					class="mb-2 flex flex-row space-x-2 rounded-t border-b border-b-gb-750 bg-gb-800 p-2 text-zinc-200"
+				>
+					<h3 class="text-base font-semibold ">File Changes</h3>
+					<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
+					<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
+				</div>
+				<ul class="w-80 truncate px-2 pb-2">
+					{#each $filesStatus as activity}
+						<li class="list-none text-zinc-300">
+							<input
+								type="checkbox"
+								on:click={showMessage}
+								bind:group={filesSelectedForCommit}
+								value={activity.path}
+							/>
+							{activity.status.slice(0, 1)}
+							{shortPath(activity.path)}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+		
+		<div class="commit-input-container" transition:slide={{ duration: 150 }}>
+			<h3 class="mb-2 text-base font-semibold text-zinc-300">Commit Message</h3>
 			<input
 				type="text"
 				name="subject"
 				bind:value={commitSubject}
 				placeholder={placeholderSubject}
-				class="mb-2 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md p-4 bg-zinc-700 border-zinc-600 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
 			/>
 			<textarea
 				rows={messageRows}
 				name="message"
 				placeholder={placeholderMessage}
 				bind:value={commitMessage}
-				class="mb-2 block w-full rounded-md border-0 p-4 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
+				class="mb-2 block w-full rounded-md p-4 bg-zinc-700 border-zinc-600 text-zinc-200 ring-1 ring-inset ring-gray-600 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:py-1.5 sm:text-sm sm:leading-6"
 			/>
 		</div>
+
 		<div class="flex flex-row justify-between">
 			{#if filesSelectedForCommit.length == 0}
 				<div>Select at least one file.</div>
@@ -194,8 +222,8 @@
 				>
 			{/if}
 			{#if !generatedMessage}
-				<a class="cursor-pointer rounded bg-green-800 p-2" on:click={fetchCommitMessage}
+				<a class="cursor-pointer rounded bg-green-800 p-2 text-zinc-50 bg-gradient-to-b from-[#623871] to-[#502E5C] shadow" on:click={fetchCommitMessage}
-					>Generate a message for me.</a
+					>✨ Generate commit message</a
 				>
 			{:else if generatedMessage == 'loading'}
 				<div class="flex flex-col">
@@ -210,33 +238,9 @@
 				</div>
 			{/if}
 		</div>
-		<div class="mt-2">
+
-			<div class="rounded border border-zinc-400 bg-zinc-500 font-mono text-zinc-900">
-				<div
-					class="mb-2 flex flex-row space-x-2 rounded-t border-b border-zinc-600 bg-zinc-800 p-2 text-zinc-200"
-				>
-					<h3 class="text-base font-semibold ">File Changes</h3>
-					<a href="#" class="text-yellow-200" on:click={toggleAllOn}>all</a>
-					<a href="#" class="text-yellow-200" on:click={toggleAllOff}>none</a>
 	</div>
-				<ul class="w-80 truncate px-2 pb-2">
+	<div class="h-full max-h-screen flex-grow overflow-auto p-2 h-100">
-					{#each $filesStatus as activity}
-						<li class="list-none">
-							<input
-								type="checkbox"
-								on:click={showMessage}
-								bind:group={filesSelectedForCommit}
-								value={activity.path}
-							/>
-							{activity.status.slice(0, 1)}
-							{shortPath(activity.path)}
-						</li>
-					{/each}
-				</ul>
-			</div>
-		</div>
-	</div>
-	<div class="h-full max-h-screen flex-grow overflow-auto p-2">
 		{#if gitDiff}
 			{#each Object.entries(gitDiff) as [key, value]}
 				{#if key}