Adding prefetch to collection/wishlist, fixed position on modals, and adding remove color to all modals.

package.json

@@ -19,7 +19,7 @@
     "@sveltejs/adapter-auto": "1.0.0-next.72",
     "@sveltejs/kit": "1.0.0-next.480",
     "@types/cookie": "^0.5.1",
-    "@types/node": "^18.11.8",
+    "@types/node": "^18.11.9",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",
     "eslint": "^8.26.0",

pnpm-lock.yaml

@@ -12,7 +12,7 @@ specifiers:
   '@sveltejs/kit': 1.0.0-next.480
   '@types/cookie': ^0.5.1
   '@types/feather-icons': ^4.7.0
-  '@types/node': ^18.11.8
+  '@types/node': ^18.11.9
   '@typescript-eslint/eslint-plugin': ^5.42.0
   '@typescript-eslint/parser': ^5.42.0
   cookie: ^0.5.0
@@ -51,7 +51,7 @@ devDependencies:
   '@sveltejs/adapter-auto': 1.0.0-next.72
   '@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.2
   '@types/cookie': 0.5.1
-  '@types/node': 18.11.8
+  '@types/node': 18.11.9
   '@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu
   '@typescript-eslint/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m
   eslint: 8.26.0
@@ -228,7 +228,7 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
       playwright-core: 1.27.1
     dev: true
 
@@ -361,8 +361,8 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
-  /@types/node/18.11.8:
+  /@types/node/18.11.9:
-    resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==}
+    resolution: {integrity: sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==}
     dev: true
 
   /@types/pug/2.0.6:
@@ -372,7 +372,7 @@ packages:
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.11.8
+      '@types/node': 18.11.9
     dev: true
 
   /@types/semver/7.3.13:

src/lib/components/dialog/ClearCollectionDialog.svelte

@@ -35,7 +35,7 @@
 			<DialogDescription>Are you sure you want to clear your collection?</DialogDescription>
 
 			<div class="dialog-footer">
-				<button on:click={clearCollection}>Clear</button>
+				<button class="remove" on:click={clearCollection}>Clear</button>
 				<button
 					on:click={() => {
 						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@@ -50,7 +50,7 @@
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
-		position: absolute;
+		position: fixed;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
@@ -79,6 +79,14 @@
 					background-color: var(--color-btn-primary-active-hover);
 				}
 			}
+
+			.remove {
+				background-color: var(--warning);
+
+				&:hover {
+					background-color: var(--warning-hover);
+				}
+			}
 		}
 	}
 </style>

src/lib/components/dialog/ClearWishlistDialog.svelte

@@ -35,7 +35,7 @@
 			<DialogDescription>Are you sure you want to clear your wishlist?</DialogDescription>
 
 			<div class="dialog-footer">
-				<button on:click={clearWishlist}>Clear</button>
+				<button class="remove" on:click={clearWishlist}>Clear</button>
 				<button
 					on:click={() => {
 						boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@@ -50,7 +50,7 @@
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
-		position: absolute;
+		position: fixed;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
@@ -79,6 +79,14 @@
 					background-color: var(--color-btn-primary-active-hover);
 				}
 			}
+
+			.remove {
+				background-color: var(--warning);
+
+				&:hover {
+					background-color: var(--warning-hover);
+				}
+			}
 		}
 	}
 </style>

src/lib/components/dialog/DefaultDialog.svelte

@@ -33,7 +33,7 @@
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
-    position: absolute;
+		position: fixed;
 		top: 35%;
 		left: 50%;
 		transform: translate(-50%, -50%);

src/lib/components/dialog/RemoveCollectionDialog.svelte

@@ -53,7 +53,7 @@
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
-		position: absolute;
+		position: fixed;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);

src/lib/components/dialog/RemoveWishlistDialog.svelte

@@ -53,7 +53,7 @@
 	.dialog {
 		display: grid;
 		gap: 1.5rem;
-		position: absolute;
+		position: fixed;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);

src/lib/components/header/Header.svelte

@@ -11,8 +11,8 @@
 	</div>
 
 	<nav>
-		<a href="/collection" title="Go to your collection">Collection</a>
+		<a href="/collection" title="Go to your collection" data-sveltekit-prefetch>Collection</a>
-		<a href="/wishlist" title="Go to your collection">Wishlist</a>
+		<a href="/wishlist" title="Go to your collection" data-sveltekit-prefetch>Wishlist</a>
 		<Profile />
 	</nav>
 </header>

src/lib/components/preferences/gameCollection.svelte

@@ -50,9 +50,9 @@
 		<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
 			><ShareIcon width="24" height="24" />Export</button
 		>
-		<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
+		<!-- <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
 			><SaveIcon width="24" height="24" />Save</button
-		>
+		> -->
 		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
 			<TrashIcon width="24" height="24" />Clear
 		</button>

src/lib/components/preferences/gameWishlist.svelte

@@ -50,9 +50,9 @@
 		<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
 			><ShareIcon width="24" height="24" />Export</button
 		>
-		<button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
+		<!-- <button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
 			><SaveIcon width="24" height="24" />Save</button
-		>
+		> -->
 		<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
 			<TrashIcon width="24" height="24" />Clear
 		</button>