From c90201f5f036cae1017ab2760aac174238a981e7 Mon Sep 17 00:00:00 2001
From: Kendell R <KTibow@users.noreply.github.com>
Date: Thu, 11 Jan 2024 06:56:16 -0800
Subject: [PATCH] fix: fix transition logic for svelte 4 (#220)

update transition logic for svelte 4
---
 src/layout/Footer/FooterSection.svelte            | 2 +-
 src/lib/components/Search.svelte                  | 2 +-
 src/lib/components/Snackbar.svelte                | 6 ++----
 src/lib/components/Spinner.svelte                 | 6 +-----
 src/routes/contributors/ContributorSection.svelte | 2 +-
 src/routes/donate/+page.svelte                    | 2 +-
 src/routes/donate/TeamMember.svelte               | 4 ++--
 src/routes/patches/PatchItem.svelte               | 6 +++---
 8 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/layout/Footer/FooterSection.svelte b/src/layout/Footer/FooterSection.svelte
index 8c66643..0cc42a7 100644
--- a/src/layout/Footer/FooterSection.svelte
+++ b/src/layout/Footer/FooterSection.svelte
@@ -25,7 +25,7 @@
 		/>
 	</button>
 	{#if expanded}
-		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
 			<slot />
 		</ul>
 	{/if}
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index 25c1ae5..765dc92 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -27,7 +27,7 @@
 			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
-			transition:fade|local={{ easing: quintOut, duration: 250 }}
+			transition:fade={{ easing: quintOut, duration: 250 }}
 		/>
 	{/if}
 	<input
diff --git a/src/lib/components/Snackbar.svelte b/src/lib/components/Snackbar.svelte
index e64c3ae..233dc6a 100644
--- a/src/lib/components/Snackbar.svelte
+++ b/src/lib/components/Snackbar.svelte
@@ -3,7 +3,6 @@
 	import { expoOut } from 'svelte/easing';
 
 	export let open = false;
-	export let closeIcon = false;
 	export let dismissTime = 3000;
 
 	let timeout: ReturnType<typeof setTimeout>;
@@ -16,9 +15,8 @@
 {#if open}
 	<div
 		class="snackbar"
-		class:closeIcon
-		in:slide|local={{ duration: 400, easing: expoOut }}
-		out:fade|local={{ duration: 300, easing: expoOut }}
+		in:slide={{ duration: 400, easing: expoOut }}
+		out:fade={{ duration: 300, easing: expoOut }}
 	>
 		<div class="text">
 			<slot name="text" />
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
index 0807dc8..ea9fe4e 100644
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -1,8 +1,4 @@
-<script>
-	import { fade } from 'svelte/transition';
-</script>
-
-<div class="spinner" transition:fade={{ duration: 250 }} />
+<div class="spinner" />
 
 <style>
 	@keyframes spinner {
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
index 7768fbb..2b17696 100644
--- a/src/routes/contributors/ContributorSection.svelte
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -33,7 +33,7 @@
 	</div>
 
 	{#if expanded}
-		<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
 			{#each contributors as { login, avatar_url, html_url }}
 				{#if !usersIwantToExplodeSoBadly.includes(login)}
 					<ContributorButton name={login} pfp={avatar_url} url={html_url} />
diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index f68a873..347f6b5 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -195,7 +195,7 @@
 	</svelte:fragment>
 </Dialogue>
 
-<Snackbar bind:open={addressSnackbar} closeIcon>
+<Snackbar bind:open={addressSnackbar}>
 	<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
 </Snackbar>
 
diff --git a/src/routes/donate/TeamMember.svelte b/src/routes/donate/TeamMember.svelte
index be26186..139bf35 100644
--- a/src/routes/donate/TeamMember.svelte
+++ b/src/routes/donate/TeamMember.svelte
@@ -13,9 +13,9 @@
 	href={member.html_url}
 	rel="noreferrer"
 	target="_blank"
-	in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }}
+	in:fly|global={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }}
 >
-	<img src={member.avatar_url} alt={`${member.login}'s profile picture.'`} />
+	<img src={member.avatar_url} alt="{member.login}'s profile picture." />
 
 	<div class="member-text">
 		<h4>{member.login}</h4>
diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
index 972bf9c..0b8bede 100644
--- a/src/routes/patches/PatchItem.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -90,8 +90,8 @@
 	</ul>
 
 	{#if expanded && hasPatchOptions}
-		<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
-			<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<span transition:fade={{ easing: quintOut, duration: 1000 }}>
+			<div class="options" transition:slide={{ easing: quintOut, duration: 500 }}>
 				{#each patch.options as option}
 					<div class="option">
 						<h5 id="option-title">{option.title}</h5>
@@ -125,7 +125,7 @@
 		display: flex;
 		align-items: center;
 	}
-	
+
 	.patch-info {
 		display: flex;
 		justify-content: center;