From 344f976e7fbb3029f5a3706fda52be489cbd5592 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.lol>
Date: Wed, 26 Apr 2023 04:49:31 -0400
Subject: [PATCH] fix: improve error page ui

---
 src/layout/Footer.svelte              | 22 +++++++++++++---------
 src/routes/+error.svelte              | 21 +++++----------------
 src/routes/patches/PackageMenu.svelte |  2 +-
 src/util/friendlyName.ts              |  1 +
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/layout/Footer.svelte b/src/layout/Footer.svelte
index 1caf2ff..20b5027 100644
--- a/src/layout/Footer.svelte
+++ b/src/layout/Footer.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
 	import { queries } from '$data/api';
 	import { friendlyName } from '$util/friendlyName';
 
@@ -8,7 +11,8 @@
 	const query = createQuery(['repositories'], queries.repositories);
 </script>
 
-<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- squiggly divider line -->
+<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
 		<g clip-path="url(#clip0_2426_11367)">
 			<path
@@ -19,7 +23,7 @@
 	</pattern>
 	<rect width="100%" height="100%" fill="url(#a)" />
 </svg>
-<footer>
+<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<div class="footer-top">
 		<section class="main-content">
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
@@ -35,15 +39,15 @@
 		</section>
 
 		<section class="links-container">
-			<div class="link-column">
+			<ul>
 				<li>Pages</li>
 				<li><a href="/">Home</a></li>
 				<li><a href="/download">Download</a></li>
 				<li><a href="/docs">Documentation</a></li>
 				<li><a href="/patches">Patches</a></li>
 				<li><a href="/contributors">Contributors</a></li>
-			</div>
-			<div class="link-column">
+			</ul>
+			<ul>
 				<li>Repositories</li>
 				<Query {query} let:data>
 					{#each data as { name }}
@@ -54,8 +58,8 @@
 						</li>
 					{/each}
 				</Query>
-			</div>
-			<div class="link-column">
+			</ul>
+			<ul>
 				<!-- to replace -->
 				<li>Socials</li>
 				<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
@@ -70,7 +74,7 @@
 				<li>
 					<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a>
 				</li>
-			</div>
+			</ul>
 		</section>
 	</div>
 	<div class="footer-bottom">
@@ -162,7 +166,7 @@
 		margin-top: 1rem;
 	}
 
-	.link-column {
+	ul {
 		display: flex;
 		gap: 1rem;
 		flex-direction: column;
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index f049ee2..1fffd5e 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,18 +2,19 @@
 	import Meta from '$lib/components/Meta.svelte';
 	import Navigation from '$layout/Navbar/NavButton.svelte';
 	import { page } from '$app/stores';
+	import Button from '$lib/components/Button.svelte';
 
 	$: status = $page.status;
 </script>
 
 <Meta title="404" />
 
-<section class="error">
+<section class="wrapper">
 	<h1>{status}</h1>
 	{#if status == 404}
 		<p>This page received a cease and desist letter from a multi-billion dollar tech company.</p>
 		<br />
-		<Navigation href="/">Home</Navigation>
+		<Button kind="primary">Return Home</Button>	
 	{:else}
 		<p>
 			{$page.error?.message}
@@ -22,25 +23,13 @@
 </section>
 
 <style>
-	.error {
-		padding-top: 5rem;
+	section {
 		text-align: center;
-		height: 100vh;
-		display: flex;
-		gap: 12px;
-		flex-direction: column;
-		justify-content: center;
+		margin-top: 10rem;
 	}
 
 	h1 {
-		font-size: 10rem;
 		color: var(--accent-color);
-		margin-bottom: 24px;
 	}
 
-	p {
-		font-size: 5ch;
-		color: var(--white);
-		line-height: 3rem;
-	}
 </style>
diff --git a/src/routes/patches/PackageMenu.svelte b/src/routes/patches/PackageMenu.svelte
index b714384..12c7067 100644
--- a/src/routes/patches/PackageMenu.svelte
+++ b/src/routes/patches/PackageMenu.svelte
@@ -1,5 +1,5 @@
 <div class="menu">
-	<h6>PACKAGES</h6>
+	<h6>Packages</h6>
 	<hr/>
 	<div class="slot">
 		<slot />
diff --git a/src/util/friendlyName.ts b/src/util/friendlyName.ts
index 008f156..f8f5319 100644
--- a/src/util/friendlyName.ts
+++ b/src/util/friendlyName.ts
@@ -10,5 +10,6 @@ export function friendlyName(text: string): string {
 		.replace(/sponsorblock/g, 'SponsorBlock')
 		.replace(/tiktok/g, 'TikTok')
 		.replace(/vr/g, 'VR')
+		.replace(/url/g, 'URL')
 		.replace(/(?:^|\s)\S/g, (x: string) => x.toUpperCase());
 }
\ No newline at end of file