From f51717349995d363147abd2af307644c89e0d63f Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Thu, 3 Oct 2024 14:51:48 -0700
Subject: [PATCH] Replace scss with postcss.

---
 src/lib/components/Checkbox.svelte            | 12 ++--
 src/lib/components/SkeletonPlaceholder.svelte |  4 +-
 .../dialog/ClearCollectionDialog.svelte       | 24 +++----
 .../dialog/RemoveCollectionDialog.svelte      | 44 +++++-------
 .../dialog/RemoveWishlistDialog.svelte        | 42 +++++------
 src/lib/components/pagination/index.svelte    | 68 +++++++++---------
 .../preferences/gameCollection.svelte         | 72 +++++++++----------
 .../preferences/gameWishlist.svelte           | 72 +++++++++----------
 src/lib/components/preferences/profile.svelte | 12 ++--
 src/lib/components/random/index.svelte        | 64 ++++++++---------
 .../search/advancedSearch/index.svelte        | 24 +++----
 src/lib/components/search/random/index.svelte | 64 ++++++++---------
 src/lib/components/toast/Toast.svelte         | 12 ++--
 src/routes/(app)/game/[id]/+page.svelte       | 20 +++---
 14 files changed, 263 insertions(+), 271 deletions(-)

diff --git a/src/lib/components/Checkbox.svelte b/src/lib/components/Checkbox.svelte
index c835c84..0d5b52d 100644
--- a/src/lib/components/Checkbox.svelte
+++ b/src/lib/components/Checkbox.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  export let labelText: string;
-  export let showLabel: boolean;
-  export let name: string;
-  export let value: boolean;
-  export let onChange: FormDataEvent<HTMLInputElement>;
+export let labelText: string
+export let showLabel: boolean
+export let name: string
+export let value: boolean
+export let onChange: FormDataEvent<HTMLInputElement>
 </script>
 
 <label for={name} class="checkbox">
@@ -30,7 +30,7 @@
   {/if}
 </label>
 
-<style lang="scss">
+<style lang="postcss">
   .checkbox {
     display: grid;
     grid-template-columns: min-content auto;
diff --git a/src/lib/components/SkeletonPlaceholder.svelte b/src/lib/components/SkeletonPlaceholder.svelte
index 1f957f0..67f239d 100644
--- a/src/lib/components/SkeletonPlaceholder.svelte
+++ b/src/lib/components/SkeletonPlaceholder.svelte
@@ -1,7 +1,7 @@
 <!-- Taken from carbon design system svelte -->
 <!-- https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte -->
 <script lang="ts">
-	export let style: string;
+export let style: string
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -15,7 +15,7 @@
 	on:mouseleave
 />
 
-<style lang="scss">
+<style lang="postcss">
 	@keyframes skeleton {
 		0% {
 			opacity: 0.3;
diff --git a/src/lib/components/dialog/ClearCollectionDialog.svelte b/src/lib/components/dialog/ClearCollectionDialog.svelte
index 580198a..653ed57 100644
--- a/src/lib/components/dialog/ClearCollectionDialog.svelte
+++ b/src/lib/components/dialog/ClearCollectionDialog.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import { boredState } from '$lib/stores/boredState';
-	import { collectionStore } from '$lib/stores/collectionStore';
-	import { browser } from '$app/environment';
+import { browser } from '$app/environment'
+import { boredState } from '$lib/stores/boredState'
+import { collectionStore } from '$lib/stores/collectionStore'
+import { fade } from 'svelte/transition'
 
-	function clearCollection() {
-		if (browser) {
-			localStorage.collection = JSON.stringify([]);
-			collectionStore.removeAll();
-		}
-		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+function clearCollection() {
+	if (browser) {
+		localStorage.collection = JSON.stringify([])
+		collectionStore.removeAll()
 	}
+	boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
+}
 
-	$: isOpen = $boredState?.dialog?.isOpen;
+$: isOpen = $boredState?.dialog?.isOpen
 </script>
 
 <!-- <Dialog
@@ -40,7 +40,7 @@
 	</div>
 <!-- </Dialog> -->
 
-<style lang="scss">
+<style lang="postcss">
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
index 0abcf36..f992b90 100644
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@@ -1,32 +1,24 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	// import { Button, buttonVariants } from '$components/ui/button';
-	import { Button, buttonVariants } from '$components/ui/button';
-	import {
-		Dialog,
-		DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger
-	} from '$components/ui/dialog';
-	import { boredState } from '$lib/stores/boredState';
-	import { collectionStore } from '$lib/stores/collectionStore';
-	import { removeFromCollection } from '$lib/utils/manipulateCollection';
-	import { browser } from '$app/environment';
+import { browser } from '$app/environment'
+// import { Button, buttonVariants } from '$components/ui/button';
+import { Button, buttonVariants } from '$components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '$components/ui/dialog'
+import { boredState } from '$lib/stores/boredState'
+import { collectionStore } from '$lib/stores/collectionStore'
+import { removeFromCollection } from '$lib/utils/manipulateCollection'
+import { fade } from 'svelte/transition'
 
-	function removeGame() {
-		if ($boredState?.dialog?.additionalData) {
-			removeFromCollection($boredState?.dialog?.additionalData);
-		}
-		if (browser) {
-			localStorage.collection = JSON.stringify($collectionStore);
-		}
-		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+function removeGame() {
+	if ($boredState?.dialog?.additionalData) {
+		removeFromCollection($boredState?.dialog?.additionalData)
 	}
+	if (browser) {
+		localStorage.collection = JSON.stringify($collectionStore)
+	}
+	boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
+}
 
-	$: isOpen = $boredState?.dialog?.isOpen;
+$: isOpen = $boredState?.dialog?.isOpen
 </script>
 
 <Dialog modal={true}>
@@ -82,7 +74,7 @@
 	</div>
 </Dialog> -->
 
-<style lang="scss">
+<style lang="postcss">
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
diff --git a/src/lib/components/dialog/RemoveWishlistDialog.svelte b/src/lib/components/dialog/RemoveWishlistDialog.svelte
index e6175a1..69a1880 100644
--- a/src/lib/components/dialog/RemoveWishlistDialog.svelte
+++ b/src/lib/components/dialog/RemoveWishlistDialog.svelte
@@ -1,27 +1,27 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	// import {
-	// 	Dialog,
-	// 	DialogDescription,
-	// 	DialogOverlay,
-	// 	DialogTitle
-	// } from '@rgossiaux/svelte-headlessui';
-	import { boredState } from '$lib/stores/boredState';
-	import { wishlistStore } from '$lib/stores/wishlistStore';
-	import { removeFromWishlist } from '$lib/utils/manipulateWishlist';
-	import { browser } from '$app/environment';
+import { browser } from '$app/environment'
+// import {
+// 	Dialog,
+// 	DialogDescription,
+// 	DialogOverlay,
+// 	DialogTitle
+// } from '@rgossiaux/svelte-headlessui';
+import { boredState } from '$lib/stores/boredState'
+import { wishlistStore } from '$lib/stores/wishlistStore'
+import { removeFromWishlist } from '$lib/utils/manipulateWishlist'
+import { fade } from 'svelte/transition'
 
-	function removeGame() {
-		if ($boredState?.dialog?.additionalData) {
-			removeFromWishlist($boredState?.dialog?.additionalData);
-		}
-		if (browser) {
-			localStorage.wishlist = JSON.stringify($wishlistStore);
-		}
-		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
+function removeGame() {
+	if ($boredState?.dialog?.additionalData) {
+		removeFromWishlist($boredState?.dialog?.additionalData)
 	}
+	if (browser) {
+		localStorage.wishlist = JSON.stringify($wishlistStore)
+	}
+	boredState.update((n) => ({ ...n, dialog: { isOpen: false } }))
+}
 
-	$: isOpen = $boredState?.dialog?.isOpen;
+$: isOpen = $boredState?.dialog?.isOpen
 </script>
 
 <!-- <Dialog
@@ -49,7 +49,7 @@
 	</div>
 <!-- </Dialog> -->
 
-<style lang="scss">
+<style lang="postcss">
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
index 467d220..ee0db9d 100644
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@@ -1,41 +1,41 @@
 <script lang="ts">
-	// Based on https://carbon-components-svelte.onrender.com/components/Pagination
-	import { afterUpdate, createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
-	// import {
-	// 	Listbox,
-	// 	ListboxButton,
-	// 	ListboxOption,
-	// 	ListboxOptions
-	// } from '@rgossiaux/svelte-headlessui';
-	// import {
-	// 	CheckIcon,
-	// 	ChevronLeftIcon,
-	// 	ChevronRightIcon
-	// } from '@rgossiaux/svelte-heroicons/outline';
+// Based on https://carbon-components-svelte.onrender.com/components/Pagination
+import { afterUpdate, createEventDispatcher } from 'svelte'
+import { fade } from 'svelte/transition'
+// import {
+// 	Listbox,
+// 	ListboxButton,
+// 	ListboxOption,
+// 	ListboxOptions
+// } from '@rgossiaux/svelte-headlessui';
+// import {
+// 	CheckIcon,
+// 	ChevronLeftIcon,
+// 	ChevronRightIcon
+// } from '@rgossiaux/svelte-heroicons/outline';
 
-	const dispatch = createEventDispatcher();
+const dispatch = createEventDispatcher()
 
-	export let pageSize: number; // Reactive, bind
-	export let page: number = 1; // Reactive, bind
-	export let totalItems: number;
-	export let showItemsLeft = false;
-	export let pageSizeInputDisabled: boolean = false;
-	export let pageSizes: ReadonlyArray<Number> = [10];
-	export let forwardText: string;
-	export let backwardText: string;
-	export let disabled: boolean = false;
+export let pageSize: number // Reactive, bind
+export let page: number = 1 // Reactive, bind
+export let totalItems: number
+export let showItemsLeft = false
+export let pageSizeInputDisabled: boolean = false
+export let pageSizes: ReadonlyArray<Number> = [10]
+export let forwardText: string
+export let backwardText: string
+export let disabled: boolean = false
 
-	afterUpdate(() => {
-		if (page > totalPages) {
-			page = totalPages;
-		}
-	});
+afterUpdate(() => {
+	if (page > totalPages) {
+		page = totalPages
+	}
+})
 
-	$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
-	$: backButtonDisabled = disabled || page === 1;
-	$: forwardButtonDisabled = disabled || page === totalPages;
-	$: itemsLeft = totalItems - page * pageSize >= 0 ? totalItems - page * pageSize : 0;
+$: totalPages = Math.max(Math.ceil(totalItems / pageSize), 1)
+$: backButtonDisabled = disabled || page === 1
+$: forwardButtonDisabled = disabled || page === totalPages
+$: itemsLeft = totalItems - page * pageSize >= 0 ? totalItems - page * pageSize : 0
 </script>
 
 <div class="container">
@@ -108,7 +108,7 @@
 	</div>
 </div>
 
-<style lang="scss">
+<style lang="postcss">
 	.container {
 		display: flex;
 		flex: wrap;
diff --git a/src/lib/components/preferences/gameCollection.svelte b/src/lib/components/preferences/gameCollection.svelte
index eec5345..7f621f2 100644
--- a/src/lib/components/preferences/gameCollection.svelte
+++ b/src/lib/components/preferences/gameCollection.svelte
@@ -1,43 +1,43 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { boredState } from '$lib/stores/boredState';
-	import { collectionStore } from '$lib/stores/collectionStore';
-	import { ToastType } from '$lib/types';
-	// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
-	import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte';
-	import { toast } from '../toast/toast';
+import { browser } from '$app/environment'
+import { boredState } from '$lib/stores/boredState'
+import { collectionStore } from '$lib/stores/collectionStore'
+import { ToastType } from '$lib/types'
+// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte'
+import { toast } from '../toast/toast'
 
-	function saveCollection() {
-		if (!browser) return;
-		localStorage.collection = JSON.stringify($collectionStore);
-		toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
-	}
+function saveCollection() {
+	if (!browser) return
+	localStorage.collection = JSON.stringify($collectionStore)
+	toast.send('Saved collection', { duration: 3000, type: ToastType.INFO })
+}
 
-	function exportCollection() {
-		if (!browser) return;
-		const collectionBlob = new Blob([JSON.stringify($collectionStore)], {
-			type: 'application/json;charset=utf-8'
-		});
-		let url = window.URL || window.webkitURL;
-		let link = url.createObjectURL(collectionBlob);
-		let a = document.createElement('a');
-		a.setAttribute('download', `collection.json`);
-		a.setAttribute('href', link);
-		a.click();
-		document.body.removeChild(a);
-		toast.send('Exported collection', { duration: 3000, type: ToastType.INFO });
-	}
+function exportCollection() {
+	if (!browser) return
+	const collectionBlob = new Blob([JSON.stringify($collectionStore)], {
+		type: 'application/json;charset=utf-8',
+	})
+	let url = window.URL || window.webkitURL
+	let link = url.createObjectURL(collectionBlob)
+	let a = document.createElement('a')
+	a.setAttribute('download', `collection.json`)
+	a.setAttribute('href', link)
+	a.click()
+	document.body.removeChild(a)
+	toast.send('Exported collection', { duration: 3000, type: ToastType.INFO })
+}
 
-	function clearCollection() {
-		if ($collectionStore.length > 0) {
-			boredState.update((n) => ({
-				...n,
-				dialog: { isOpen: true, content: ClearCollectionDialog }
-			}));
-		} else {
-			toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
-		}
+function clearCollection() {
+	if ($collectionStore.length > 0) {
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: ClearCollectionDialog },
+		}))
+	} else {
+		toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR })
 	}
+}
 </script>
 
 <div>
@@ -61,7 +61,7 @@
 	</div>
 </div>
 
-<style lang="scss">
+<style lang="postcss">
 	:global(.collection-title) {
 		padding-bottom: var(--spacing-8);
 		font-size: var(--font-24);
diff --git a/src/lib/components/preferences/gameWishlist.svelte b/src/lib/components/preferences/gameWishlist.svelte
index f570979..ab0125a 100644
--- a/src/lib/components/preferences/gameWishlist.svelte
+++ b/src/lib/components/preferences/gameWishlist.svelte
@@ -1,43 +1,43 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
-	import { boredState } from '$lib/stores/boredState';
-	import { wishlistStore } from '$lib/stores/wishlistStore';
-	import { ToastType } from '$lib/types';
-	// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
-	import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
-	import { toast } from '../toast/toast';
+import { browser } from '$app/environment'
+import { boredState } from '$lib/stores/boredState'
+import { wishlistStore } from '$lib/stores/wishlistStore'
+import { ToastType } from '$lib/types'
+// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte'
+import { toast } from '../toast/toast'
 
-	function saveWishlist() {
-		if (!browser) return;
-		localStorage.wishlist = JSON.stringify($wishlistStore);
-		toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO });
-	}
+function saveWishlist() {
+	if (!browser) return
+	localStorage.wishlist = JSON.stringify($wishlistStore)
+	toast.send('Saved wishlist', { duration: 3000, type: ToastType.INFO })
+}
 
-	function exportWishlist() {
-		if (!browser) return;
-		const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
-			type: 'application/json;charset=utf-8'
-		});
-		let url = window.URL || window.webkitURL;
-		let link = url.createObjectURL(wishlistBlob);
-		let a = document.createElement('a');
-		a.setAttribute('download', `wishlist.json`);
-		a.setAttribute('href', link);
-		a.click();
-		document.body.removeChild(a);
-		toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO });
-	}
+function exportWishlist() {
+	if (!browser) return
+	const wishlistBlob = new Blob([JSON.stringify($wishlistStore)], {
+		type: 'application/json;charset=utf-8',
+	})
+	let url = window.URL || window.webkitURL
+	let link = url.createObjectURL(wishlistBlob)
+	let a = document.createElement('a')
+	a.setAttribute('download', `wishlist.json`)
+	a.setAttribute('href', link)
+	a.click()
+	document.body.removeChild(a)
+	toast.send('Exported wishlist', { duration: 3000, type: ToastType.INFO })
+}
 
-	function clearWishlist() {
-		if ($wishlistStore.length > 0) {
-			boredState.update((n) => ({
-				...n,
-				dialog: { isOpen: true, content: ClearWishlistDialog }
-			}));
-		} else {
-			toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR });
-		}
+function clearWishlist() {
+	if ($wishlistStore.length > 0) {
+		boredState.update((n) => ({
+			...n,
+			dialog: { isOpen: true, content: ClearWishlistDialog },
+		}))
+	} else {
+		toast.send('Nothing to clear', { duration: 3000, type: ToastType.ERROR })
 	}
+}
 </script>
 
 <div>
@@ -61,7 +61,7 @@
 	</div>
 </div>
 
-<style lang="scss">
+<style lang="postcss">
 	:global(.wishlist-title) {
 		padding-bottom: var(--spacing-8);
 		font-size: var(--font-24);
diff --git a/src/lib/components/preferences/profile.svelte b/src/lib/components/preferences/profile.svelte
index 0b42e04..51eae9a 100644
--- a/src/lib/components/preferences/profile.svelte
+++ b/src/lib/components/preferences/profile.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { fade } from 'svelte/transition';
-	import cogOutline from '@iconify-icons/mdi/cog-outline';
-	import Themes from './themes.svelte';
-	import GameCollection from './gameCollection.svelte';
-	import GameWishlist from './gameWishlist.svelte';
+import cogOutline from '@iconify-icons/mdi/cog-outline'
+import { fade } from 'svelte/transition'
+import GameCollection from './gameCollection.svelte'
+import GameWishlist from './gameWishlist.svelte'
+import Themes from './themes.svelte'
 </script>
 
 <div class="container">
@@ -65,7 +65,7 @@
 	<!-- </Popover> -->
 </div>
 
-<style lang="scss">
+<style lang="postcss">
 	.container {
 		width: 24px;
 		height: 24px;
diff --git a/src/lib/components/random/index.svelte b/src/lib/components/random/index.svelte
index 0646936..99260c5 100644
--- a/src/lib/components/random/index.svelte
+++ b/src/lib/components/random/index.svelte
@@ -1,46 +1,46 @@
 <script lang="ts">
-	import { boredState } from '$lib/stores/boredState';
-	import { gameStore } from '$lib/stores/gameSearchStore';
-	import { collectionStore } from '$lib/stores/collectionStore';
-	import { toast } from '$lib/components/toast/toast';
-	import { ToastType, type SavedGameType } from '$lib/types';
-	import { mapSavedGameToGame } from '$lib/utils/gameMapper';
+import { toast } from '$lib/components/toast/toast'
+import { boredState } from '$lib/stores/boredState'
+import { collectionStore } from '$lib/stores/collectionStore'
+import { gameStore } from '$lib/stores/gameSearchStore'
+import { type SavedGameType, ToastType } from '$lib/types'
+import { mapSavedGameToGame } from '$lib/utils/gameMapper'
 
-	async function getRandomCollectionGame() {
-		if ($collectionStore.length > 0) {
-			boredState.update((n) => ({ ...n, loading: true }));
-			let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1);
-			if ($collectionStore.at(randomNumber)) {
-				gameStore.removeAll();
-				const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
-				// const response = await fetch(`/api/game/${randomGame?.id}`, {
-				//   method: 'GET',
-				//   headers: { accept: 'application/json' }
-				// });
-				// const responseData = await response.json();
-				// console.log('responseData', responseData);
-				// gameStore.add(responseData?.game);
-				gameStore.add(mapSavedGameToGame(randomGame));
-				boredState.update((n) => ({ ...n, loading: false }));
-			} else {
-				toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
-			}
-			boredState.update((n) => ({ ...n, loading: false }));
+async function getRandomCollectionGame() {
+	if ($collectionStore.length > 0) {
+		boredState.update((n) => ({ ...n, loading: true }))
+		let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1)
+		if ($collectionStore.at(randomNumber)) {
+			gameStore.removeAll()
+			const randomGame: SavedGameType = $collectionStore.at(randomNumber)!
+			// const response = await fetch(`/api/game/${randomGame?.id}`, {
+			//   method: 'GET',
+			//   headers: { accept: 'application/json' }
+			// });
+			// const responseData = await response.json();
+			// console.log('responseData', responseData);
+			// gameStore.add(responseData?.game);
+			gameStore.add(mapSavedGameToGame(randomGame))
+			boredState.update((n) => ({ ...n, loading: false }))
 		} else {
-			toast.send('No items in your collection!', {
-				duration: 3000,
-				type: ToastType.ERROR,
-				dismissible: true
-			});
+			toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true })
 		}
+		boredState.update((n) => ({ ...n, loading: false }))
+	} else {
+		toast.send('No items in your collection!', {
+			duration: 3000,
+			type: ToastType.ERROR,
+			dismissible: true,
+		})
 	}
+}
 </script>
 
 <button class="btn" type="button" on:click={() => getRandomCollectionGame()}
 	>Random from collection 🎲</button
 >
 
-<style lang="scss">
+<style lang="postcss">
 	button {
 		max-width: 450px;
 		padding: var(--spacing-8) var(--spacing-16);
diff --git a/src/lib/components/search/advancedSearch/index.svelte b/src/lib/components/search/advancedSearch/index.svelte
index a355e66..9a9fcc3 100644
--- a/src/lib/components/search/advancedSearch/index.svelte
+++ b/src/lib/components/search/advancedSearch/index.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { boredState } from '$lib/stores/boredState';
+import { boredState } from '$lib/stores/boredState'
 
-	export let form;
-	export let errors;
-	export let constraints;
-	console.log('advanced search data', $form);
+export let form
+export let errors
+export let constraints
+console.log('advanced search data', $form)
 
-	let submitting = $boredState?.loading;
-	let minAge = +$form?.minAge || 1;
-	let minPlayers = +$form?.minPlayers || 1;
-	let maxPlayers = +$form?.maxPlayers || 1;
-	let exactMinPlayers = Boolean($form?.exactMinPlayers) || false;
-	let exactMaxPlayers = Boolean($form?.exactMaxPlayers) || false;
+let submitting = $boredState?.loading
+let minAge = +$form?.minAge || 1
+let minPlayers = +$form?.minPlayers || 1
+let maxPlayers = +$form?.maxPlayers || 1
+let exactMinPlayers = Boolean($form?.exactMinPlayers) || false
+let exactMaxPlayers = Boolean($form?.exactMaxPlayers) || false
 </script>
 
 <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
@@ -90,7 +90,7 @@
 	</div>
 </fieldset>
 
-<style lang="scss">
+<style lang="postcss">
 	fieldset {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index 2075152..3e6e644 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -1,37 +1,37 @@
 <script lang="ts">
-	import type { SuperValidated } from 'sveltekit-superforms/index';
-	import type { SearchSchema } from '$lib/zodValidation';
-	import { boredState } from '$lib/stores/boredState';
-	import { gameStore } from '$lib/stores/gameSearchStore';
-  import { superForm } from 'sveltekit-superforms/client';
-	import { Button } from '$components/ui/button';
+import { Button } from '$components/ui/button'
+import { boredState } from '$lib/stores/boredState'
+import { gameStore } from '$lib/stores/gameSearchStore'
+import type { SearchSchema } from '$lib/zodValidation'
+import { superForm } from 'sveltekit-superforms/client'
+import type { SuperValidated } from 'sveltekit-superforms/index'
 
-	export let data: SuperValidated<SearchSchema>;
-	const { enhance } = superForm(data, {
-		onSubmit: () => {
-			gameStore.removeAll();
-			boredState.update((n) => ({ ...n, loading: true }));
-		},
-		onResult: ({ result, formEl, cancel }) => {
-			boredState.update((n) => ({ ...n, loading: false }));
-			if (result.type === 'success') {
-				gameStore.addAll(result?.data?.searchData?.games);
-			} else {
-				cancel();
-			}
-		},
-		// onUpdated: ({ form }) => {
-		// 	if ($gameStore.length <= 0) {
-		// 		toast.send('No results found 😿', {
-		// 			duration: 3000,
-		// 			type: ToastType.ERROR,
-		// 			dismissible: true
-		// 		});
-		// 	}
-		// }
-	});
+export let data: SuperValidated<SearchSchema>
+const { enhance } = superForm(data, {
+	onSubmit: () => {
+		gameStore.removeAll()
+		boredState.update((n) => ({ ...n, loading: true }))
+	},
+	onResult: ({ result, formEl, cancel }) => {
+		boredState.update((n) => ({ ...n, loading: false }))
+		if (result.type === 'success') {
+			gameStore.addAll(result?.data?.searchData?.games)
+		} else {
+			cancel()
+		}
+	},
+	// onUpdated: ({ form }) => {
+	// 	if ($gameStore.length <= 0) {
+	// 		toast.send('No results found 😿', {
+	// 			duration: 3000,
+	// 			type: ToastType.ERROR,
+	// 			dismissible: true
+	// 		});
+	// 	}
+	// }
+})
 
-	let submitting = $boredState?.loading;
+let submitting = $boredState?.loading
 </script>
 
 <form
@@ -45,7 +45,7 @@
 	</fieldset>
 </form>
 
-<style lang="scss">
+<style lang="postcss">
 	fieldset {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
diff --git a/src/lib/components/toast/Toast.svelte b/src/lib/components/toast/Toast.svelte
index 1d07ef6..2c8c875 100644
--- a/src/lib/components/toast/Toast.svelte
+++ b/src/lib/components/toast/Toast.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { fly, fade } from 'svelte/transition';
-	import { flip } from 'svelte/animate';
-	import Portal from '$lib/Portal.svelte';
-	import ToastMessage from './ToastMessage.svelte';
-	import { toast } from './toast';
+import Portal from '$lib/Portal.svelte'
+import { flip } from 'svelte/animate'
+import { fade, fly } from 'svelte/transition'
+import ToastMessage from './ToastMessage.svelte'
+import { toast } from './toast'
 </script>
 
 <Portal>
@@ -48,7 +48,7 @@
 	</div>
 </Portal>
 
-<style lang="scss">
+<style lang="postcss">
 	.toast-wrapper {
 		display: flex;
 		flex-flow: column;
diff --git a/src/routes/(app)/game/[id]/+page.svelte b/src/routes/(app)/game/[id]/+page.svelte
index 5edca30..294b37b 100644
--- a/src/routes/(app)/game/[id]/+page.svelte
+++ b/src/routes/(app)/game/[id]/+page.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { Image } from 'svelte-lazy-loader';
-	import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte';
-	import type { PageData } from './$types';
-	import { Button } from '$components/ui/button';
-	import AddToList from '$components/AddToList.svelte';
-	import Badge from '$components/ui/badge/badge.svelte';
+import AddToList from '$components/AddToList.svelte'
+import Badge from '$components/ui/badge/badge.svelte'
+import { Button } from '$components/ui/button'
+import { Dices, ExternalLinkIcon, MinusIcon, PlusIcon } from 'lucide-svelte'
+import { Image } from 'svelte-lazy-loader'
+import type { PageData } from './$types'
 
-	const { data } = $props();
-	const { game, user, in_collection, in_wishlist } = data;
+const { data } = $props()
+const { game, user, in_collection, in_wishlist } = data
 
-	let seeMore: boolean = $state(false);
+let seeMore: boolean = $state(false)
 </script>
 
 <svelte:head>
@@ -111,7 +111,7 @@
 	</ul>
 </section>
 
-<style lang="scss">
+<style lang="postcss">
 	h2 {
 		text-align: center;
 		font-size: 2.5rem;