refactor(tools): better cards

1 files changed, 45 insertions, 43 deletions

diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 88c1bd85..7824a424 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -11,48 +11,50 @@
 	onMount(clearAllParameters);
 </script>
 
-<p>
-	<!-- svelte-ignore missing-declaration -->
-	<input
-		type="text"
-		placeholder="Username"
-		bind:value={input}
-		on:keypress={(e) => {
-			if (e.key === 'Enter') {
-				submit = input;
-				randomSeed = Math.random();
-
-				// eslint-disable-next-line no-undef
-				umami.track('Random Follower');
-			}
-		}}
-	/>
-	<button
-		class="button-lined"
-		on:click={() => (submit = input) && (randomSeed = Math.random())}
-		title="Or click your Enter key"
-		data-umami-event="Random Follower"
-	>
-		Generate
-	</button>
-</p>
-
-{#if submit !== ''}
-	{#await followers(submit)}
-		Loading followers ... 50%
-	{:then users}
-		{@const user = users[Math.floor(randomSeed * users.length)]}
-
+<div class="card">
+	<p>
+		<!-- svelte-ignore missing-declaration -->
+		<input
+			type="text"
+			placeholder="Username"
+			bind:value={input}
+			on:keypress={(e) => {
+				if (e.key === 'Enter') {
+					submit = input;
+					randomSeed = Math.random();
+
+					// eslint-disable-next-line no-undef
+					umami.track('Random Follower');
+				}
+			}}
+		/>
+		<button
+			class="button-lined"
+			on:click={() => (submit = input) && (randomSeed = Math.random())}
+			title="Or click your Enter key"
+			data-umami-event="Random Follower"
+		>
+			Generate
+		</button>
+	</p>
+
+	{#if submit !== ''}
+		{#await followers(submit)}
+			Loading followers ... 50%
+		{:then users}
+			{@const user = users[Math.floor(randomSeed * users.length)]}
+
+			<p />
+
+			<a href={`https://anilist.co/user/${user.id}`} target="_blank">
+				{user.name}
+			</a>
+		{:catch}
+			<RateLimited type="Followers" list={false} />
+		{/await}
+	{:else}
 		<p />
 
-		<a href={`https://anilist.co/user/${user.id}`} target="_blank">
-			{user.name}
-		</a>
-	{:catch}
-		<RateLimited type="Followers" list={false} />
-	{/await}
-{:else}
-	<p />
-
-	Enter a username to search for to continue.
-{/if}
+		Enter a username to search for to continue.
+	{/if}
+</div>