feat: credits page

src/app.css

@@ -19,7 +19,7 @@ html{
 body{
     margin: 0;
     padding: 0;
-    line-height: 1.3;
+    line-height: 1.4;
     background-color: var(--bg-color);
 }
 
@@ -36,7 +36,7 @@ html, body{
 :root {
     --white: #fff;
     --red: #8bc3f4;	
-    --bg-color: #181C1E;	
+    --bg-color: #1A1C1E;	
     --grey-one: #252B31;
     --grey-two: #28313b;
     --grey-three: #3c4759c3;
@@ -48,8 +48,7 @@ html, body{
 }
 
 ::selection{
-    color: var(--white);
-    background: var(--red);
+    background: var(--grey-three);
 }
 
 /*-----headings-----*/
@@ -58,6 +57,7 @@ h1{
     color: var(--white);
     font-weight: 700;
 	line-height: 0.75em;
+    font-size: 1.75rem;
 }
 
 h2{
@@ -68,35 +68,42 @@ h2{
 
 h3{
     color: var(--white);
-    font-weight: 600;
+    font-weight: 500;
     font-size: 1rem;
 }
 
 h4{
-    color:var(--grey-six);
+    color:var(--white);
     font-weight:500;
-    font-size: 1rem;
+    font-size: 1.25rem;
+    letter-spacing: 0.02rem;
 }
 
 h5{
     color:var(--white);
     font-weight: 300;
     font-size: 1rem;
+    letter-spacing: 0.02rem;
 }
 
-/*-----scrollbar-----*/
-::-webkit-scrollbar{
-    width: 20px;
+h6{
+    color:var(--grey-five);
+    font-weight: 300;
+    font-size: 1rem;
+    letter-spacing: 0.02rem;
+
+}
+
+::-webkit-scrollbar {
+    width: 11px;
     background-color: transparent;
 }
 
-::-webkit-scrollbar-thumb{
-    background-color: var(--grey-three);
-    border-radius: 20px;
-    border: 6px solid transparent;
+::-webkit-scrollbar-thumb {
+    background-color: var(--grey-two);
     background-clip: content-box;
 }
 
-::-webkit-scrollbar-thumb:hover{
-    background-color: var(--grey-seven);
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--grey-three);
 }

src/lib/components/atoms/ContributorButton.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let username: String;
-	let href = `https://github.com/${username}`
-	let src = `https://github.com/${username}.png`
+	export let username: string;
+	export let pfp: string;
+	export let url: string;
 	let alt = `${username}'s contributor profile picture`
 </script>
 
-<a {href}>
+<a href={url} target="_blank">
 	<button>
-		<img {src} {alt}><slot/>
+		<img src={pfp} alt={alt}><slot/>
 	</button>
 	<h2>{username}</h2>
 </a>
@@ -17,6 +17,9 @@
 		color: var(--white);
 		text-decoration: none;
 		text-align: center;
+		padding: 0.5rem;
+		border-radius: 12px;
+		transition: all 0.3s var(--bezier-one);
 	} 
 
 	button {
@@ -24,9 +27,8 @@
 		border-radius: 200px;
 		overflow: hidden;
         border: 0;
-		/* padding: 5px 5px; */
-        width:86px;
-        height:86px;
+        width:45px;
+        height:45px;
         max-height: 86px;
         max-width: 86px;
 		cursor: pointer;
@@ -36,8 +38,12 @@
 		user-select: none;
 	}
 
-	a:hover > button {
-		transform: translateY(-5%);
+	a:hover  {
+		background-color: var(--grey-one);
+	}
+
+	h2 {
+		font-size: 1rem;
 	}
 
 	img {

src/lib/components/molecules/ContributorHost.svelte

@@ -1,29 +1,57 @@
 <script lang="ts">
+    import ContributorsStore from "../../stores/ContributorsStore.js";
     import ContributorButton from "../atoms/ContributorButton.svelte";
-    export let peoples: Array<String>;
+    import { onMount } from "svelte";
+    import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+   
+    let contribs;
+    export let repo: string;
 
-    import { onMount } from 'svelte';
-    
-	onMount(async () => {
-		const response = await fetch('https://releases.rvcd.win/contributors');
-		const json = await response.json();
-        console.log(json);
-	});
+    onMount (() => {
+        ContributorsStore.subscribe(async (data) => {
+            contribs = await data;
+            contribs = contribs[repo]
+        });
+    });
 
+    let usersIwantToExplodeSoBadly = [
+        'semantic-release-bot',
+    ]
 </script>
 
-<div class="social-host">
-    {#each peoples as person}
-        <ContributorButton username={person}></ContributorButton>
-    {/each}
-</div>
+{#if contribs}
+    <div class="container" in:fly="{{ y: 10, easing: quintOut, duration: 700 }}">
+        <h2>
+            ReVanced {repo === 'cli' ? 'CLI' : repo.charAt(0).toUpperCase() + repo.slice(1)}
+        </h2>
+
+        <div class="contrib-host">    
+            {#each contribs as contrib}
+                {#if !usersIwantToExplodeSoBadly.includes(contrib.login)}
+                    <ContributorButton username={contrib.login} pfp={contrib.avatar_url} url={contrib.html_url} />
+                {/if}
+            {/each}
+        </div>
+    </div>
+{/if}
 
 <style>
-    .social-host {
-        gap: 2rem;
-        width: 100;
+    h2 {
+        margin-bottom: 1rem;
+    }
+    .contrib-host {
+        gap: 1.5rem;
         display: grid;
 		align-items: center;
-        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        background-color: var(--grey-six);
+        padding: 1.5rem;
+        border-radius: 28px;
+    }
+
+    /* temporary, put into main wrapper when homepage is more fleshed out */
+    .container {
+        margin-bottom: 3rem;
     }
 </style>

src/lib/stores/ContributorsStore.js

@@ -0,0 +1,26 @@
+import { readable } from "svelte/store";
+
+const fetchContributors = async () => {
+    let cli,
+        patcher,
+        patches,
+        integrations,
+        manager;
+        
+    const response = await fetch('https://releases.rvcd.win/contributors');
+    const json = await response.json();
+
+    ({ 0: cli, 1: patcher, 2: patches, 3: integrations, 4: manager } = json.repositories);
+
+    cli = cli.contributors
+    patcher = patcher.contributors
+    patches = patches.contributors
+    integrations = integrations.contributors
+    manager = manager.contributors
+
+    return {cli, patcher, patches, integrations, manager};
+     
+};
+
+const ContributorsStore = readable(fetchContributors());
+export default ContributorsStore;

src/routes/+layout.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import NavHost from "$lib/components/molecules/NavHost.svelte";
-	import Wave from '$lib/components/atoms/Wave.svelte';
-
 	import '../app.css';
 </script>
 
@@ -20,4 +18,3 @@
 
 <NavHost/>
 <slot />
-<Wave />

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
 	import Home from '$lib/components/organisms/Home.svelte';
 	import SocialHost from '$lib/components/molecules/SocialHost.svelte';
+	import Wave from '$lib/components/atoms/Wave.svelte';
 </script>
 
 <div class="wrapper">
@@ -11,6 +12,7 @@
 	</div>
 </div>
 <SocialHost />
+<Wave />
 
 <style>
 	.wrappezoid {

src/routes/credits/+page.svelte

@@ -1,13 +1,20 @@
-<script>
+<script lang="ts">
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-    let peoples = [
-        "Ushie",
-        "afnzmn",
-        "baiorett",
-        "PickleNik",
-    ]
+
 </script>
 
-<div class="wrapper">
-    <ContributorHost {peoples}></ContributorHost>
-</div>
+<div class="wrapper contrib-grid">
+    <ContributorHost repo="cli"/>
+    <ContributorHost repo="patcher"/>
+    <ContributorHost repo="patches"/>
+    <ContributorHost repo="integrations"/>
+    <ContributorHost repo="manager"/>
+</div>
+
+<style>
+    .contrib-grid {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+    }
+</style>