Skip to content

Commit 24650c7

Browse files
committed
refactor: Reduce repetition by adding icon arguments to Button
1 parent 2f24780 commit 24650c7

File tree

4 files changed

+15
-13
lines changed

4 files changed

+15
-13
lines changed

src/layout/Hero/HeroSection.svelte

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,8 @@
1212
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
1313
</p>
1414
<div class="hero-buttons">
15-
<Button type="filled" href="download">
16-
<TrayArrowDown size="20px" />
17-
Download
18-
</Button>
19-
<Button type="tonal" href="patches">
20-
<FileDocumentOutline size="20px" />
21-
View patches
22-
</Button>
15+
<Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
16+
<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
2317
</div>
2418
</div>
2519
</section>

src/lib/components/Button.svelte

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
11
<script lang="ts">
22
export let type: 'filled' | 'tonal' | 'text' | 'outlined';
3+
export let icon: any | undefined = undefined;
4+
export let iconSize = 20;
5+
export let iconColor = 'currentColor';
36
export let href: string = '';
47
export let target: string = '';
58
export let label: string = '';
69
</script>
710

811
{#if href}
912
<a {href} {target} class={`button-${type}`} aria-label={label}>
13+
<svelte:component this={icon} size={iconSize} color={iconColor} />
1014
<slot />
1115
</a>
1216
{:else}
1317
<button on:click class={`button-${type}`} aria-label={label}>
18+
<svelte:component this={icon} size={iconSize} color={iconColor} />
1419
<slot />
1520
</button>
1621
{/if}

src/routes/contributors/ContributorSection.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
<a href={url} rel="noreferrer" target="_blank" on:click|stopPropagation>
2626
<h4>{name}</h4>
2727
</a>
28-
<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}>
28+
<div id="arrow" style:transform={expanded ? 'rotate(0deg)' : 'rotate(180deg)'}>
2929
<ChevronUp size="24px" color="var(--surface-six)" />
3030
</div>
3131
</div>

src/routes/download/+page.svelte

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,16 @@
9191
<div class="buttons">
9292
<Query {query} let:data>
9393
{#if !isAndroid || androidVersion < 8}
94-
<Button on:click={handleClick} type="filled">
95-
<TrayArrowDown size="20px" />
94+
<Button on:click={handleClick} icon={TrayArrowDown} type="filled">
9695
{data.release.version}
9796
</Button>
9897
{:else}
99-
<Button on:click={handleClick} type="filled" href={data.release.download_url}>
100-
<TrayArrowDown size="20px" />
98+
<Button
99+
on:click={handleClick}
100+
icon={TrayArrowDown}
101+
type="filled"
102+
href={data.release.download_url}
103+
>
101104
{data.release.version}
102105
</Button>
103106
{/if}

0 commit comments

Comments
 (0)