Fixed buttons and made them pretty again

src/lib/components/Button/Button.svelte

@@ -31,7 +31,7 @@
 				<IconLoading class="h-[16px] w-[16px] animate-spin" />
 				<slot />
 			{:else}
-				<div class="items-around absolute flex h-full w-full justify-center">
+				<div class="items-around absolute flex w-full justify-center">
 					<IconLoading class="h-[16px] w-[16px] animate-spin" />
 				</div>
 				<div class="opacity-0">
@@ -61,7 +61,7 @@
 				<IconLoading class="h-[16px] w-[16px] animate-spin" />
 				<slot />
 			{:else}
-				<div class="items-around absolute flex h-full w-full justify-center">
+				<div class="items-around absolute flex w-full justify-center">
 					<IconLoading class="h-[16px] w-[16px] animate-spin" />
 				</div>
 				<div class="opacity-0">
@@ -78,7 +78,7 @@
 <style lang="postcss">
 	a,
 	button {
-		@apply relative flex w-fit cursor-pointer justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
+		@apply relative flex items-center w-fit cursor-pointer justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
 		text-underline-offset: 3px;
 	}
 
@@ -92,23 +92,29 @@
 		@apply bg-[#FFFFFF1A]/10;
 	}
 	.basic.filled {
-		@apply border-transparent bg-zinc-500;
+		@apply bg-zinc-500;
 	}
 	.basic.filled:hover {
 		@apply bg-zinc-600;
 	}
 
+
+	.basic, .primary, .destructive {
+		line-height: 20px;
+	}
+
 	.primary {
 		@apply text-blue-500;
 	}
 	.primary.outlined {
 		@apply border-[#3662E3];
+		
 	}
 	.primary.outlined:hover {
 		@apply bg-[#1C48C94D]/30;
 	}
 	.primary.filled {
-		@apply border-transparent bg-blue-600;
+		@apply bg-blue-600;
 	}
 	.primary.filled:hover {
 		@apply bg-[#1C48C9];
@@ -124,7 +130,7 @@
 		@apply bg-[#E336364D]/30;
 	}
 	.destructive.filled {
-		@apply border-transparent bg-[#E33636];
+		@apply bg-[#E33636];
 	}
 	.destructive.filled:hover {
 		@apply bg-[#C91C1C];
@@ -139,9 +145,17 @@
 		@apply opacity-40;
 	}
 
+	.filled {
+		border-top: 1px solid rgba(255, 255, 255, 0.2);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+		border-left: 1px solid rgba(255, 255, 255, 0);
+		border-right: 1px solid rgba(255, 255, 255, 0);
+		text-shadow: 0px 2px #00000021;
+	}
+
 	.filled,
 	.outlined {
-		@apply px-[16px] py-[10px] text-zinc-50 hover:no-underline;
+		@apply px-[16px] py-[7px] text-zinc-50 hover:no-underline;
 	}
 
 	.outlined {
@@ -150,7 +164,7 @@
 
 	.filled.small,
 	.outlined.small {
-		@apply py-[4px];
+		@apply py-[1px];
 	}
 
 	.filled.long,

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

@@ -111,8 +111,8 @@
 	$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
 </script>
 
-<div id="commit-page" class="flex h-full w-full gap-2 p-2">
+<div id="commit-page" class="flex h-full w-full gap-2">
-	<div>
+	<div class="commit-panel-container border-r p-4 border-zinc-700">
 		<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
 
 		<form on:submit|preventDefault={onCommit} class="flex w-1/3 min-w-[500px] flex-col gap-4">
@@ -172,7 +172,7 @@
 
 			<input
 				name="summary"
-				class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100"
+				class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100 ring-blue-600/30 focus:border-blue-600 "
 				disabled={isGeneratingCommitMessage || isCommitting}
 				type="text"
 				placeholder="Summary (required)"
@@ -183,22 +183,13 @@
 			<textarea
 				name="description"
 				disabled={isGeneratingCommitMessage || isCommitting}
-				class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100"
+				class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100  focus:border-blue-600"
 				rows="10"
 				placeholder="Description (optional)"
 				bind:value={description}
 			/>
 
 			<div class="flex justify-between">
-				<Button
-					loading={isCommitting}
-					disabled={!isCommitEnabled || isGeneratingCommitMessage}
-					role="primary"
-					type="submit"
-				>
-					Commit changes
-				</Button>
-
 				{#if isGeneratingCommitMessage}
 					<div
 						class="flex items-center gap-1 rounded bg-gradient-to-b from-[#623871] to-[#502E5C] py-2 px-4 disabled:cursor-not-allowed disabled:opacity-50"
@@ -230,6 +221,17 @@
 						✨ Generate commit message
 					</button>
 				{/if}
+
+				<Button
+					loading={isCommitting}
+					disabled={!isCommitEnabled || isGeneratingCommitMessage}
+					role="primary"
+					type="submit"
+				>
+					Commit changes
+				</Button>
+
+
 			</div>
 		</form>
 	</div>