From 6c0d95baa2463c9488954dc8b76ef31940c2ce61 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Wed, 21 Dec 2022 18:27:57 -0500
Subject: [PATCH] refactor: use svelte element in button

---
 src/lib/components/atoms/Button.svelte   | 53 +++++++++---------------
 src/lib/components/organisms/Hero.svelte |  6 +--
 src/routes/patches/+page.svelte          |  2 +-
 3 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index 570694c..43b182d 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -1,7 +1,6 @@
 <script>
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
-	export let maxWidth = false;
 	export let icon = '';
 	export let href = '';
 	export let capitalize = false;
@@ -9,23 +8,18 @@
 </script>
 
 <button on:click>
-	{#if href}
-		<a {href} {target}>
-			<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}">
-				{#if icon}
-					<img src="../icons/{icon}.svg" alt={icon} />
-				{/if}
-				<slot />
-			</div>
-		</a>
-	{:else}
-		<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}">
-			{#if icon}
-				<img src="../icons/{icon}.svg" alt={icon} />
-			{/if}
-			<slot />
-		</div>
-	{/if}
+	<svelte:element
+		this={href ? 'a' : 'div'}
+		{href}
+		{target}
+		class={type}
+		class:capitalize
+	>
+		{#if icon}
+			<img src="../icons/{icon}.svg" alt={icon} />
+		{/if}
+		<slot />
+	</svelte:element>
 </button>
 
 <style>
@@ -34,21 +28,22 @@
 		background-color: transparent;
 	}
 
-	a {
-		text-decoration: none;
-	}
 
-	div,
-	.button-secondary {
+	a,
+	div {
 		min-width: max-content;
-		min-height: 52px;
+		min-height: 57px;
 		font-size: 0.9rem;
+		text-decoration: none;
 		color: var(--white);
 		font-weight: 600;
 		border: none;
 		border-radius: 12px;
 		padding: 1rem 1.5rem;
-		display: block;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
 		cursor: pointer;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
@@ -72,14 +67,6 @@
 		filter: brightness(85%);
 	}
 
-	div,
-	.button-secondary {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
 	img {
 		height: 25px;
 	}
diff --git a/src/lib/components/organisms/Hero.svelte b/src/lib/components/organisms/Hero.svelte
index b20272a..27f4878 100644
--- a/src/lib/components/organisms/Hero.svelte
+++ b/src/lib/components/organisms/Hero.svelte
@@ -13,10 +13,8 @@
 		</h4>
 
 		<div class="hero-buttons">
-			<Button icon="download" kind="primary" capitalize={true} href="download"
-				>Download Manager</Button
-			>
-			<Button icon="docs" href="patches" capitalize={true}>View patches</Button>
+			<Button icon="download" kind="primary" capitalize href="download">Download Manager</Button>
+			<Button icon="docs" href="patches" capitalize>View patches</Button>
 		</div>
 	</div>
 </section>
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index a0b3c52..492c423 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -68,7 +68,7 @@
 		<TreeMenu>
 			<!-- Must bind both variables: we get searchTerm from the text input, -->
 			<!-- and searchTermFiltered gets cleared with the clear button -->
-			<Search bind:searchTerm bind:searchTermFiltered title="Search patches" sticky={true} on:keyup={debounce} />
+			<Search bind:searchTerm bind:searchTermFiltered title="Search patches" on:keyup={debounce} />
 			<span class="packages">
 				{#each packages as pkg}
 					<TreeMenuButton bind:selectedPkg name={pkg} />