From 062fc665b9d9a6fdd61ae832fe02926999cc872a Mon Sep 17 00:00:00 2001
From: Ian Donahue <idonahue@users.noreply.github.com>
Date: Mon, 13 Mar 2023 00:19:48 +0100
Subject: [PATCH] Commit palette model looks a little more modern

---
 src/lib/components/Breadcrumbs.svelte        |  3 ++-
 src/lib/components/CommandPalette.svelte     | 25 +++++++++++---------
 src/routes/projects/[projectId]/+page.svelte |  6 +++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Breadcrumbs.svelte b/src/lib/components/Breadcrumbs.svelte
index 223480de8..51d10fe35 100644
--- a/src/lib/components/Breadcrumbs.svelte
+++ b/src/lib/components/Breadcrumbs.svelte
@@ -12,13 +12,14 @@
 </script>
 
 <div class="flex flex-row items-center text-zinc-400">
-	<a class="rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200" href="/">
+	<a class="button-home group rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200" href="/">
 		<div class="flex h-4 w-4 items-center justify-center">
 			<svg
 				width="14"
 				height="14"
 				viewBox="0 0 14 14"
 				fill="none"
+				class="group-hover:fill-zinc-50"
 				xmlns="http://www.w3.org/2000/svg"
 			>
 				<path
diff --git a/src/lib/components/CommandPalette.svelte b/src/lib/components/CommandPalette.svelte
index 7aa28b739..69e787caf 100644
--- a/src/lib/components/CommandPalette.svelte
+++ b/src/lib/components/CommandPalette.svelte
@@ -328,11 +328,13 @@
 						out:fade={{ duration: 100 }}
 						class="mx-auto max-w-2xl transform divide-y divide-zinc-500 divide-opacity-20 overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
 						style="
-						border-width: 0.5px; 
-						-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
-						backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
-						background-color: rgba(24, 24, 27, 0.60);
-						border: 0.5px solid rgba(63, 63, 70, 0.50);"
+							height: auto;
+							max-height: 420px;
+							border-width: 0.5px; 
+							-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
+							backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
+							background-color: rgba(24, 24, 27, 0.60);
+							border: 0.5px solid rgba(63, 63, 70, 0.50);"
 					>
 						<div class="relative">
 							<svg
@@ -360,7 +362,7 @@
 
 						<!-- Default state, show/hide based on command palette state. -->
 						<ul
-							class="max-h-80 scroll-py-2 divide-y divide-zinc-500 divide-opacity-20 overflow-y-auto"
+							class="scroll-py-2 divide-y divide-zinc-500 divide-opacity-20 overflow-y-auto"
 						>
 							<li class="p-1">
 								<ul id="commandMenu" class="text-sm text-zinc-400">
@@ -381,9 +383,7 @@
 												<svelte:component this={item.icon} />
 												<span class="ml-3 flex-auto truncate">{item.text}</span>
 												{#if item.key}
-													<span
-														class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded"
-													>
+													<span class="ml-3 flex-none text-xs font-semibold text-zinc-400 px-1 py-1 bg-zinc-800 border-b border-black rounded">
 														<kbd class="font-sans">⌘</kbd><kbd class="font-sans">{item.key}</kbd>
 													</span>
 												{/if}
@@ -405,8 +405,11 @@
 						bind:this={commitPalette}
 						class="mx-auto max-w-2xl transform overflow-hidden rounded-xl bg-zinc-900 shadow-2xl transition-all border border-zinc-700"
 						style="
-						border-width: 0.5px; 
-						border: 0.5px solid rgba(63, 63, 70, 0.50);"
+							border-width: 0.5px; 
+							border: 0.5px solid rgba(63, 63, 70, 0.50);
+							-webkit-backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%); 
+							background-color: rgba(24, 24, 27, 0.6);
+							"
 					>
 						<div class="w-full border-b border-zinc-700 text-lg text-white mb-4 p-4">
 							Commit Your Changes
diff --git a/src/routes/projects/[projectId]/+page.svelte b/src/routes/projects/[projectId]/+page.svelte
index 9e7e8374a..308e2daec 100644
--- a/src/routes/projects/[projectId]/+page.svelte
+++ b/src/routes/projects/[projectId]/+page.svelte
@@ -182,10 +182,16 @@
 								<li class="list-disc ">
 									{activity.status.slice(0, 1)}
 									{shortPath(activity.path)}
+									
 								</li>
+								
 							{/each}
 						</ul>
 					</div>
+					<!-- TODO: Button needs to be hooked up -->
+					<div class="flex flex-row-reverse w-100">
+						<button class="button mt-2 rounded bg-blue-600 py-2 px-3 text-white">Commit changes</button>
+					</div>
 				{/if}
 			</div>
 			<div