feat(popup): close on outer click

1 files changed, 65 insertions, 66 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 17073c4d..0133c48b 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -17,6 +17,7 @@
 	import AnimeRateLimited from '$lib/Error/AnimeRateLimited.svelte';
 	import { activityText } from '$lib/AniList/activity.js';
 	import SettingHint from '$lib/Settings/SettingHint.svelte';
+	import Popup from '$lib/Popup.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -404,9 +405,9 @@
 <HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
 
 {#if loadError}
-	<div class="card popup">
+	<Popup>
 		{loadError}
-	</div>
+	</Popup>
 {:else}
 	{#await currentUserIdentity}
 		<Message message="Loading user ..." />
@@ -666,7 +667,7 @@
 						{/if}
 					</div>
 				{:catch}
-					<div class="card popup">Could not parse badges</div>
+					<Popup>Could not parse badges</Popup>
 				{/await}
 			{:else}
 				<Message message="Loading badges ..." />
@@ -674,80 +675,78 @@
 				<Skeleton grid={true} count={100} width="150px" height="170px" />
 			{/if}
 		{:catch}
-			<div class="card popup">Could not fetch badges</div>
+			<Popup>Could not fetch badges</Popup>
 		{/await}
 	{:catch}
 		<AnimeRateLimited>This user's badges could not be loaded.</AnimeRateLimited>
 	{/await}
 {/if}
 
-{#if importMode}
-	<div class="popup popup-fullscreen">
-		<div class="card">
-			<SettingHint>Import badges from an activity post</SettingHint>
-
+{#if true}
+	<Popup fullscreen onLeave={() => (importMode = false)} show={importMode}>
+		<SettingHint>Import badges from an activity post</SettingHint>
+
+		<p />
+
+		<input
+			type="text"
+			placeholder={$locale().user.badges.editMode.activityURL}
+			id="import_activity_url"
+			minlength="1"
+			maxlength="1000"
+			size="20"
+		/>
+		<input
+			type="text"
+			placeholder={$locale().user.badges.editMode.category}
+			id="import_category"
+			minlength="1"
+			maxlength="1000"
+			size="20"
+		/>
+
+		<p />
+
+		<input type="checkbox" id="import_links" name="import_links" bind:checked={importLinks} />
+		Import Links
+		<SettingHint lineBreak>
+			If your images are nested in links, check this box to import the links as well.
+		</SettingHint>
+
+		<p />
+
+		<input type="checkbox" id="import_links" name="import_links" bind:checked={importReplies} />
+		Import Replies
+
+		<p />
+
+		<button
+			on:click={() => {
+				importMode = false;
+				importImages = undefined;
+			}}
+			class="button-lined"
+		>
+			{$locale().user.badges.importMode.cancel}
+		</button>
+		<button on:click={() => parsePost()} class="button-lined" style="float: right;">
+			{$locale().user.badges.importMode.fetch}
+		</button>
+
+		{#if importImages && importImages.length > 0}
 			<p />
 
-			<input
-				type="text"
-				placeholder={$locale().user.badges.editMode.activityURL}
-				id="import_activity_url"
-				minlength="1"
-				maxlength="1000"
-				size="20"
-			/>
-			<input
-				type="text"
-				placeholder={$locale().user.badges.editMode.category}
-				id="import_category"
-				minlength="1"
-				maxlength="1000"
-				size="20"
-			/>
-
-			<p />
+			Import {importImages.length} badges?&nbsp;
+			<button on:click={() => importBadges()} class="button-lined no-shadow">
+				{$locale().user.badges.importMode.import}
+			</button>
 
-			<input type="checkbox" id="import_links" name="import_links" bind:checked={importLinks} />
-			Import Links
 			<SettingHint lineBreak>
-				If your images are nested in links, check this box to import the links as well.
+				Please wait until import mode automatically disables after importing, otherwise you risk
+				skipping or duplicating badges.
 			</SettingHint>
-
-			<p />
-
-			<input type="checkbox" id="import_links" name="import_links" bind:checked={importReplies} />
-			Import Replies
-
-			<p />
-
-			<button
-				on:click={() => {
-					importMode = false;
-					importImages = undefined;
-				}}
-				class="button-lined"
-			>
-				{$locale().user.badges.importMode.cancel}
-			</button>
-			<button on:click={() => parsePost()} class="button-lined" style="float: right;">
-				{$locale().user.badges.importMode.fetch}
-			</button>
-
-			{#if importImages && importImages.length > 0}
-				<p />
-
-				Import {importImages.length} badges?&nbsp;
-				<button on:click={() => importBadges()} class="button-lined no-shadow">
-					{$locale().user.badges.importMode.import}
-				</button>
-
-				<SettingHint lineBreak>
-					Please wait until import mode automatically disables after importing, otherwise you risk
-					skipping or duplicating badges.
-				</SettingHint>
-			{/if}
-		</div>
-	</div>
+		{/if}
+	</Popup>
 {/if}
 
 <style>