From 24650c71a956319487c07321fa9c86ef6a2ce0d4 Mon Sep 17 00:00:00 2001
From: Ushie <ushiekane@gmail.com>
Date: Sun, 22 Dec 2024 03:19:02 +0300
Subject: [PATCH] refactor: Reduce repetition by adding icon arguments to
 `Button`

---
 src/layout/Hero/HeroSection.svelte                | 10 ++--------
 src/lib/components/Button.svelte                  |  5 +++++
 src/routes/contributors/ContributorSection.svelte |  2 +-
 src/routes/download/+page.svelte                  | 11 +++++++----
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
index 0d9ed45..625daa4 100644
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@@ -12,14 +12,8 @@
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
 		</p>
 		<div class="hero-buttons">
-			<Button type="filled" href="download">
-				<TrayArrowDown size="20px" />
-				Download
-			</Button>
-			<Button type="tonal" href="patches">
-				<FileDocumentOutline size="20px" />
-				View patches
-			</Button>
+			<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
+			<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
 		</div>
 	</div>
 </section>
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 92fa4bd..ed89371 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
 	export let type: 'filled' | 'tonal' | 'text' | 'outlined';
+	export let icon: any | undefined = undefined;
+	export let iconSize = 20;
+	export let iconColor = 'currentColor';
 	export let href: string = '';
 	export let target: string = '';
 	export let label: string = '';
@@ -7,10 +10,12 @@
 
 {#if href}
 	<a {href} {target} class={`button-${type}`} aria-label={label}>
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
 		<slot />
 	</a>
 {:else}
 	<button on:click class={`button-${type}`} aria-label={label}>
+		<svelte:component this={icon} size={iconSize} color={iconColor} />
 		<slot />
 	</button>
 {/if}
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index 5b68ff7..37a414d 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -25,7 +25,7 @@
 		<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
 			<h4>{name}</h4>
 		</a>
-		<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}>
+		<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(180deg)'}>
 			<ChevronUp size="24px" color="var(--surface-six)" />
 		</div>
 	</div>
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index 17de3b1..d446658 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -91,13 +91,16 @@
 	<div class="buttons">
 		<Query {query} let:data>
 			{#if !isAndroid || androidVersion < 8}
-				<Button on:click={handleClick} type="filled">
-					<TrayArrowDown size="20px" />
+				<Button on:click={handleClick} icon={TrayArrowDown} type="filled">
 					{data.release.version}
 				</Button>
 			{:else}
-				<Button on:click={handleClick} type="filled" href={data.release.download_url}>
-					<TrayArrowDown size="20px" />
+				<Button
+					on:click={handleClick}
+					icon={TrayArrowDown}
+					type="filled"
+					href={data.release.download_url}
+				>
 					{data.release.version}
 				</Button>
 			{/if}