refactor: Reduce repetition by adding icon arguments to Button

ReVanced · Dec 22, 2024 · 24650c7 · 24650c7
1 parent 2f24780
commit 24650c7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git 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
@@ -1,16 +1,21 @@
 <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 = '';
 </script>
 
 {#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
@@ -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
@@ -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}