From 1ddd21e1a91a9ed515e1c65f77d99b1169e6c2a9 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Thu, 3 Nov 2022 15:42:58 -0500
Subject: [PATCH] Adding prefetch to collection/wishlist, fixed position on
 modals, and adding remove color to all modals.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  12 +-
 .../dialog/ClearCollectionDialog.svelte       |  12 +-
 .../dialog/ClearWishlistDialog.svelte         |  12 +-
 .../components/dialog/DefaultDialog.svelte    | 106 +++++++++---------
 .../dialog/RemoveCollectionDialog.svelte      |   2 +-
 .../dialog/RemoveWishlistDialog.svelte        |   2 +-
 src/lib/components/header/Header.svelte       |   4 +-
 .../preferences/gameCollection.svelte         |   4 +-
 .../preferences/gameWishlist.svelte           |   4 +-
 10 files changed, 88 insertions(+), 72 deletions(-)

diff --git a/package.json b/package.json
index 8985d90..417dc17 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8c32a8a..1204532 100644
--- a/pnpm-lock.yaml
+++ b/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:
-    resolution: {integrity: sha512-uGwPWlE0Hj972KkHtCDVwZ8O39GmyjfMane1Z3GUBGGnkZ2USDq7SxLpVIiIHpweY9DS0QTDH0Nw7RNBsAAZ5A==}
+  /@types/node/18.11.9:
+    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:
diff --git a/src/lib/components/dialog/ClearCollectionDialog.svelte b/src/lib/components/dialog/ClearCollectionDialog.svelte
index 59598c0..6a9d3c5 100644
--- a/src/lib/components/dialog/ClearCollectionDialog.svelte
+++ b/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>
diff --git a/src/lib/components/dialog/ClearWishlistDialog.svelte b/src/lib/components/dialog/ClearWishlistDialog.svelte
index a67e70e..180ca80 100644
--- a/src/lib/components/dialog/ClearWishlistDialog.svelte
+++ b/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>
diff --git a/src/lib/components/dialog/DefaultDialog.svelte b/src/lib/components/dialog/DefaultDialog.svelte
index 262cc03..a6bd872 100644
--- a/src/lib/components/dialog/DefaultDialog.svelte
+++ b/src/lib/components/dialog/DefaultDialog.svelte
@@ -1,67 +1,67 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
-  import {
-    Dialog,
-    DialogDescription,
-    DialogOverlay,
-    DialogTitle
-  } from '@rgossiaux/svelte-headlessui';
-  import { boredState } from '$root/lib/stores/boredState';
+	import { fade } from 'svelte/transition';
+	import {
+		Dialog,
+		DialogDescription,
+		DialogOverlay,
+		DialogTitle
+	} from '@rgossiaux/svelte-headlessui';
+	import { boredState } from '$root/lib/stores/boredState';
 
-  $: isOpen = $boredState?.dialog?.isOpen;
+	$: isOpen = $boredState?.dialog?.isOpen;
 </script>
 
 <Dialog
-  open={isOpen}
-  on:close={() => {
-    boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
-  }}
-  static
+	open={isOpen}
+	on:close={() => {
+		boredState.update((n) => ({ ...n, dialog: { ...n.dialog, isOpen: false } }));
+	}}
+	static
 >
-  <div transition:fade>
-    <DialogOverlay class="dialog-overlay" />
-    <div class="dialog">
-      <DialogTitle>Default Dialog</DialogTitle>
-      <DialogDescription>Dialog Description</DialogDescription>
+	<div transition:fade>
+		<DialogOverlay class="dialog-overlay" />
+		<div class="dialog">
+			<DialogTitle>Default Dialog</DialogTitle>
+			<DialogDescription>Dialog Description</DialogDescription>
 
-      <div class="dialog-footer" />
-    </div>
-  </div>
+			<div class="dialog-footer" />
+		</div>
+	</div>
 </Dialog>
 
 <style lang="scss">
-  .dialog {
-    display: grid;
-    gap: 1.5rem;
-    position: absolute;
-    top: 35%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    border-radius: 10px;
-    background-color: var(--clr-input-bg);
-    padding: 2rem;
-    min-width: 400px;
+	.dialog {
+		display: grid;
+		gap: 1.5rem;
+		position: fixed;
+		top: 35%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 101;
+		border-radius: 10px;
+		background-color: var(--clr-input-bg);
+		padding: 2rem;
+		min-width: 400px;
 
-    .dialog-footer {
-      display: flex;
-      justify-content: space-between;
-      gap: 2rem;
-      margin: 1rem 0;
+		.dialog-footer {
+			display: flex;
+			justify-content: space-between;
+			gap: 2rem;
+			margin: 1rem 0;
 
-      button {
-        display: flex;
-        place-content: center;
-        gap: 1rem;
-        width: 100%;
-        border-radius: 10px;
-        padding: 1rem;
-        background-color: var(--color-btn-primary-active);
+			button {
+				display: flex;
+				place-content: center;
+				gap: 1rem;
+				width: 100%;
+				border-radius: 10px;
+				padding: 1rem;
+				background-color: var(--color-btn-primary-active);
 
-        &:hover {
-          background-color: var(--color-btn-primary-active-hover);
-        }
-      }
-    }
-  }
+				&:hover {
+					background-color: var(--color-btn-primary-active-hover);
+				}
+			}
+		}
+	}
 </style>
diff --git a/src/lib/components/dialog/RemoveCollectionDialog.svelte b/src/lib/components/dialog/RemoveCollectionDialog.svelte
index d9e56d7..48ee734 100644
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/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%);
diff --git a/src/lib/components/dialog/RemoveWishlistDialog.svelte b/src/lib/components/dialog/RemoveWishlistDialog.svelte
index d2de2c0..72beda1 100644
--- a/src/lib/components/dialog/RemoveWishlistDialog.svelte
+++ b/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%);
diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte
index 4160821..be547f7 100644
--- a/src/lib/components/header/Header.svelte
+++ b/src/lib/components/header/Header.svelte
@@ -11,8 +11,8 @@
 	</div>
 
 	<nav>
-		<a href="/collection" title="Go to your collection">Collection</a>
-		<a href="/wishlist" title="Go to your collection">Wishlist</a>
+		<a href="/collection" title="Go to your collection" data-sveltekit-prefetch>Collection</a>
+		<a href="/wishlist" title="Go to your collection" data-sveltekit-prefetch>Wishlist</a>
 		<Profile />
 	</nav>
 </header>
diff --git a/src/lib/components/preferences/gameCollection.svelte b/src/lib/components/preferences/gameCollection.svelte
index 235e642..e24a59e 100644
--- a/src/lib/components/preferences/gameCollection.svelte
+++ b/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>
diff --git a/src/lib/components/preferences/gameWishlist.svelte b/src/lib/components/preferences/gameWishlist.svelte
index 53a1008..cfbb890 100644
--- a/src/lib/components/preferences/gameWishlist.svelte
+++ b/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>