From f6bff2f07e946463b3235f8d1e7b718e3e5721fc Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Wed, 26 Apr 2023 15:07:19 +0200
Subject: [PATCH] QuickCommitModal: basic looks

---
 src/lib/components/QuickCommitModal.svelte    | 55 +++++++++++++++++++
 src/lib/components/icons/IconGitBranch.svelte | 12 ++--
 .../projects/[projectId]/+layout.svelte       |  4 ++
 tailwind.config.cjs                           |  4 ++
 4 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/QuickCommitModal.svelte

diff --git a/src/lib/components/QuickCommitModal.svelte b/src/lib/components/QuickCommitModal.svelte
new file mode 100644
index 000000000..592a1c0d7
--- /dev/null
+++ b/src/lib/components/QuickCommitModal.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Button, Modal, Link } from '$lib/components';
+	import { onMount } from 'svelte';
+	import { IconGitBranch } from './icons';
+
+	export const show = () => modal.show();
+
+	let modal: Modal;
+
+	onMount(() => {
+		modal.show();
+	});
+</script>
+
+<Modal bind:this={modal} let:close>
+	<form
+		class="font-modal-stroke/50 flex w-[680px] flex-col gap-6 rounded-lg border-[0.5px] border-modal-stroke bg-modal-background p-4"
+	>
+		<header class="flex w-full items-center justify-between">
+			<h2 class="flex items-center gap-4">
+				<IconGitBranch class="h-5 w-5" />
+				<span class="line-height-5 text-white">ian/gb-1234-this-is-a-big-update</span>
+			</h2>
+
+			<Button role="purple" height="small">Autowrite</Button>
+		</header>
+
+		<div class="flex flex-col gap-2">
+			<input
+				name="commit-message"
+				class="border-none bg-transparent p-0 text-xl text-zinc-100"
+				type="text"
+				placeholder="Commit message (required)"
+				required
+			/>
+
+			<textarea
+				name="commit-description"
+				class="border-none bg-transparent p-0 text-lg text-zinc-400"
+				placeholder="Commit description (optional)"
+				rows="6"
+			/>
+		</div>
+
+		<footer class="flex items-center justify-between">
+			<div class="text-zinc-400">
+				<Link href="/">8 files changed</Link>
+			</div>
+			<div class="flex gap-2">
+				<Button filled={false} outlined={true} on:click={close}>Cancel</Button>
+				<Button role="primary" on:click={() => alert('commit!')}>Commit</Button>
+			</div>
+		</footer>
+	</form>
+</Modal>
diff --git a/src/lib/components/icons/IconGitBranch.svelte b/src/lib/components/icons/IconGitBranch.svelte
index ca01dd8b1..33e756f24 100644
--- a/src/lib/components/icons/IconGitBranch.svelte
+++ b/src/lib/components/icons/IconGitBranch.svelte
@@ -5,14 +5,14 @@
 
 <svg
 	class={className}
+	width="12"
+	height="15"
+	viewBox="0 0 12 15"
+	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	width="16"
-	height="16"
-	viewBox="0 0 16 16"
-	stroke-width="1"
-	stroke="currentColor"
 >
 	<path
-		d="M9.5 3.25a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.493 2.493 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25Zm-6 0a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Zm8.25-.75a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z"
+		d="M7.50003 2.24999C7.50015 1.83752 7.61366 1.43303 7.82813 1.08071C8.04261 0.728386 8.34981 0.441801 8.71615 0.252272C9.0825 0.0627427 9.49389 -0.022437 9.90538 0.00604163C10.3169 0.0345203 10.7126 0.175562 11.0493 0.413751C11.3861 0.651941 11.6509 0.978112 11.8148 1.35662C11.9787 1.73513 12.0354 2.1514 11.9787 2.55996C11.922 2.96851 11.7541 3.35362 11.4933 3.67319C11.2325 3.99276 10.8889 4.2345 10.5 4.37199V4.99999C10.5 5.66303 10.2366 6.29892 9.76779 6.76776C9.29895 7.2366 8.66307 7.49999 8.00003 7.49999H4.00003C3.73481 7.49999 3.48046 7.60535 3.29292 7.79289C3.10539 7.98042 3.00003 8.23478 3.00003 8.49999V9.62799C3.50072 9.80492 3.92273 10.1532 4.19148 10.6112C4.46023 11.0692 4.5584 11.6075 4.46864 12.1308C4.37888 12.6542 4.10698 13.129 3.70099 13.4713C3.29499 13.8136 2.78106 14.0014 2.25003 14.0014C1.719 14.0014 1.20506 13.8136 0.799071 13.4713C0.393079 13.129 0.121173 12.6542 0.0314159 12.1308C-0.0583415 11.6075 0.0398295 11.0692 0.308576 10.6112C0.577323 10.1532 0.999339 9.80492 1.50003 9.62799V4.37199C0.999618 4.19507 0.577862 3.84694 0.309304 3.38913C0.0407465 2.93132 -0.0573222 2.39331 0.0324313 1.87019C0.122185 1.34707 0.393982 0.87252 0.799783 0.530414C1.20558 0.188307 1.71926 0.000672082 2.25003 0.000672082C2.78079 0.000672082 3.29447 0.188307 3.70027 0.530414C4.10607 0.87252 4.37787 1.34707 4.46762 1.87019C4.55738 2.39331 4.45931 2.93132 4.19075 3.38913C3.92219 3.84694 3.50044 4.19507 3.00003 4.37199V6.20799C3.31543 6.07039 3.65591 5.99957 4.00003 5.99999H8.00003C8.26524 5.99999 8.5196 5.89464 8.70713 5.7071C8.89467 5.51956 9.00003 5.26521 9.00003 4.99999V4.37199C8.56124 4.21686 8.18136 3.92947 7.91271 3.54943C7.64407 3.16939 7.49989 2.7154 7.50003 2.24999ZM1.50003 2.24999C1.50003 2.4489 1.57905 2.63967 1.7197 2.78032C1.86035 2.92097 2.05112 2.99999 2.25003 2.99999C2.44894 2.99999 2.63971 2.92097 2.78036 2.78032C2.92101 2.63967 3.00003 2.4489 3.00003 2.24999C3.00003 2.05108 2.92101 1.86031 2.78036 1.71966C2.63971 1.57901 2.44894 1.49999 2.25003 1.49999C2.05112 1.49999 1.86035 1.57901 1.7197 1.71966C1.57905 1.86031 1.50003 2.05108 1.50003 2.24999ZM9.75003 1.49999C9.55112 1.49999 9.36035 1.57901 9.2197 1.71966C9.07905 1.86031 9.00003 2.05108 9.00003 2.24999C9.00003 2.4489 9.07905 2.63967 9.2197 2.78032C9.36035 2.92097 9.55112 2.99999 9.75003 2.99999C9.94894 2.99999 10.1397 2.92097 10.2804 2.78032C10.421 2.63967 10.5 2.4489 10.5 2.24999C10.5 2.05108 10.421 1.86031 10.2804 1.71966C10.1397 1.57901 9.94894 1.49999 9.75003 1.49999ZM2.25003 11C2.05112 11 1.86035 11.079 1.7197 11.2197C1.57905 11.3603 1.50003 11.5511 1.50003 11.75C1.50003 11.9489 1.57905 12.1397 1.7197 12.2803C1.86035 12.421 2.05112 12.5 2.25003 12.5C2.44894 12.5 2.63971 12.421 2.78036 12.2803C2.92101 12.1397 3.00003 11.9489 3.00003 11.75C3.00003 11.5511 2.92101 11.3603 2.78036 11.2197C2.63971 11.079 2.44894 11 2.25003 11Z"
+		fill="currentColor"
 	/>
 </svg>
diff --git a/src/routes/projects/[projectId]/+layout.svelte b/src/routes/projects/[projectId]/+layout.svelte
index e1702b54b..1e97a3798 100644
--- a/src/routes/projects/[projectId]/+layout.svelte
+++ b/src/routes/projects/[projectId]/+layout.svelte
@@ -5,6 +5,8 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { IconSearch, IconSettings, IconTerminal } from '$lib/components/icons';
+	import QuickCommitModal from '$lib/components/QuickCommitModal.svelte';
+	import { onMount } from 'svelte';
 
 	export let data: LayoutData;
 	const { project } = data;
@@ -118,3 +120,5 @@
 		</div>
 	</footer>
 </div>
+
+<QuickCommitModal />
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 0406399c3..926e33957 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -18,6 +18,10 @@ const config = {
 			'4xl': '32px'
 		},
 		colors: {
+			modal: {
+				background: '#242429',
+				stroke: '#3f3f3f'
+			},
 			gb: {
 				700: '#52525B'
 			},