From 6c49f5c6d2266c3de5c2b301994f518a2d998c6e Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Tue, 25 Apr 2023 16:15:42 +0200
Subject: [PATCH] use buttons for the nav header

---
 src/lib/components/BackForwardButtons.svelte  | 56 +++----------------
 src/lib/components/Breadcrumbs.svelte         | 34 +++++------
 src/lib/components/Button/Button.svelte       |  8 +--
 src/lib/components/icons/IconArrowLeft.svelte | 20 +++++++
 .../components/icons/IconArrowRight.svelte    | 20 +++++++
 src/lib/components/icons/index.ts             |  2 +
 6 files changed, 63 insertions(+), 77 deletions(-)
 create mode 100644 src/lib/components/icons/IconArrowLeft.svelte
 create mode 100644 src/lib/components/icons/IconArrowRight.svelte

diff --git a/src/lib/components/BackForwardButtons.svelte b/src/lib/components/BackForwardButtons.svelte
index da1091a68..437530b62 100644
--- a/src/lib/components/BackForwardButtons.svelte
+++ b/src/lib/components/BackForwardButtons.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { afterNavigate, goto } from '$app/navigation';
 	import { page } from '$app/stores';
+	import { Button } from '$lib/components';
+	import { IconArrowLeft, IconArrowRight } from './icons';
 
 	const getUri = (url: URL) => url.pathname + url.search + url.hash;
 
@@ -42,55 +44,11 @@
 </script>
 
 <div class="flex items-center justify-center space-x-3 text-zinc-600">
-	<button
-		class="group cursor-default select-none rounded-md p-2"
-		class:hover:bg-zinc-700={canGoBack}
-		class:cursor-default={canGoBack}
-		on:click={onBackClicked}
-		disabled={!canGoBack}
-		title="Go back"
-	>
-		<div class="flex h-4 w-4 items-center justify-center">
-			<svg
-				width="16"
-				height="12"
-				viewBox="0 0 16 12"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					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:fill-zinc-300={canGoBack}
-				/>
-			</svg>
-		</div>
-	</button>
-	<button
-		class="group cursor-default rounded-md p-2"
-		title="Go forward"
-		class:hover:bg-zinc-700={canGoForward}
+	<Button filled={false} on:click={onBackClicked} disabled={!canGoBack} icon={IconArrowLeft} />
+	<Button
+		filled={false}
 		on:click={onForwardClicked}
+		icon={IconArrowRight}
 		disabled={!canGoForward}
-	>
-		<div class="flex h-4 w-4 items-center justify-center">
-			<svg
-				width="16"
-				height="12"
-				viewBox="0 0 16 12"
-				fill="none"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					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:fill-zinc-300={canGoForward}
-				/>
-			</svg>
-		</div>
-	</button>
+	/>
 </div>
diff --git a/src/lib/components/Breadcrumbs.svelte b/src/lib/components/Breadcrumbs.svelte
index 31f86c825..b9c6d6c71 100644
--- a/src/lib/components/Breadcrumbs.svelte
+++ b/src/lib/components/Breadcrumbs.svelte
@@ -2,32 +2,24 @@
 	import type { Project } from '$lib/api';
 	import type { Readable } from 'svelte/store';
 	import { IconHome } from './icons';
-	import { Tooltip } from '$lib/components';
+	import { Tooltip, Button } from '$lib/components';
+	import { goto } from '$app/navigation';
 
 	export let project: Readable<Project | undefined>;
 </script>
 
-<div class="flex flex-row items-center text-zinc-400">
-	<a
-		Title="GitButler home"
-		class="button-home group cursor-default rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
-		href="/"
-	>
-		<IconHome class="hover:fill-zinc-300 hover:text-zinc-200" />
-	</a>
+<div class="flex flex-row items-center gap-1 text-zinc-400">
+	<Button icon={IconHome} filled={false} height="small" on:click={() => goto('/')} />
 
 	{#if $project}
-		<div class="ml-1">
-			<Tooltip label="{$project.title} home">
-				<a
-					class="project-home-button group flex rounded-md py-2 px-2 hover:bg-zinc-700"
-					href={`/projects/${$project.id}`}
-				>
-					<span class="flex h-4 items-center group-hover:text-zinc-200">
-						{$project.title}
-					</span>
-				</a>
-			</Tooltip>
-		</div>
+		<Tooltip label="{$project.title} home">
+			<Button
+				filled={false}
+				height="small"
+				on:click={() => $project && goto(`/projects/${$project.id}`)}
+			>
+				{$project.title}
+			</Button>
+		</Tooltip>
 	{/if}
 </div>
diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
index 0e2b5cae0..b7c3a9997 100644
--- a/src/lib/components/Button/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -54,7 +54,7 @@
 
 <style lang="postcss">
 	button {
-		@apply relative flex w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium transition transition duration-150 ease-in-out ease-out hover:ease-in;
+		@apply relative flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[10px] whitespace-nowrap rounded py-2 text-base font-medium transition transition duration-150 ease-in-out ease-out hover:ease-in;
 	}
 
 	button:focus {
@@ -80,12 +80,6 @@
 		@apply bg-zinc-600;
 	}
 
-	.basic,
-	.primary,
-	.destructive {
-		line-height: 20px;
-	}
-
 	.primary {
 		@apply text-blue-500;
 	}
diff --git a/src/lib/components/icons/IconArrowLeft.svelte b/src/lib/components/icons/IconArrowLeft.svelte
new file mode 100644
index 000000000..ac473dee7
--- /dev/null
+++ b/src/lib/components/icons/IconArrowLeft.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	width="16"
+	height="12"
+	viewBox="0 0 16 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		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="currentColor"
+	/>
+</svg>
diff --git a/src/lib/components/icons/IconArrowRight.svelte b/src/lib/components/icons/IconArrowRight.svelte
new file mode 100644
index 000000000..182bfb5f3
--- /dev/null
+++ b/src/lib/components/icons/IconArrowRight.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	class={className}
+	width="16"
+	height="12"
+	viewBox="0 0 16 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		fill-rule="evenodd"
+		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="currentColor"
+	/>
+</svg>
diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts
index 81adc5f48..876d1140f 100644
--- a/src/lib/components/icons/index.ts
+++ b/src/lib/components/icons/index.ts
@@ -17,3 +17,5 @@ export { default as IconDiscord } from './IconDiscord.svelte';
 export { default as IconExternalLink } from './IconExternalLink.svelte';
 export { default as IconFeedback } from './IconFeedback.svelte';
 export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconArrowLeft } from './IconArrowLeft.svelte';
+export { default as IconArrowRight } from './IconArrowRight.svelte';