feat(popup): use popup component

6 files changed, 23 insertions, 11 deletions

diff --git a/src/lib/Error/AnimeRateLimited.svelte b/src/lib/Error/AnimeRateLimited.svelte
index 9f206131..073a3879 100644
--- a/src/lib/Error/AnimeRateLimited.svelte
+++ b/src/lib/Error/AnimeRateLimited.svelte
@@ -1,9 +1,11 @@
-<div class="card popup">
-	<p>
-		<slot />
-	</p>
+<script>
+	import Popup from '$lib/Popup.svelte';
+</script>
 
-	<span> It is likely that you have been rate limited by AniList. Please try again later. </span>
+<Popup locked fullscreen>
+	<p><slot /></p>
+
+	<span>It is likely that you have been rate limited by AniList. Please try again later.</span>
 
 	{#await fetch('https://api.waifu.pics/sfw/cry') then response}
 		{#await response.json() then json}
@@ -14,4 +16,4 @@
 			</a>
 		{/await}
 	{/await}
-</div>
+</Popup>
diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index 8715b922..758c4039 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -9,7 +9,7 @@
 	export let colour = 'var(--fg)';
 </script>
 
-<Popup fullscreen>
+<Popup fullscreen locked>
 	<div class="message">
 		{#if loader === 'ellipsis'}
 			<Ellipsis {colour} />
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
index 3d31a66e..3e0979c1 100644
--- a/src/lib/Popup.svelte
+++ b/src/lib/Popup.svelte
@@ -6,9 +6,10 @@
 	export let smallCard = false;
 	export let fullscreen = false;
 	export let show = true;
+	export let locked = false;
 
 	const handleClickOutside = (event: any) => {
-		if (event.target.classList.contains('popup')) {
+		if (!locked && event.target.classList.contains('popup')) {
 			show = false;
 
 			onLeave();
diff --git a/src/lib/Tools/ActivityHistory/Tool.svelte b/src/lib/Tools/ActivityHistory/Tool.svelte
index d03e8545..5de98065 100644
--- a/src/lib/Tools/ActivityHistory/Tool.svelte
+++ b/src/lib/Tools/ActivityHistory/Tool.svelte
@@ -12,6 +12,7 @@
 	import ActivityHistoryGrid from './Grid.svelte';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import Popup from '$lib/Popup.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -65,7 +66,9 @@
 </script>
 
 {#if user === undefined}
-	<div class="card popup">Please log in to view this page.</div>
+	<Popup fullscreen locked>
+		<div class="message">Please log in to view this page.</div>
+	</Popup>
 {:else}
 	{#await activityHistoryData}
 		<Skeleton card={false} count={5} height="0.9rem" list />
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index ce6ea7e6..16e41f81 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -18,6 +18,7 @@
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import identity from '$stores/identity';
+	import Popup from '$lib/Popup.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -47,7 +48,9 @@
 </script>
 
 {#if user === undefined || $identity.id === -2}
-	<div class="popup card">Please log in to view this page.</div>
+	<Popup fullscreen locked>
+		<div class="message">Please log in to view this page.</div>
+	</Popup>
 {:else}
 	<div class="card">
 		<p>
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index 06e96215..f1de9f5d 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -28,6 +28,7 @@
 	import Skeleton from '$lib/Loading/Skeleton.svelte';
 	import Message from '$lib/Loading/Message.svelte';
 	import tooltip from '$lib/Tooltip/tooltip';
+	import Popup from '$lib/Popup.svelte';
 
 	export let user: AniListAuthorisation;
 
@@ -564,7 +565,9 @@
 </script>
 
 {#if $userIdentity.id === -2 || user === undefined}
-	<div class="popup card">Please log in to view this page.</div>
+	<Popup fullscreen locked>
+		<div class="message">Please log in to view this page.</div>
+	</Popup>
 {:else if $userIdentity.id !== -1}
 	{#await selectedYear !== currentYear || useFullActivityHistory || new Date().getMonth() <= 6 ? fullActivityHistory(user, $userIdentity, selectedYear) : getActivityHistory($userIdentity)}
 		<Message message="Loading activity history ..." />