ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-04-29 22:24:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use svelte element in button

Browse Source
This commit is contained in:
afn 2022-12-21 18:27:57 -05:00
parent 8d73663ae3
commit 6c0d95baa2
3 changed files with 23 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/lib/components/atoms/Button.svelte
View File

@ -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;
}

6
src/lib/components/organisms/Hero.svelte
View File

@ -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>

2
src/routes/patches/+page.svelte
View File

@ -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} />