Buttons, user settings page, command K input size.

src/app.postcss

@@ -56,7 +56,7 @@ button {
 
 /* COMMAND PALETTE */
 
-.commnand-palette-section-header {
+.command-palette-section-header {
 	@apply mx-2 mb-2 mt-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300;
 }
 

src/lib/components/Button/Button.svelte

@@ -78,8 +78,9 @@
 <style lang="postcss">
 	a,
 	button {
-		@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline;
+		@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded text-base font-medium transition ease-in-out hover:underline transition duration-150 ease-out hover:ease-in;
 		text-underline-offset: 3px;
+		
 	}
 
 	.basic {

src/lib/components/CommandPalette/CmdK.svelte

@@ -186,14 +186,14 @@
 </script>
 
 <Modal on:close bind:this={modal}>
-	<div class="commnand-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
+	<div class="command-palette flex max-h-[360px] w-[640px] flex-col rounded text-zinc-400">
 		<!-- Search input area -->
 		<div class="search-input flex items-center border-b border-zinc-400/20 py-2">
 			<div class="ml-4 mr-2 flex flex-grow items-center">
 				<!-- Project scope -->
 				{#if scopeToProject}
 					<div class="mr-1 flex items-center">
-						<span class="font-semibold text-zinc-300">{$project?.title}</span>
+						<span class="text-lg font-semibold text-zinc-300">{$project?.title}</span>
 						<span class="ml-1 text-lg">/</span>
 					</div>
 				{/if}
@@ -201,7 +201,7 @@
 				<div class="mr-1 flex-grow">
 					<!-- svelte-ignore a11y-autofocus -->
 					<input
-						class="w-full bg-transparent text-zinc-300 focus:outline-none"
+						class="command-palette-input w-full bg-transparent text-zinc-300 text-lg leading-10 focus:outline-none"
 						bind:value={userInput}
 						on:input|stopPropagation={updateMatchFilesQuery}
 						type="text"
@@ -218,7 +218,7 @@
 			{#each commandGroups as group, groupIdx}
 				{#if group.visible}
 					<div class="w-full cursor-default select-none px-2">
-						<p class="commnand-palette-section-header result-section-header">
+						<p class="command-palette-section-header result-section-header">
 							<span>{group.name}</span>
 							{#if group.description}
 								<span class="ml-2 font-light italic text-zinc-300/70">({group.description})</span>

src/lib/components/CommandPalette/Replay.svelte

@@ -77,7 +77,7 @@
 <Modal on:close bind:this={modal}>
 	<div class="mx-2 mb-2 w-full cursor-default select-none">
 		<p
-			class="commnand-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
+			class="command-palette-section-header mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300"
 		>
 			Replay working history
 		</p>

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

@@ -111,7 +111,7 @@
 	$: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0;
 </script>
 
-<div id="commit-page" class="flex h-full w-full gap-2">
+<div id="commit-page" class="flex h-full w-full">
 	<div class="commit-panel-container border-r border-zinc-700 p-4">
 		<h1 class="px-2 py-1 text-xl font-bold">Commit</h1>
 
@@ -180,14 +180,19 @@
 				required
 			/>
 
-			<textarea
+			<div class="commit-description-container relative">
-				name="description"
+				<div class="generating-commit bg-zinc-600 px-3 py-1 absolute top-1 left-1 rounded">
-				disabled={isGeneratingCommitMessage || isCommitting}
+					✨ Summarizing changes...
-				class="w-full rounded border border-zinc-600 bg-zinc-700 p-2 text-zinc-100  focus:border-blue-600"
+				</div>
-				rows="10"
+				<textarea
-				placeholder="Description (optional)"
+					name="description"
-				bind:value={description}
+					disabled={isGeneratingCommitMessage || isCommitting}
-			/>
+					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>
 
 			<div class="flex justify-between">
 				{#if isGeneratingCommitMessage}
@@ -234,7 +239,7 @@
 		</form>
 	</div>
 
-	<div id="preview" class="m-2 flex flex-auto cursor-text select-text overflow-auto">
+	<div id="preview" class="m-4 flex flex-auto cursor-text select-text overflow-auto border rounded p-4 border-gb-700 bg-card-default">
 		{#if $selectedDiffPath !== undefined}
 			{#if $selectedDiff !== undefined}
 				<DiffViewer diff={$selectedDiff} path={$selectedDiffPath} />

src/routes/users/+page.svelte

@@ -69,6 +69,35 @@
 					on:submit={onSubmit}
 					class="user-form flex flex-row items-start justify-between gap-12 rounded-lg py-2"
 				>
+
+
+					<fields id="right" class="pt-6 flex flex-col items-center gap-2">
+						{#if $user.picture}
+							<img
+								class="h-28 w-28 rounded-full border-zinc-300"
+								src={userPicture}
+								alt="Your avatar"
+							/>
+						{/if}
+
+						<label
+							title="Edit profile photo"
+							for="picture"
+							class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
+						>
+							Edit
+							<input
+								on:change={onPictureChange}
+								type="file"
+								id="picture"
+								name="picture"
+								accept={fileTypes.join('')}
+								class="hidden"
+							/>
+						</label>
+					</fields>
+
+
 					<fields id="left" class="flex flex-1 flex-col gap-3">
 						<div class="flex flex-col gap-1">
 							<label for="name" class="text-zinc-400">Name</label>
@@ -94,36 +123,12 @@
 							/>
 						</div>
 
-						<footer class="pt-4">
+						<footer class="pt-4 flex justify-end">
 							<Button loading={saving} role="primary" type="submit">Update profile</Button>
 						</footer>
 					</fields>
 
-					<fields id="right" class="flex flex-col items-center gap-2">
-						{#if $user.picture}
-							<img
-								class="h-28 w-28 rounded-full border-zinc-300"
-								src={userPicture}
-								alt="Your avatar"
-							/>
-						{/if}
 
-						<label
-							title="Edit profile photo"
-							for="picture"
-							class="font-sm -mt-6 -ml-16 cursor-default rounded-lg border border-zinc-600 bg-zinc-800 px-2 text-center text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50"
-						>
-							Edit
-							<input
-								on:change={onPictureChange}
-								type="file"
-								id="picture"
-								name="picture"
-								accept={fileTypes.join('')}
-								class="hidden"
-							/>
-						</label>
-					</fields>
 				</form>
 			</div>
 		{:else}
@@ -195,12 +200,26 @@
 		{/if}
 
 		<div class="mt-8 flex flex-col border-t border-zinc-400 pt-4">
-			<h2 class="text-lg font-medium text-zinc-100">Get Support</h2>
+			<div class="mt-4">
-			<div class="text-sm text-zinc-300">
+				<a 
-				If you have an issue or any questions, please email us.
+					class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in"  
+					href="mailto:hello@gitbutler.com?subject=Feedback or question!">
+					<h2 class="text-lg text-zinc-300">Get Support</h2>
+					<div>If you have an issue or any questions, please email us.</div>
+
+					
+				</a>
 			</div>
 			<div class="mt-4">
-				<a class="text-blue-200" href="mailto:hello@gitbutler.com">hello@gitbutler.com</a>
+				<a  
+					class="flex flex-col gap-2 rounded border border-zinc-700 bg-card-default hover:bg-card-active shadow p-3 text-zinc-400 transition duration-150 ease-out hover:ease-in" 
+					href="https://discord.gg/wDKZCPEjXC" 
+					target="_blank" 
+					rel="noreferrer"
+				>
+					<h2 class="text-lg text-zinc-300">Join our Discord</h2>
+					<div class="text-sm text-zinc-500">Share feedback, request, or ask questions</div>
+				</a>
 			</div>
 		</div>
 	</div>