Fixing buttons

src/lib/components/BackForwardButtons.svelte

@@ -4,7 +4,7 @@
 
 <div class="flex items-center justify-center space-x-3 text-zinc-400">
 	<button
-		class="rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
+		class="group rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
 		title="Go back"
 		on:click={() => history.back()}
 	>
@@ -21,12 +21,13 @@
 					clip-rule="evenodd"
 					d="M14.9998 5H3.41376L6.70676 1.707C7.09776 1.316 7.09776 0.684 6.70676 0.293C6.31576 -0.0979999 5.68376 -0.0979999 5.29276 0.293L0.292762 5.293C-0.0982383 5.684 -0.0982383 6.316 0.292762 6.707L5.29276 11.707C5.48776 11.902 5.74376 12 5.99976 12C6.25576 12 6.51176 11.902 6.70676 11.707C7.09776 11.316 7.09776 10.684 6.70676 10.293L3.41376 7H14.9998C15.5528 7 15.9998 6.552 15.9998 6C15.9998 5.448 15.5528 5 14.9998 5Z"
 					fill="#5C5F62"
+					class="group-hover:fill-zinc-50"
 				/>
 			</svg>
 		</div>
 	</button>
 	<button
-		class="rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
+		class="group rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
 		title="Go forward"
 		on:click={() => history.forward()}
 	>
@@ -43,6 +44,7 @@
 					clip-rule="evenodd"
 					d="M15.707 5.293L10.707 0.293C10.316 -0.0979999 9.684 -0.0979999 9.293 0.293C8.902 0.684 8.902 1.316 9.293 1.707L12.586 5H1C0.447 5 0 5.448 0 6C0 6.552 0.447 7 1 7H12.586L9.293 10.293C8.902 10.684 8.902 11.316 9.293 11.707C9.488 11.902 9.744 12 10 12C10.256 12 10.512 11.902 10.707 11.707L15.707 6.707C16.098 6.316 16.098 5.684 15.707 5.293Z"
 					fill="#5C5F62"
+					class="group-hover:fill-zinc-50"
 				/>
 			</svg>
 		</div>

src/lib/components/Breadcrumbs.svelte

@@ -18,13 +18,14 @@
 				width="14"
 				height="14"
 				viewBox="0 0 14 14"
-				fill="none"
 				class="group-hover:fill-zinc-50"
+				fill="none"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				<path
 					d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
 					fill="#5C5F62"
+					class="group-hover:fill-zinc-300"
 				/>
 			</svg>
 		</div>

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

@@ -211,7 +211,7 @@
 						Everything is committed
 					</div>
 				{:else}
-					<div class="rounded border border-yellow-600 bg-yellow-500 p-4 font-mono text-yellow-900">
+					<div class="rounded border border-yellow-400 bg-yellow-500 p-4 font-mono text-yellow-900">
 						<ul class="pl-4">
 							{#each $filesStatus as activity}
 								<li class="list-disc ">

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

@@ -163,10 +163,10 @@
 		</div>
 	</div>
 {:else}
-	<div class="flex h-full flex-col gap-2 px-4">
+	<div class="flex h-full flex-col gap-2">
 		{#if frame !== null}
 			<header>
-				<h2 class="text-lg">{frame.filepath}</h2>
+				<h2 class="px-4 pt-2 text-xl text-zinc-300">{frame.filepath}</h2>
 			</header>
 
 			<div class="project-container flex-auto overflow-auto">
@@ -174,7 +174,7 @@
 			</div>
 		{/if}
 
-		<div id="timeline" class="relative w-full py-4" bind:this={timeline}>
+		<div id="timeline" class="relative w-full py-4 px-4" bind:this={timeline}>
 			<div
 				id="cursor"
 				use:slider

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

@@ -245,7 +245,7 @@
 								‹
 							</button>
 						</div>
-						<div class="flex w-full flex-col rounded-t border border-orange-400">
+						<div class="session-container flex w-full flex-col rounded-t border border-orange-400">
 							<div
 								class="session-header flex items-center justify-between rounded-t-sm border border-orange-400 bg-orange-400 p-1 px-4 text-sm font-bold text-zinc-800"
 							>