From 9734d9f64bb8f896b724d243650c19a4c4007b30 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Thu, 20 Apr 2023 22:22:00 -0400
Subject: [PATCH] fix: tweak dialogue, patch item, contributors ui

---
 src/app.scss                                      | 10 +++++-----
 src/lib/components/Dialogue.svelte                |  7 +++++--
 src/lib/components/Meta.svelte                    |  2 +-
 src/routes/contributors/+page.svelte              |  7 +++++++
 src/routes/contributors/ContributorPerson.svelte  |  1 +
 src/routes/contributors/ContributorSection.svelte |  3 +--
 src/routes/patches/PatchItem.svelte               | 11 ++++++-----
 7 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 6c85ee7..cd6bda7 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -85,8 +85,8 @@ h3 {
 
 h4 {
     color: var(--accent-color-two);
-    font-weight: 500;
-    font-size: 1.2rem;
+    font-weight: 400;
+    font-size: 1rem;
     letter-spacing: 0.02rem;
     line-height: 2rem;
 }
@@ -107,7 +107,7 @@ h6 {
 p {
     color: var(--grey-five);
     font-weight: 400;
-    font-size: 0.95rem;
+    font-size: 1rem;
     letter-spacing: 0.02rem;
     line-height: 1.75rem;
 }
@@ -142,9 +142,9 @@ p {
 
 hr {
     display: block;
-    height: 2px;
+    height: 1px;
     border: 0;
-    border-top: 2px solid var(--grey-three);
+    border-top: 1px solid var(--grey-three);
 }
 
 input {
diff --git a/src/lib/components/Dialogue.svelte b/src/lib/components/Dialogue.svelte
index e66d7b0..47d6a8e 100644
--- a/src/lib/components/Dialogue.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -21,7 +21,7 @@
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	>
 		<div class="top">
-			<div class="title">
+			<div class="title" class:hasIcon={$$slots.icon}>
 				{#if fullscreen}
 					<button on:click={() => (modalOpen = !modalOpen)}>
 						<img src="../icons/back.svg" id="back" alt="back" />
@@ -69,7 +69,6 @@
 	.title {
 		position: sticky;
 		display: flex;
-		flex-direction: column;
 		align-items: center;
 		gap: 1rem;
 		top: 0;
@@ -79,6 +78,10 @@
 		margin-bottom: 8px;
 	}
 
+	.hasIcon {
+		flex-direction: column;
+	}
+
 	.modal {
 		position: fixed;
 		width: min(85%, 425px);
diff --git a/src/lib/components/Meta.svelte b/src/lib/components/Meta.svelte
index f7edebe..9e5b2a8 100644
--- a/src/lib/components/Meta.svelte
+++ b/src/lib/components/Meta.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 let _title: string = "";
-$: title = _title === "" ? "ReVanced" : `ReVanced | ${_title}`;
+$: title = _title === "" ? "ReVanced" : `ReVanced · ${_title}`;
 
 export { _title as title };
 
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte
index 8e60a22..e4d37a4 100644
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@@ -82,11 +82,18 @@
 		transition: all 0.3s var(--bezier-one);
 	}
 
+	a:hover {
+		text-decoration: underline;
+		text-decoration-style: wavy;
+		text-decoration-color: var(--grey-four);
+	}
+
 	a:hover::after {
 		transform: translateX(5px);
 	}
 	@media screen and (max-width: 768px) {
 		.text-container {
+			padding: 2rem 1.75rem;
 			margin-bottom: 2rem;
 		}
 	}
diff --git a/src/routes/contributors/ContributorPerson.svelte b/src/routes/contributors/ContributorPerson.svelte
index b22fc38..aca0c35 100644
--- a/src/routes/contributors/ContributorPerson.svelte
+++ b/src/routes/contributors/ContributorPerson.svelte
@@ -36,6 +36,7 @@
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		padding: 0.25rem 0;
 	}
 
 	img {
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index 3a06880..66daa72 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -21,7 +21,7 @@
 		on:click={() => (expanded = !expanded)}
 		on:keypress={() => (expanded = !expanded)}
 	>
-		<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
+		<a href="https://github.com/{repo}" rel="noreferrer" target="_blank" on:click|stopPropagation>
 			<h4>{repo_name}</h4>
 		</a>
 		<img
@@ -72,7 +72,6 @@
 	}
 
 	a {
-		transition: all 0.3s var(--bezier-one);
 		display: flex;
 		text-decoration: none;
 		width: max-content;
diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
index 0de5b93..830dd07 100644
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -32,14 +32,14 @@
 				target="_blank"
 				rel="noreferrer"
 			>
-				<li class="patch-info">📦 {pkg.name} ·</li>
+				<li class="patch-info">📦 {pkg.name}</li>
 			</a>
 		{/each}
 
 		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
 		{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
 			<li class="patch-info">
-				🎯 {patch.compatiblePackages[0].versions.slice(-1)} ·
+				🎯 {patch.compatiblePackages[0].versions.slice(-1)}
 			</li>
 		{/if}
 
@@ -47,10 +47,8 @@
 			<li class="patch-info">🌎 Universal patch</li>
 		{/if}
 
-		<li class="patch-info">🧩 {patch.version}</li>
-
 		{#if hasPatchOptions}
-			<li class="patch-info">· ⚙️ Patch options</li>
+			<li class="patch-info">⚙️ Patch options</li>
 		{/if}
 	</ul>
 
@@ -84,6 +82,9 @@
 		font-size: 0.8rem;
 		font-weight: 500;
 		color: var(--grey-five);
+		padding: 0.25rem 0.5rem;
+		border: 1px solid var(--grey-three);
+		border-radius: 8px;
 	}
 
 	a {