refactor: Clean up codebase, improve styling and structure

src/layout/Footer/FooterHost.svelte

@@ -146,10 +146,6 @@
 		}
 	}
 
-	path {
-		stroke: var(--border);
-	}
-
 	.main-content {
 		display: flex;
 		flex-direction: column;

src/layout/Footer/FooterSection.svelte

@@ -2,19 +2,10 @@
 	export let title: string;
 </script>
 
-<div class="desktop-only">
+<div>
-	<span>{title}</span>
+	<span>
-	<ul>
+		{title}
-		<slot />
+	</span>
-	</ul>
-</div>
-
-<div class="mobile-only">
-	<button class="title">
-		<span>
-			{title}
-		</span>
-	</button>
 	<ul>
 		<slot />
 	</ul>
@@ -22,49 +13,23 @@
 
 <style lang="scss">
 	span {
-		list-style: none;
+		display: flex;
-		color: var(--text-four);
+		margin: 1.5rem 0;
 		font-size: 0.9rem;
 		font-weight: 600;
+		color: var(--text-four);
 	}
 
 	ul {
-		margin: 1.25rem 0rem;
 		display: flex;
-		gap: 1rem;
 		flex-direction: column;
-		width: max-content;
+		margin: 1.25rem 0rem;
-	}
+		gap: 1rem;
-
-	.title {
-		display: flex;
-		justify-content: space-between;
-		background-color: transparent;
-		border: none;
-		width: 100%;
-		margin: 1.5rem 0;
-		cursor: pointer;
-	}
-
-	.mobile-only:not(:last-child) {
-		border-bottom: 1px solid var(--border);
-	}
-
-	.mobile-only {
-		display: none;
-	}
-
-	.arrow {
-		transition: all 0.2s var(--bezier-one);
-		user-select: none;
 	}
 
 	@media (max-width: 768px) {
-		.mobile-only {
+		div:not(:last-child) {
-			display: block;
+			border-bottom: 1px solid var(--border);
-		}
-		.desktop-only {
-			display: none;
 		}
 	}
 </style>

src/layout/Hero/HeroImage.svelte

@@ -7,17 +7,17 @@
 	<Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
 </div>
 
-<style>
+<style lang="scss">
-	.hero-img :global(img) {
-		height: 100%;
-		border-radius: 1.75rem;
-	}
-
 	.hero-img {
 		height: max(100vh, 600px);
 		padding: 0.5rem 0.5rem;
 		border-radius: 1.75rem;
 		background-color: var(--surface-seven);
 		user-select: none;
+
+		:global(img) {
+			height: 100%;
+			border-radius: 1.75rem;
+		}
 	}
 </style>

src/layout/Hero/SocialButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Social } from '$lib/types';
+
 	export let social: Social;
 </script>
 
@@ -7,8 +8,11 @@
 	<img src="socials/{social.name.toLowerCase()}.svg" alt={social.name} />
 </a>
 
-<style>
+<style lang="scss">
 	a {
+		display: flex;
+		justify-content: center;
+
 		border: 0;
 		width: 60px;
 		height: 60px;
@@ -19,23 +23,18 @@
 		background-color: var(--surface-four);
 		color: var(--text-one);
 		user-select: none;
-	}
 
-	a {
+		&:hover {
-		display: flex;
+			transform: translateY(-5%);
-		justify-content: center;
+		}
-	}
 
-	img {
+		img {
-		transition: filter 0.4s var(--bezier-one);
+			transition: filter 0.4s var(--bezier-one);
-		width: 30px;
+			width: 30px;
-	}
+		}
 
-	a:hover {
+		&:hover img {
-		transform: translateY(-5%);
+			filter: brightness(1.2);
-	}
+		}
-
-	a:hover img {
-		filter: brightness(1.2);
 	}
 </style>

src/routes/announcements/TagsHost.svelte

@@ -49,19 +49,9 @@
 		/>
 	{/each}
 
-	{#if expandable && tags.length > 1}
+		{#if expandable && tags.length > 1}
-		<li class="button">
+			<li>
-			<Button type="text" on:click={() => (showAllTags = !showAllTags)}>
+				<Button type="text" on:click={() => (showAllTags = !showAllTags)}>
-				<div
-					class="expand-arrow"
-					style:transform={showAllTags ? 'rotate(90deg)' : 'rotate(-90deg)'}
-				>
-					<ChevronDown size="24px" color="var(--surface-six)" />
-				</div>
-			</Button>
-		</li>
-	{/if}
-</div>
 
 <style lang="scss">
 	div {
@@ -69,7 +59,7 @@
 		align-items: center;
 		gap: 4px;
 
-		.button {
+		li {
 			display: flex;
 			align-items: center;
 		}
@@ -79,9 +69,5 @@
 			user-select: none;
 			height: 1.5rem;
 		}
-
-		.rotate .expand-arrow {
-			transform: rotate(180deg);
-		}
 	}
 </style>

src/routes/contributors/+page.svelte

@@ -37,36 +37,38 @@
 	]}
 />
 
-<main>
+<div class="wrapper">
-	<div class="wrapper">
+	<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+		<h2>Made possible by the community.</h2>
-			<h2>Made possible by the community.</h2>
+		<p>
-			<p>
+			Want to show up here? <span>
-				Want to show up here? <span
+				<a href="https://github.com/revanced" target="_blank" rel="noreferrer"
-					><a href="https://github.com/revanced" target="_blank" rel="noreferrer"
+					>Become a contributor
-						>Become a contributor</a
+				</a>
-					></span
+			</span>
-				>
+		</p>
-			</p>
-		</div>
-		<div class="repos">
-			<Query {query} let:data>
-				{#each data.contributables as { name, url, contributors }}
-					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-						<ContributorHost {name} {url} {contributors} />
-					</div>
-				{/each}
-			</Query>
-		</div>
 	</div>
-</main>
+
+	<div class="repos">
+		<Query {query} let:data>
+			{#each data.contributables as { name, url, contributors }}
+				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+					<ContributorHost {name} {url} {contributors} />
+				</div>
+			{/each}
+		</Query>
+	</div>
+</div>
 
 <style>
+	.wrapper {
+		margin-bottom: 5rem;
+	}
+
 	.repos {
 		display: flex;
 		flex-direction: column;
 		gap: 2rem;
-		margin-bottom: 4rem;
 	}
 
 	h2 {

src/routes/contributors/ContributorPerson.svelte

@@ -10,7 +10,7 @@
 	<h5>{name}</h5>
 </a>
 
-<style>
+<style lang="scss">
 	a {
 		color: var(--text-one);
 		text-decoration: none;
@@ -23,12 +23,12 @@
 		align-items: center;
 		border-right: 1px solid var(--border);
 		border-bottom: 1px solid var(--border);
-	}
 
-	a:hover {
+		&:hover {
-		background: var(--surface-three);
+			background: var(--surface-three);
-		text-decoration: underline var(--primary);
+			text-decoration: underline var(--primary);
-		color: var(--text-one);
+			color: var(--text-one);
+		}
 	}
 
 	h5 {

src/routes/contributors/ContributorSection.svelte

@@ -15,7 +15,8 @@
 	let bots = ['semantic-release-bot', 'revanced-bot'];
 </script>
 
-<div class="section-container">
+<div class="container">
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		class="title"
 		class:closed={!expanded}
@@ -31,7 +32,7 @@
 	</div>
 
 	{#if expanded}
-		<div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
+		<div class="contributors" transition:slide={{ easing: quintOut, duration: 500 }}>
 			{#each contributors as { name, avatar_url, url }}
 				{#if !bots.includes(name)}
 					<ContributorButton {name} pfp={avatar_url} {url} />
@@ -42,61 +43,59 @@
 </div>
 
 <style lang="scss">
-	.title {
+	.container {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		cursor: pointer;
-		background-color: var(--surface-seven);
-		padding: 0.75rem 1.25rem;
-		border-bottom: 1px solid var(--border);
-		transition: all 0.2s var(--bezier-one);
-
-		&:hover {
-			background-color: var(--surface-three);
-		}
-	}
-
-	.closed {
-		border-bottom: none;
-	}
-
-	#arrow {
-		transition: all 0.2s var(--bezier-one);
-		user-select: none;
-	}
-
-	.section-container {
 		border-radius: 20px;
 		overflow: hidden;
 		border: 1px solid var(--border);
-	}
 
-	a {
+		.title {
-		display: flex;
+			display: flex;
-		text-decoration: none;
+			align-items: center;
-		width: max-content;
+			justify-content: space-between;
-		border-radius: 8px;
+			cursor: pointer;
-	}
+			background-color: var(--surface-seven);
+			padding: 0.75rem 1.25rem;
+			border-bottom: 1px solid var(--border);
+			transition: all 0.2s var(--bezier-one);
 
-	a:hover {
+			&:hover {
-		text-decoration: underline var(--primary);
+				background-color: var(--surface-three);
-		color: var(--text-one);
+			}
-	}
 
-	.contrib-host {
+			&.closed {
-		margin-right: -1px;
+				border-bottom: none;
-		margin-bottom: -1px;
+			}
-		display: grid;
-		justify-items: center;
-		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-	}
 
-	@media (max-width: 767px) {
+			a {
-		.contrib-host {
+				display: flex;
-			padding: 0.75rem;
+				text-decoration: none;
-			gap: 0.25rem;
+				width: max-content;
-			grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+				border-radius: 8px;
+
+				&:hover {
+					text-decoration: underline var(--primary);
+					color: var(--text-one);
+				}
+			}
+
+			#arrow {
+				transition: all 0.2s var(--bezier-one);
+				user-select: none;
+			}
+		}
+
+		.contributors {
+			margin-right: -1px;
+			margin-bottom: -1px;
+			display: grid;
+			justify-items: center;
+			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+
+			@media (max-width: 767px) {
+				padding: 0.75rem;
+				gap: 0.25rem;
+				grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
+			}
 		}
 	}
 </style>

src/routes/donate/DonateHeartAnimation.svelte

@@ -68,6 +68,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	id="pulsating-image"
 	on:mousemove={(e) => showHeart(e, false)}

src/routes/patches/+page.svelte

@@ -25,8 +25,6 @@
 
 	const query = createQuery(queries.patches());
 
-	let searcher: Fuse<Patch> | undefined;
-
 	let searchParams: Readable<URLSearchParams>;
 	if (building) {
 		searchParams = readable(new URLSearchParams());
@@ -77,13 +75,6 @@
 	};
 
 	onMount(update);
-	console.log(
-		query.subscribe((data) => {
-			// console.log(filterPatches(data.data?.patches, selectedPkg || '', displayedTerm));
-			console.log(data.data?.patches);
-			console.log(displayedTerm);
-		})
-	);
 </script>
 
 <Head
@@ -134,14 +125,12 @@
 	</div>
 
 	<Query {query} let:data>
-		<div class="mobile-packages-dialogue">
+		<MobilePatchesPackagesDialog
-			<MobilePatchesPackagesDialog
+			bind:dialogOpen={mobilePackages}
-				bind:dialogOpen={mobilePackages}
+			bind:searchTerm
-				bind:searchTerm
+			{data}
-				{data}
+			{selectedPkg}
-				{selectedPkg}
+		/>
-			/>
-		</div>
 
 		<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 			<PackageMenu>
@@ -156,7 +145,6 @@
 
 		<div class="patches-container">
 			{#each filterPatches(data.patches, selectedPkg || '', displayedTerm) as patch}
-				<!-- Trigger new animations when package or search changes (I love Svelte) -->
 				{#key selectedPkg || displayedTerm}
 					<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 						<PatchItem {patch} bind:showAllVersions />
@@ -205,11 +193,6 @@
 		display: none;
 	}
 
-	@media (min-width: 768px) {
-		.mobile-packages-dialogue {
-			display: none;
-		}
-	}
 	@media (max-width: 767px) {
 		main {
 			grid-template-columns: none;

src/routes/patches/Package.svelte

@@ -25,6 +25,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class="package"
 	class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
@@ -36,22 +37,30 @@
 <style lang="scss">
 	.package {
 		padding: 0.75rem 1rem;
+		border-radius: 100px;
+
 		font-size: 0.85rem;
 		font-weight: 500;
-		border-radius: 100px;
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		gap: 0.6rem;
-		width: 100%;
-		user-select: none;
-		transition: background-color 0.4s var(--bezier-one);
 		color: var(--text-four);
-		transition: color 0.3s var(--bezier-one);
+
+		cursor: pointer;
+		user-select: none;
+		transition:
+			background-color 0.4s var(--bezier-one),
+			color 0.3s var(--bezier-one);
+
+		@media (max-width: 767px) {
+			border-radius: 0px;
+			font-size: 0.9rem;
+			padding: 1rem;
+			word-break: break-all;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			border-bottom: 1px solid var(--border);
+		}
 
 		&.selected {
 			color: var(--primary);
-			transition: color 0.3s var(--bezier-one);
 			background-color: var(--tertiary);
 		}
 
@@ -60,28 +69,4 @@
 			color: var(--text-one);
 		}
 	}
-
-	@media (max-width: 767px) {
-		.package {
-			border-radius: 0px;
-			font-size: 0.9rem;
-			padding: 1rem 1rem;
-			width: 100%;
-			background-color: transparent;
-			word-break: break-all;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			color: var(--text-four);
-			border-bottom: 1px solid var(--border);
-		}
-
-		.selected {
-			color: var(--primary);
-			background-color: var(--tertiary);
-		}
-
-		.package:not(.selected):hover {
-			color: var(--text-four);
-		}
-	}
 </style>

src/routes/patches/PackageMenu.svelte

@@ -1,21 +1,21 @@
-<div class="menu">
+<div>
 	<h6>Packages</h6>
 	<hr />
-	<div class="slot">
+	<span>
 		<slot />
-	</div>
+	</span>
 </div>
 
 <style lang="scss">
-	.menu {
+	div {
-		height: calc(100vh - 60px);
-		width: 100%;
-		padding: 0px 30px 30px 10px;
 		display: flex;
 		flex-direction: column;
 		position: sticky;
+
+		height: calc(100vh - 60px);
 		top: 60px;
-		padding-top: calc(6rem - 60px);
+		padding: calc(6rem - 60px) 30px 30px 10px;
+
 		overflow-y: scroll;
 
 		&::-webkit-scrollbar-thumb {
@@ -26,12 +26,8 @@
 		}
 	}
 
-	.slot {
+	span {
 		margin-top: 0.75rem;
-		display: flex;
-		gap: 1rem;
-		flex-direction: column;
-		white-space: normal;
 		word-break: break-all;
 	}
 
@@ -39,16 +35,4 @@
 		margin-bottom: 1rem;
 		color: var(--primary);
 	}
-
-	@media (max-width: 767px) {
-		.menu {
-			padding: 0.75rem;
-			height: unset;
-		}
-
-		h6,
-		hr {
-			display: none;
-		}
-	}
 </style>