refactor(tools): better cards

1 files changed, 58 insertions, 56 deletions

diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 447333a8..2399b125 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -9,62 +9,64 @@
 	onMount(clearAllParameters);
 </script>
 
-<p>
-	<!-- svelte-ignore missing-declaration -->
-	<input
-		type="text"
-		placeholder="Username"
-		bind:value={searchInput}
-		on:keypress={(e) => {
-			if (e.key === 'Enter') {
-				searchInputFinal = searchInput;
+<div class="card">
+	<p>
+		<!-- svelte-ignore missing-declaration -->
+		<input
+			type="text"
+			placeholder="Username"
+			bind:value={searchInput}
+			on:keypress={(e) => {
+				if (e.key === 'Enter') {
+					searchInputFinal = searchInput;
 
-				// eslint-disable-next-line no-undef
-				umami.track('Collect Episode Discussions');
-			}
-		}}
-	/>
-	<button
-		class="button-lined"
-		on:click={() => (searchInputFinal = searchInput)}
-		title="Or click your Enter key"
-		data-umami-event="Collect Episode Discussions"
-	>
-		Search
-	</button>
-</p>
+					// eslint-disable-next-line no-undef
+					umami.track('Collect Episode Discussions');
+				}
+			}}
+		/>
+		<button
+			class="button-lined"
+			on:click={() => (searchInputFinal = searchInput)}
+			title="Or click your Enter key"
+			data-umami-event="Collect Episode Discussions"
+		>
+			Search
+		</button>
+	</p>
 
-{#if searchInputFinal !== ''}
-	{#await threads(searchInputFinal)}
-		Loading forum threads ... 50%
-	{:then threads}
-		<ul>
-			{#each threads
-				.filter((thread) => thread.title.includes('[Spoilers]') && thread.title.includes('Episode'))
-				.sort((a, b) => b.createdAt - a.createdAt) as thread}
-				<li>
-					<a href={`https://anilist.co/forum/thread/${thread.id}`} target="_blank">
-						{thread.title.replace('[Spoilers]', '')}
-					</a>
-				</li>
-			{/each}
-		</ul>
-	{:catch}
-		<p>
-			Threads could not be loaded. You might have been <a
-				href="https://en.wikipedia.org/wiki/Rate_limiting"
-				target="_blank">rate limited</a
-			>.
-		</p>
-		<p>
-			Try again in a few minutes. If the problem persists, please contact <a
-				href="https://anilist.co/user/fuwn"
-				target="_blank">@fuwn</a
-			> on AniList.
-		</p>
-	{/await}
-{:else}
-	<p />
+	{#if searchInputFinal !== ''}
+		{#await threads(searchInputFinal)}
+			Loading forum threads ... 50%
+		{:then threads}
+			<ul>
+				{#each threads
+					.filter((thread) => thread.title.includes('[Spoilers]') && thread.title.includes('Episode'))
+					.sort((a, b) => b.createdAt - a.createdAt) as thread}
+					<li>
+						<a href={`https://anilist.co/forum/thread/${thread.id}`} target="_blank">
+							{thread.title.replace('[Spoilers]', '')}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{:catch}
+			<p>
+				Threads could not be loaded. You might have been <a
+					href="https://en.wikipedia.org/wiki/Rate_limiting"
+					target="_blank">rate limited</a
+				>.
+			</p>
+			<p>
+				Try again in a few minutes. If the problem persists, please contact <a
+					href="https://anilist.co/user/fuwn"
+					target="_blank">@fuwn</a
+				> on AniList.
+			</p>
+		{/await}
+	{:else}
+		<p />
 
-	Enter a username to search for to continue.
-{/if}
+		Enter a username to search for to continue.
+	{/if}
+</div>