From a437994235839d69eb62929c7a3c1605610560ea Mon Sep 17 00:00:00 2001
From: Kaan <bugrakaan@gmail.com>
Date: Fri, 22 Mar 2024 21:06:23 +0300
Subject: [PATCH] ui: fix scrollbar colors, handle NaN and zero state on
 homepage

and some cleanup on svg icons
---
 src/app.pcss                          | 16 +++++++
 src/components/HomepageCounter.svelte | 21 +++++++++
 src/routes/+page.svelte               | 67 +++------------------------
 3 files changed, 44 insertions(+), 60 deletions(-)
 create mode 100644 src/components/HomepageCounter.svelte

diff --git a/src/app.pcss b/src/app.pcss
index 64b0630..46ea02e 100644
--- a/src/app.pcss
+++ b/src/app.pcss
@@ -41,6 +41,22 @@ h3 {
 	@apply outline-none ring-2 ring-sky-400;
 }
 
+::-webkit-scrollbar {
+	@apply w-[8px];
+}
+
+::-webkit-scrollbar-track {
+	@apply bg-[var(--page-bg)]
+}
+
+::-webkit-scrollbar-thumb {
+	@apply rounded-xl bg-[#3c4f7c]
+}
+
+::-webkit-scrollbar-thumb:hover {
+	@apply bg-[#526ca8]
+}
+
 .cta-button {
 	background: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)),
 		radial-gradient(109.26% 109.26% at 49.83% 13.37%, #ffffff 0%, #babaca 100%);
diff --git a/src/components/HomepageCounter.svelte b/src/components/HomepageCounter.svelte
new file mode 100644
index 0000000..68ded98
--- /dev/null
+++ b/src/components/HomepageCounter.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	export let count: number = 0;
+	export let subText: string = '';
+</script>
+
+{#if count > 0}
+	<div class="flex flex-col gap-0">
+	<h2 class="flex items-center gap-1 text-[40px] leading-[1.1]">
+		<!-- <AnimatedCounter
+			values={Array.from({ length: contributors + 1 }, (_, i) => i.toString())}
+			startImmediately={false}
+			direction="up"
+			loop={false}
+			ease="cubic-bezier(0.25, 0.1, 0.25, 1)"
+			initialValue={(contributors - 1).toString()}
+			/>+ -->
+			{count}+
+		</h2>
+		<div class="text-[#A6A5A7]">{subText}</div>
+	</div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 4af965f..1ff929f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,6 +2,7 @@
 	import embedImage from "$assets/branding/suyu__Embed-Image.png";
 	import type { PageData } from "./$types";
 	import suyuWindow from "$assets/mockups/suyuwindow.png";
+	import HomepageCounter from "$components/HomepageCounter.svelte";
 	import { XCircleOutline } from "flowbite-svelte-icons";
 	import { Dialog } from "radix-svelte";
 
@@ -76,12 +77,10 @@
 			class="cta-button"
 		>
 				Download <svg
-				class=""
-				style="--icon-color:#000"
 				width="16"
 				height="16"
 				viewBox="0 0 16 16"
-				fill="#000"
+				fill="currentColor"
 				role="img"
 				focusable="false"
 				aria-hidden="true"
@@ -97,12 +96,10 @@
 			class="button text-[#8A8F98]"
 		>
 			Contribute <svg
-				class=""
-				style="--icon-color:#8A8F98"
 				width="16"
 				height="16"
 				viewBox="0 0 16 16"
-				fill="#8A8F98"
+				fill="currentColor"
 				role="img"
 				focusable="false"
 				aria-hidden="true"
@@ -119,60 +116,10 @@
 		class="flex w-full flex-shrink-0 flex-col gap-8 rounded-b-[2.25rem] bg-[#110d10] p-12 lg:w-[35%]"
 	>
 		<h1 class="text-[48px] leading-[0.9]">By the numbers</h1>
-		<div class="flex flex-col gap-0">
-			<h2 class="flex items-center gap-1 text-[40px] leading-[1.1]">
-				<!-- <AnimatedCounter
-					values={Array.from({ length: contributors + 1 }, (_, i) => i.toString())}
-					startImmediately={false}
-					direction="up"
-					loop={false}
-					ease="cubic-bezier(0.25, 0.1, 0.25, 1)"
-					initialValue={(contributors - 1).toString()}
-				/>+ -->
-				{contributors}+
-			</h2>
-			<div class="text-[#A6A5A7]">dedicated contributors</div>
-		</div>
-		<div class="flex flex-col gap-0">
-			<h2 class="flex items-center gap-1 text-[40px] leading-[1.1]">
-				{starCount}+
-			</h2>
-			<div class="text-[#A6A5A7]">GitLab stars</div>
-		</div>
-		<div class="flex flex-col gap-0">
-			<h2 class="flex items-center gap-1 text-[40px] leading-[1.1]">
-				<!-- <AnimatedCounter
-					values={// array from 0 - 4000 with steps of 100
-					Array.from({ length: 41 }, (_, i) => (i * 100).toString())}
-					startImmediately={false}
-					direction="up"
-					loop={false}
-					ease="cubic-bezier(0.25, 0.1, 0.25, 1)"
-					initialValue={"3900"}
-				/>+ -->
-				4000+
-			</h2>
-			<div class="text-[#A6A5A7]">supported games</div>
-		</div>
-		<div class="flex flex-col gap-0">
-			<h2 class="flex items-center gap-1 text-[40px] leading-[1.1]">
-				<!-- <AnimatedCounter
-					values={Array.from(
-						{
-							length: memberCount / 100 + 1,
-						},
-						(_, i) => (i * 100).toString(),
-					)}
-					startImmediately={false}
-					direction="up"
-					loop={false}
-					ease="cubic-bezier(0.25, 0.1, 0.25, 1)"
-					initialValue={(memberCount - 100).toString()}
-				/>+ -->
-				{memberCount}+
-			</h2>
-			<div class="text-[#A6A5A7]">members on Discord</div>
-		</div>
+		<HomepageCounter count={contributors} subText="dedicated contributors" />
+		<HomepageCounter count={starCount} subText="GitLab stars" />
+		<HomepageCounter count={4000} subText="supported games" />
+		<HomepageCounter count={memberCount} subText="members on Discord" />
 	</div>
 	<div class="flex w-full flex-1 rounded-[2.25rem] bg-[#110d10] lg:rounded-tl-none">
 		<div