From 3cfad67686471d099b153ee5dc391c89d6fe20bb Mon Sep 17 00:00:00 2001
From: VDawg <vdawg@tuta.io>
Date: Fri, 2 May 2025 18:35:51 +0300
Subject: [PATCH] Add kofi button, make donate in navbar more prominent (#92)

* navbar: more prominent donate button

* button: cleanup imports

* donate: add kofi button

* kofi modal: lock scroll when open
---
 src/lib/components/Button.svelte |   1 -
 src/routes/Navbar.svelte         |  29 +++++---
 src/routes/styles.css            |   6 ++
 src/routes/support/+page.svelte  | 124 +++++++++++++++++++++++++------
 4 files changed, 127 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index 3cdd622..ce2e0d0 100755
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { cn } from '$lib/Helper'
-	import Card from './Card.svelte'
 
 	export let size: 'md' | 'lg' | 'xl' = 'md'
 	export let type: 'primary' | 'outline' | 'fancyOutline' = 'primary'
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index df8d6fa..4d38dae 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -64,9 +64,6 @@
 			<li aria-current={$page.url.pathname === '/plugins' ? 'page' : undefined}>
 				<a href="/plugins">Plugins</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/support' ? 'page' : undefined}>
-				<a href="/support">Donate</a>
-			</li>
 		</ul>
 		<ul class="flex flex-row items-center gap-3 px-4">
 			<li>
@@ -95,12 +92,24 @@
 				</a>
 			</li>
 		</ul>
-		<a
-			class="rounded-full bg-primary px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
-			href="https://wiki.hyprland.org/Getting-Started/Installation/"
-			target="_blank"
-			aria-label="Install Hyprland">Install</a
-		>
+
+		<ul class="flex gap-4">
+			<li aria-current={$page.url.pathname === '/support' ? 'page' : undefined}>
+				<a
+					class="rounded-full px-4 py-2 outline outline-cyan-500 hover:outline-cyan-200"
+					href="/support">Donate</a
+				>
+			</li>
+
+			<li>
+				<a
+					class="rounded-full bg-cyan-300 px-4 py-2 uppercase tracking-wide text-black hover:bg-cyan-200"
+					href="https://wiki.hyprland.org/Getting-Started/Installation/"
+					target="_blank"
+					aria-label="Install Hyprland">Install</a
+				>
+			</li>
+		</ul>
 	</nav>
 </header>
 
@@ -124,7 +133,7 @@
 
 		/* Desktop classes */
 		@media screen(lg) {
-			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pr-3 pl-5 outline outline-primary/10;
+			@apply relative flex h-min w-max flex-row rounded-full bg-black/40 p-2 pl-5 pr-3 outline outline-primary/10;
 		}
 	}
 
diff --git a/src/routes/styles.css b/src/routes/styles.css
index 4daa6dc..861abdb 100755
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -14,6 +14,12 @@ body {
 	min-height: 100vh;
 }
 
+html.lock-scroll,
+.lock-scroll body {
+	overflow: hidden;
+	height: 100%;
+}
+
 .hyprgradient {
 	background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #0081c6);
 }
diff --git a/src/routes/support/+page.svelte b/src/routes/support/+page.svelte
index cfd6ebf..beed8cf 100644
--- a/src/routes/support/+page.svelte
+++ b/src/routes/support/+page.svelte
@@ -1,14 +1,18 @@
-<script>
+<script lang="ts">
 	import Title from '$lib/components/Title/TitleWrapper.svelte'
-	import clsx from 'clsx'
-	import * as R from 'remeda'
-	import { getGeneratedPath } from '$lib/Helper.ts'
-	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
 	import TitlePre from '$lib/components/Title/TitlePre.svelte'
 	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 	import Button from '$lib/components/Button.svelte'
-	import Card from '$lib/components/Card.svelte'
-	import CardsContainer from '$lib/components/CardsContainer.svelte'
+	import CloseIcon from '~icons/mingcute/close-line'
+
+	let kofiModal: HTMLDialogElement | undefined
+
+	function lockScroll() {
+		document.querySelector('html')?.classList.add('lock-scroll')
+	}
+	function unlockScroll() {
+		document.querySelector('html')?.classList.remove('lock-scroll')
+	}
 </script>
 
 <svelte:head>
@@ -30,14 +34,13 @@
 		class="prose prose-slate prose-invert m-0 mx-auto flex flex-col px-6 transition-none delay-500 animate-in fade-in-0 slide-in-from-bottom-6 fill-mode-backwards [animation-delay:800ms] [animation-duration:1500ms] lg:prose-xl prose-a:text-cyan-400 prose-img:rounded-lg"
 	>
 		<p>
-			Hyprland development is done by volunteers, and led by one person in their free time. 
-			If you want to show a token of appreciation, or help the development continue, consider dontating to the project!
+			Hyprland development is done by volunteers, and led by one person in their free time. If you
+			want to show a token of appreciation, or help the development continue, consider dontating to
+			the project!
 		</p>
 
 		<h2>Donate</h2>
-		<p class="!mb-0 !pb-0">
-			You can donate once, or monthly, via the following channels:
-		</p>
+		<p class="!mb-0 !pb-0">You can donate once, or monthly, via the following channels:</p>
 
 		<ul class="">
 			<li>
@@ -49,10 +52,6 @@
 			</li>
 		</ul>
 
-		<p class="rounded-xl border border-cyan-500/50 p-4 shadow-lg shadow-cyan-600/50">
-			Hyprland is, and will always stay Free and Open Source software. Donating is purely voluntary. We will never lock out features behind a paywall.
-		</p>
-
 		<h2>Do I get anything?</h2>
 
 		<p>
@@ -63,7 +62,50 @@
 			Outside of that, you get the satisfaction that you rock and support the software you use and love!
 		</p>
 
+		<div
+			class="flex flex-col items-center justify-center rounded-xl border border-cyan-400/20 bg-black/10 md:p-12"
+		>
+			<Button
+				type="fancyOutline"
+				size="xl"
+				on:click={() => {
+					lockScroll()
+					kofiModal?.showModal()
+				}}>Support us!</Button
+			>
+
+			<p>
+				Hyprland is, and will always stay Free and Open Source software. Donating is purely
+				voluntary.<br />We will never lock out features behind a paywall.
+			</p>
+		</div>
+
 		<h3>Thank you, you rock! :)</h3>
+
+		<dialog
+			bind:this={kofiModal}
+			class="overflow-visible bg-transparent backdrop:bg-black/40 md:p-8"
+		>
+			<div class="relative h-[712px] min-h-[712px] shadow-2xl">
+				<form class="absolute -right-2 -top-4 z-10">
+					<button
+						on:click={() => {
+							unlockScroll()
+						}}
+						formmethod="dialog"
+						class="rounded-full bg-white p-1 shadow-md"><CloseIcon class="size-5" /></button
+					>
+				</form>
+				<div class="modal-content overflow-hidden rounded-2xl">
+					<iframe
+						id="kofiframe"
+						src="https://ko-fi.com/vaxry/?hidefeed=true&widget=true&embed=true&preview=true"
+						title="vaxry"
+						height="712"
+					></iframe>
+				</div>
+			</div>
+		</dialog>
 	</div>
 </section>
 
@@ -103,15 +145,53 @@
 		left: 0;
 		pointer-events: none;
 		contain: strict;
-
-		animation: parallax ease-in-out 500ms;
-		animation-duration: 1ms;
-		animation-timeline: scroll();
 	}
 
-	@keyframes parallax {
+	dialog {
+		transition:
+			display 0.2s allow-discrete,
+			overlay 0.2s allow-discrete;
+
+		animation: close 0.2s forwards;
+		&[open] {
+			animation: open 0.5s forwards;
+
+			& .modal-content {
+				height: 712px;
+				transition:
+					scale 0.2s cubic-bezier(0.2, 0.2, 0.165, 1.5),
+					height 0.15s cubic-bezier(0.875, 0.2, 0.165, 1);
+				scale: 1;
+
+				@starting-style {
+					height: 0px;
+					scale: 0.9;
+				}
+			}
+		}
+	}
+
+	.modal-content {
+		height: 0px;
+		scale: 0.4;
+		transition: all 2.5s ease-in-out;
+	}
+
+	@keyframes open {
+		from {
+			opacity: 0;
+		}
 		to {
-			translate: 0px 1000px;
+			opacity: 1;
+		}
+	}
+
+	@keyframes close {
+		from {
+			opacity: 1;
+		}
+		to {
+			opacity: 0;
 		}
 	}
 </style>