refactor: minor cleanup

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 icon = "";
+	export let width = 'false';
+	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);
-		box-shadow: 0px 0px 32px 1px var(--red-glow);
+		background-color: var(--accent-color);
+		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>
-	<button>
-		<a {href}>
-			<img src='socials/{src}.svg' alt={src} />
-		</a>
-	</button>
-</div>
+<a {href}>
+	<div>
+		<img src='socials/{src}.svg' alt={src} />
+	</div>
+</a>
 
 <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 
-				>
-					<span>Re</span>Vanced
-				</h1>
+				<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>