From 3bac5e0453eb660102f5491d2b09fe68a819f412 Mon Sep 17 00:00:00 2001
From: afn <47723802+afnzmn@users.noreply.github.com>
Date: Tue, 25 Oct 2022 21:38:00 -0400
Subject: [PATCH] fix: patch cell target pkg stuff + refactoring

---
 .../components/atoms/ContributorPerson.svelte | 35 ++++++-------------
 .../molecules/ContributorHost.svelte          |  8 ++---
 src/lib/components/molecules/PatchCell.svelte | 26 +++++++++-----
 src/routes/+layout.svelte                     | 22 +++++++-----
 src/routes/+page.svelte                       | 14 ++++----
 src/routes/credits/+page.svelte               | 26 +++++++-------
 src/routes/docs/+page.svelte                  |  9 ++---
 src/routes/patches/+page.svelte               | 33 +++++------------
 8 files changed, 82 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/atoms/ContributorPerson.svelte b/src/lib/components/atoms/ContributorPerson.svelte
index f586483..e11e0b2 100644
--- a/src/lib/components/atoms/ContributorPerson.svelte
+++ b/src/lib/components/atoms/ContributorPerson.svelte
@@ -6,9 +6,7 @@
 </script>
 
 <a href={url} rel="noreferrer" target="_blank">
-	<button tabindex="-1">
-		<img src={pfp} {alt} />
-	</button>
+	<img src={pfp} {alt} />
 	<h2>{name}</h2>
 </a>
 
@@ -16,32 +14,17 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-		text-align: center;
-		padding: 0.5rem 0.5rem;
+		padding: 0.5rem;
 		width: 100%;
 		transition: all 0.3s var(--bezier-one);
-		border: 1px solid var(--grey-three);
 		border-radius: 4px;
-		display:flex;
+		display: flex;
 		gap: 1rem;
 		align-items: center;
-		background-color: var(--grey-six)
+		background-color: var(--grey-six);
+		border: 1px solid var(--grey-three);
 	}
 
-	button {
-		color: var(--white);
-		border-radius: 50%;
-		overflow: hidden;
-		border: 0;
-		height: 30px;
-		width: 30px;
-		min-width: 30px;
-		min-height: 30px;
-		cursor: pointer;
-		background-color: transparent;
-		transition: transform 0.4s var(--bezier-one);
-		user-select: none;
-	}
 
 	a:hover {
 		background-color: var(--accent-color);
@@ -59,7 +42,11 @@
 	}
 
 	img {
-		height: 100%;
-		width: 100%;
+		border-radius: 50%;
+		height: 30px;
+		width: 30px;
+		background-color: var(--grey-two);
+		transition: transform 0.4s var(--bezier-one);
+		user-select: none;
 	}
 </style>
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 434d63b..4698a6d 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -21,12 +21,12 @@
 	</a>
 </div>
 
-<hr/>
+<hr />
 
 <div class="contrib-host">
-	{#each contribs as contrib}
-		{#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
-			<ContributorButton name={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
+	{#each contribs as { login, avatar_url, html_url }}
+		{#if !usersIwantToExplodeSoBadly.includes(login)}
+			<ContributorButton name={login} pfp={avatar_url} url={html_url} />
 		{/if}
 	{/each}
 </div>
diff --git a/src/lib/components/molecules/PatchCell.svelte b/src/lib/components/molecules/PatchCell.svelte
index 44e4e85..6b6a55d 100644
--- a/src/lib/components/molecules/PatchCell.svelte
+++ b/src/lib/components/molecules/PatchCell.svelte
@@ -38,15 +38,21 @@
 	<div class="info-container">
 		{#each patch.compatiblePackages as pkg, i}
 			{#if current === false}
-				<h2>📦 {pkg.name}</h2>
-			{/if}
-			<!-- gets only the lastest supported version (cant get 'any' to work without duplicates help) -->
-			{#if i < pkg.versions.length - 1}
-				<h2>
-					🎯 {pkg.versions.slice(-1)[0] || 'Any'}
-				</h2>
+				<a
+					href="https://play.google.com/store/apps/details?id={pkg.name}"
+					target="_blank"
+					rel="noreferrer"
+				>
+					<h2>📦 {pkg.name}</h2>
+				</a>
 			{/if}
 		{/each}
+		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
+		{#if patch.compatiblePackages[0].versions.length}
+			<h2>
+				🎯 {patch.compatiblePackages[0].versions.slice(-1)}
+			</h2>
+		{/if}
 
 		<h2>🧩 {patch.version}</h2>
 
@@ -88,6 +94,10 @@
 		display: flex;
 	}
 
+	a {
+		text-decoration: none;
+	}
+
 	.info-container {
 		display: flex;
 		flex-wrap: wrap;
@@ -115,7 +125,7 @@
 		transition: all 2s var(--bezier-one);
 		background-color: var(--grey-six);
 		padding: 1.5rem;
-		border-radius: 12px;
+		border-radius: 8px;
 	}
 
 	.patch-container:active {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 18d2623..d129656 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -22,18 +22,22 @@
 	<meta charset="UTF-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-	<meta name="og:title" content="ReVanced"/>
-	<meta name="og:image" itemprop="image" content="/embed.png">
-	<meta property="og:description" content="An extensible framework for building application mods.">
-	<meta name="twitter:image" itemprop="image" content="/embed.png">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="theme-color" content="#0f111a">
+	<meta name="og:title" content="ReVanced" />
+	<meta name="og:image" itemprop="image" content="/embed.png" />
+	<meta
+		property="og:description"
+		content="An extensible framework for building application mods."
+	/>
+	<meta name="twitter:image" itemprop="image" content="/embed.png" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="theme-color" content="#0f111a" />
 	<title>ReVanced</title>
 </svelte:head>
 
-<NavHost/>
+<NavHost />
+
 {#if $show_loading_animation}
-  <Spinner />
+	<Spinner />
 {:else}
-  <slot />
+	<slot />
 {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 738bceb..0b61887 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,13 +5,15 @@
 	import Wave from '$lib/components/atoms/Wave.svelte';
 </script>
 
-<div class="wrap">
-	<div class="wrappezoid">
-		<Home />
-		<div id="heroimg"><HeroImage /></div>
+<main>
+	<div class="wrap">
+		<div class="wrappezoid">
+			<Home />
+			<div id="heroimg"><HeroImage /></div>
+		</div>
 	</div>
-</div>
-<SocialHost />
+	<SocialHost />
+</main>
 <Wave />
 
 <style>
diff --git a/src/routes/credits/+page.svelte b/src/routes/credits/+page.svelte
index 2f842f5..4731469 100644
--- a/src/routes/credits/+page.svelte
+++ b/src/routes/credits/+page.svelte
@@ -11,19 +11,21 @@
 	export let data: ContribData;
 </script>
 
-<div class="wrapper">
-	<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-		<h1>Made possible by the community.</h1>
-		<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
+<main>
+	<div class="wrapper">
+		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+			<h1>Made possible by the community.</h1>
+			<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
+		</div>
+		<div class="contrib-grid">
+			{#each data.repositories as { contributors, name }}
+				<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+					<ContributorHost contribs={contributors} repo={name} />
+				</div>
+			{/each}
+		</div>
 	</div>
-	<div class="contrib-grid">
-		{#each data.repositories as { contributors, name }}
-			<div in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-				<ContributorHost contribs={contributors} repo={name} />
-			</div>
-		{/each}
-	</div>
-</div>
+</main>
 
 <Footer {...data} />
 
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index c5af511..e84747e 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -1,10 +1,11 @@
 <script>
-	import Button from '$lib/components/atoms/Button.svelte';
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
+
+	import Button from '$lib/components/atoms/Button.svelte';
 </script>
 
-<section in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
+<main in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
 	<div class="menu">
 		<div class="doc-section-selected">
 			<h3>Prerequisites</h3>
@@ -51,10 +52,10 @@
 			>
 		</div>
 	</div>
-</section>
+</main>
 
 <style>
-	section {
+	main {
 		display: grid;
 		grid-template-columns: 300px 3fr;
 	}
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 622d459..e1f223c 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -1,20 +1,20 @@
 <script lang="ts">
-  import type { PatchesData } from './+page';
-  import type { ContribData } from '../+layout';
+	import type { PatchesData } from './+page';
+	import type { ContribData } from '../+layout';
 
 	import { fly } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
 
-	import type { CompatiblePackage, Patch } from 'src/data/types';
+	import type { CompatiblePackage } from 'src/data/types';
 
 	import TreeMenu from '$lib/components/molecules/TreeMenu.svelte';
 	import TreeMenuButton from '$lib/components/atoms/TreeMenuButton.svelte';
 	import PatchCell from '$lib/components/molecules/PatchCell.svelte';
 	import Footer from '$lib/components/molecules/Footer.svelte';
 
-  export let data: PatchesData & ContribData;
+	export let data: PatchesData & ContribData;
 
-  let { patches, packages } = data;
+	let { patches, packages } = data;
 
 	let current: boolean = false;
 
@@ -34,7 +34,7 @@
 	<meta content="Revanced - Patches" name="twitter:title" />
 </svelte:head>
 
-<section>
+<main>
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<TreeMenu title="packages">
 			{#each packages as pkg}
@@ -52,11 +52,11 @@
 			{/if}
 		{/each}
 	</div>
-</section>
+</main>
 <Footer {...data} />
 
 <style>
-	section {
+	main {
 		margin-inline: auto;
 		width: min(95%, 100rem);
 		display: grid;
@@ -69,25 +69,10 @@
 		margin-top: 7.5rem;
 		display: flex;
 		flex-direction: column;
-		gap: 0.75rem;
+		gap: 0.5rem;
 		width: 100%;
 		position: sticky;
 		z-index: 1;
 		min-height: calc(100vh - 7.5rem);
 	}
-
-	/* 
-    pulsing todo:
-	@keyframes pulse {
-		0% {
-			background-position: right; 
-        }
-    }
-	.loading {
-		height: 50px;
-		background: linear-gradient(90deg, var(--grey-six) 33%, var(--grey-one) 50%, var(--grey-six) 66%) var(--grey-six);
-		background-size: 300% 100%;
-		animation: pulse 2s infinite;
-        margin-bottom: 0.5rem;
-	} */
 </style>