refactor: minor cleanup

src/app.css

@@ -1,14 +1,14 @@
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
 
-*{
+* {
     box-sizing: inherit;
     margin: 0;
     padding: 0;
-    font-family: 'Manrope', sans-serif;
+    font-family: "Manrope", sans-serif;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-html{
+html {
     margin: 0;
     padding: 0;
     font-size: 100%;
@@ -16,18 +16,19 @@ html{
     overflow-y: scroll;
 }
 
-body{
+body {
     margin: 0;
     padding: 0;
     line-height: 1.4;
     background-color: var(--bg-color);
 }
 
-html, body{
+html,
+body {
     max-width: 100%;
 }
 
-.wrapper{
+.wrapper {
     margin-inline: auto;
     width: min(90%, 100rem);
     margin-top: 7rem;
@@ -35,63 +36,62 @@ html, body{
 
 :root {
     --white: #fff;
-    --red: #8bc3f4;	
+    --accent-color: #8bc3f4;
-    --bg-color: #1A1C1E;	
+    --bg-color: #1a1c1e;
-    --grey-one: #252B31;
+    --grey-one: #252b31;
     --grey-two: #28313b;
     --grey-three: #3c4759c3;
-    --grey-four: #1B1E29;
+    --grey-four: #1b1e29;
     --grey-five: hsl(208, 30%, 75%);
     --grey-six: #23282da7;
     --grey-seven: #535563;
-    --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94)
+    --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-::selection{
+::selection {
     background: var(--grey-three);
 }
 
 /*-----headings-----*/
 
-h1{
+h1 {
     color: var(--white);
     font-weight: 700;
-	line-height: 1.5rem;
+    line-height: 1.5rem;
     font-size: 1.5rem;
 }
 
-h2{
+h2 {
     color: var(--grey-five);
     font-weight: 400;
     font-size: 1.4rem;
 }
 
-h3{
+h3 {
     color: var(--white);
     font-weight: 500;
     font-size: 1rem;
 }
 
-h4{
+h4 {
-    color:var(--white);
+    color: var(--white);
-    font-weight:500;
+    font-weight: 500;
     font-size: 1.25rem;
     letter-spacing: 0.02rem;
 }
 
-h5{
+h5 {
-    color:var(--white);
+    color: var(--white);
     font-weight: 300;
     font-size: 1rem;
     letter-spacing: 0.02rem;
 }
 
 h6 {
-    color:var(--grey-five);
+    color: var(--grey-five);
     font-weight: 300;
     font-size: 1rem;
     letter-spacing: 0.02rem;
-
 }
 
 ::-webkit-scrollbar {
@@ -106,4 +106,4 @@ h6 {
 
 ::-webkit-scrollbar-thumb:hover {
     background-color: var(--grey-three);
-}
+}

src/lib/components/atoms/Button.svelte

@@ -2,14 +2,14 @@
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
 	export let href = '#';
-	export let width = 'max-content';
+	export let width = 'false';
-	export let icon = "";
+	export let icon = '';
 </script>
 
-<a href={href}>
+<a {href}>
 	<div 
 		class={type} 
-		style="width: {width};" 
+		style="width: {width ? '100%' : 'max-width'}" 
 	>
 		<img src="icons/{icon}.svg" alt="{icon}"/>
 		<slot/>
@@ -21,6 +21,7 @@
 		text-decoration: none;
 		border-radius: 16px;
 	}
+
 	div, .button-secondary {
 		font-size: 1.1rem;
 		height: 60px;
@@ -37,8 +38,8 @@
 	}
 
 	.button-primary {
-		background-color: var(--red);
+		background-color: var(--accent-color);
-		box-shadow: 0px 0px 32px 1px var(--red-glow);
+		box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
 		color: var(--grey-four)
 	}
 

src/lib/components/atoms/ContributorPerson.svelte

@@ -44,7 +44,7 @@
 	}
 
 	a:hover > h2 {
-		color: var(--red);
+		color: var(--accent-color);
 	}
 
 	h2 {

src/lib/components/atoms/HeroTitle.svelte

@@ -1,12 +1,13 @@
 <h1>
-	<span class="redder">Re</span>Vanced
+	<span>Re</span>Vanced
 </h1>
 
 <style>
-	.redder {
-		color: var(--red);
-	}
 
+	span {
+		color: var(--accent-color);
+	}
+	
 	h1 {
 		color: var(--white);
 		font-weight: 700;

src/lib/components/atoms/NavButton.svelte

@@ -42,6 +42,6 @@
 
 	li.selected	 {
 		background-color: var(--grey-three);
-		color: var(--red)
+		color: var(--accent-color)
 	}
 </style>

src/lib/components/atoms/Patch.svelte

@@ -19,19 +19,19 @@
 
 <div 
     class="patch-container {hasPatchOptions ? 'expanded' : ''}"
-    on:click={hasPatchOptions ? handleClick : ''}>
+    on:click={hasPatchOptions ? handleClick : ''}
+>
     <div class="things">  
         <div class="title">
             <h1>{name}</h1>
             <h3>{ver}</h3>
         </div>
-        
+
         {#if hasPatchOptions}
             <img id="arrow" src="/icons/arrow.svg" alt="dropdown">
         {/if}
     </div>
     <!-- <h3>{pkgName}</h3> -->
-
     <h4>{desc}</h4>
 </div>
 

src/lib/components/atoms/SocialButton.svelte

@@ -3,16 +3,14 @@
 	export let href = '#';
 </script>
 
-<div>
+<a {href}>
-	<button>
+	<div>
-		<a {href}>
+		<img src='socials/{src}.svg' alt={src} />
-			<img src='socials/{src}.svg' alt={src} />
+	</div>
-		</a>
+</a>
-	</button>
-</div>
 
 <style>
-	button {
+	div {
 		border: 0;
 		width: 60px;
 		height: 60px;
@@ -26,7 +24,8 @@
 	}
 
 	div {
-		display: inline-block;
+		display: flex;
+		justify-content: center;
 	}
 
 	img {
@@ -34,11 +33,11 @@
 		width: 30px;
 	}
 
-	div:hover > button {
+	div:hover {
 		transform: translateY(-5%);
 	}
 
-	button:hover img {
+	div:hover img {
 		filter: brightness(1.2);
 	}
 </style>

src/lib/components/atoms/Wave.svelte

@@ -20,7 +20,7 @@
     animation: wave-anim 40s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;  
-    fill: var(--red);
+    fill: var(--accent-color);
   }
 
   @keyframes wave-anim {

src/lib/components/molecules/ContributorHost.svelte

@@ -43,10 +43,10 @@
 {/if}
 
 <style>
-
     h2 {
         margin-bottom: 1rem;
     }
+
     a {
         transition: all 0.3s var(--bezier-one);
         display:block;
@@ -65,7 +65,7 @@
     a:hover > h2 {
         width: max-content;
         background-color: var(--grey-three);
-        color: var(--red);
+        color: var(--accent-color);
     }
 
     .contrib-host {
@@ -77,5 +77,4 @@
         padding: 1.5rem;
         border-radius: 16px;
     }
-
 </style>

src/lib/components/molecules/Navigation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Navigation from '../atoms/Navigation.svelte';
+	import Navigation from '../atoms/NavButton.svelte';
 	import { fly } from 'svelte/transition';
 	import {quintOut} from 'svelte/easing';
 	import { onMount } from 'svelte';
@@ -24,12 +24,8 @@
 	<a href="/">
 		<div class="logo">
 			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-
 			{#if $page.url.pathname !== '/'}
-				<h1 
+				<h1 ><span>Re</span>Vanced</h1>
-				>
-					<span>Re</span>Vanced
-				</h1>
 			{/if}
 		</div>
 	</a>
@@ -47,7 +43,6 @@
 
 <style>
 
-
 	nav {
 		padding: 0% 1rem 0% 2rem;
 		top: 0;
@@ -73,6 +68,7 @@
 	a {
 		text-decoration: none;
 	}
+
 	.logo-image {
 		height: 1.75rem;
 		width: auto;
@@ -93,7 +89,7 @@
 	}
 
 	h1 span {
-		color: var(--red);
+		color: var(--accent-color);
 	}
 
 	@media screen and (max-width: 400px) {

src/lib/components/organisms/Home.svelte

@@ -13,7 +13,7 @@
 
 		<div class="hero-buttons">
 			<Button icon="download" kind="primary" href="download" width="100%">Download</Button>
-			<Button icon="docs" href="docs" width="100%" >Read The Docs</Button>
+			<Button icon="docs" href="docs" width='true' >Read The Docs</Button>
 		</div>
 	</div>
 </section>

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import NavHost from "$lib/components/molecules/NavHost.svelte";
+	import NavHost from "$lib/components/molecules/Navigation.svelte";
 	import '../app.css';
 </script>
 

src/routes/credits/+page.svelte

@@ -8,7 +8,6 @@
     onMount (() => {
         ContributorsStore.subscribe(async (e) => {
             data = await e;
-            console.log(data);
         });
     });
 </script>

src/routes/docs/+page.svelte

@@ -46,13 +46,13 @@
     a {
         text-decoration: none;
         color: var(--white);
-        border-bottom: 1.5px solid var(--red);
+        border-bottom: 1.5px solid var(--accent-color);
         padding: 0px 5px;
         transition: all 0.4s var(--bezier-one);
     }
 
     a:hover {
-        background-color: var(--red);
+        background-color: var(--accent-color);
         border-radius: 6px;
         color: var(--grey-four)
     }
@@ -64,7 +64,6 @@
 
     .menu {
         padding: 90px 15px 0px 15px;
-        background-color: var(--grey-six);
         display: flex;
         flex-direction: column;
         gap: 1rem;
@@ -72,7 +71,6 @@
 
     .content {
         padding: 100px 30px 0px 30px;
-        background-color: var(--grey-one);
     }
 
     .doc-section {

src/routes/patches/+page.svelte

@@ -6,9 +6,9 @@
     import { quintOut } from 'svelte/easing';
 
     let patches: any;
-    let pkg_list = [];
+    let pkg_list: Object[] = [];
 
-    let current = '';
+    let current: boolean | Object = false;
 
     onMount (async () => {
         PatchesStore.subscribe(async (e) => {
@@ -24,7 +24,9 @@
                     };
                 });
             };
-        });
+        })
+
+
 
     });
 
@@ -32,19 +34,17 @@
 </script>
 
 <section>
-    <div 
+    <div class="menu">
-        class="menu" 
-    >
         {#if pkg_list}
-        <div in:fly="{{ y: 10, easing: quintOut, duration: 750}}">
+        <div in:fly="{{ y: 10, easing: quintOut, duration: 750 }}">
             <h5>PACKAGES</h5>
             <hr/>
             <div class="package-list">
                 {#each pkg_list as pkg}
                     <div 
                         class="package"
-                        class:selected={current === pkg}
+                        class:selected={ current === pkg }
-                        on:click={() => current = pkg}
+                        on:click={ () => current = (current === pkg) ? false : pkg }
                     > 
                         <h3>{pkg}</h3>
                     </div>
@@ -52,7 +52,6 @@
             </div>
         </div>
         {/if}
-        
     </div>
     {#if patches}
         <div class="patches-list patches-container">
@@ -85,7 +84,7 @@
         width: min(95%, 100rem);
         display:grid;
         grid-template-columns: 300px 3fr;
-        gap: 1rem;
+        gap: 2.5rem;
     }
 
     h5 {
@@ -116,6 +115,14 @@
         gap: 1rem;
     }
 
+    hr {
+        display: block; 
+        height: 1px;
+        border: 0; 
+        border-top: 1px solid var(--grey-three);
+        margin-top: 1rem;
+    }
+
     .package-list {
         margin-top: 1rem;
         display: flex;
@@ -129,6 +136,7 @@
         border-radius: 8px;
         cursor: pointer;
         display: flex;
+        align-items: center;
         gap: 0.6rem;
         width: 100%;
         user-select: none;
@@ -137,40 +145,35 @@
 
     .package::before {
         content: '';
+        height: 5px;
         inline-size: 4px;
         border-radius: 200px;
-        background-color: var(--red);
+        background-color: var(--accent-color);
+        transition: all 0.2s var(--bezier-one);
         opacity: 0;
     }
 
     .selected::before{
-        transition: all 0.4s var(--bezier-one);
+        height: 20px;
+        transition: all 0.3s var(--bezier-one);
         opacity: 1;
     }
-
-    hr {
-        display: block; 
-        height: 1px;
-        border: 0; 
-        border-top: 1px solid var(--grey-three);
-        margin-top: 1rem;
-    }
     
     .package > h3 {
         color: var(--grey-five);
-        transition: all 0.4s var(--bezier-one);
+        transition: all 0.3s var(--bezier-one);
     }
 
     .selected > h3 {
-        color: var(--red);
+        color: var(--accent-color);
-        transition: all 0.4s var(--bezier-one);
+        transition: all 0.3s var(--bezier-one);
     }
 
-    .package:hover {
+    .package:hover, .selected {
         background-color: var(--grey-six);
     }
     
-    .package:hover > h3 {
+    .package:not(.selected):hover > h3 {
         color: var(--white);
     }
 </style>