feat(tools): move all to cards

5 files changed, 66 insertions, 54 deletions

diff --git a/src/app.css b/src/app.css
index 7af85dbe..3e602dc1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -110,3 +110,9 @@ button:active {
 .button-lined {
 	transform: translateY(0.175em);
 }
+
+.card {
+	background-color: var(--base001);
+	padding: 1rem;
+	border-radius: 4px;
+}
diff --git a/src/lib/Tools/EpisodeDiscussionCollector.svelte b/src/lib/Tools/EpisodeDiscussionCollector.svelte
index 98b426a7..447333a8 100644
--- a/src/lib/Tools/EpisodeDiscussionCollector.svelte
+++ b/src/lib/Tools/EpisodeDiscussionCollector.svelte
@@ -64,5 +64,7 @@
 		</p>
 	{/await}
 {:else}
-	<p>Enter a username to search for to continue.</p>
+	<p />
+
+	Enter a username to search for to continue.
 {/if}
diff --git a/src/lib/Tools/RandomFollower.svelte b/src/lib/Tools/RandomFollower.svelte
index 5b9a2319..88c1bd85 100644
--- a/src/lib/Tools/RandomFollower.svelte
+++ b/src/lib/Tools/RandomFollower.svelte
@@ -43,14 +43,16 @@
 	{:then users}
 		{@const user = users[Math.floor(randomSeed * users.length)]}
 
-		<p>
-			<a href={`https://anilist.co/user/${user.id}`} target="_blank">
-				{user.name}
-			</a>
-		</p>
+		<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.</p>
+	<p />
+
+	Enter a username to search for to continue.
 {/if}
diff --git a/src/lib/Tools/SequelSpy.svelte b/src/lib/Tools/SequelSpy.svelte
index 5684463f..c5d9c4a2 100644
--- a/src/lib/Tools/SequelSpy.svelte
+++ b/src/lib/Tools/SequelSpy.svelte
@@ -85,9 +85,9 @@
 	</ul>
 {/await}
 
-<p style="opacity: 50%;">
-	The count ratio is the number of episodes you've seen of any direct prequels, and the total number
-	of episodes of all direct prequels.
-</p>
+<p />
+
+The count ratio is the number of episodes you've seen of any direct prequels, and the total number
+of episodes of all direct prequels.
 
 <HoverCover {hovering} {hoveredMedia} {imageStyle} />
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index e677d183..4d2da5cf 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -69,54 +69,56 @@
 	</select>
 </blockquote>
 
-{#if !Object.keys(tools).includes(tool)}
-	<HeadTitle route="Tools" path="/tools" />
+<div class="card">
+	{#if !Object.keys(tools).includes(tool)}
+		<HeadTitle route="Tools" path="/tools" />
 
-	<p>Tool not found.</p>
+		<p>Tool not found.</p>
 
-	<blockquote>
-		Did you mean "<a
-			href={`#`}
-			style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
-			on:click={() => (tool = suggestion)}
-		>
-			{suggestion === '...' ? '...' : tools[suggestion]}</a
-		>"?
-	</blockquote>
-{:else}
-	<HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />
+		<blockquote>
+			Did you mean "<a
+				href={`#`}
+				style={suggestion === '...' ? 'pointer-events: none; color: inherit;' : ''}
+				on:click={() => (tool = suggestion)}
+			>
+				{suggestion === '...' ? '...' : tools[suggestion]}</a
+			>"?
+		</blockquote>
+	{:else}
+		<HeadTitle route={tools[tool].name} path={`/tools?tool=${tool}`} />
 
-	{#if tool === 'default'}
-		<p>Select a tool to continue.</p>
+		{#if tool === 'default'}
+			<p>Select a tool to continue.</p>
 
-		<ul>
-			{#each Object.keys(tools) as t}
-				{#if t !== 'default'}
-					<li>
-						<a href={`#`} on:click={() => (tool = t)}>{tools[t].name}</a>
-						{#if tools[t].description}
-							<blockquote>{tools[t].description}</blockquote>
-						{/if}
-					</li>
-				{/if}
-			{/each}
-		</ul>
+			<ul>
+				{#each Object.keys(tools) as t}
+					{#if t !== 'default'}
+						<li>
+							<a href={`#`} on:click={() => (tool = t)}>{tools[t].name}</a>
+							{#if tools[t].description}
+								<blockquote>{tools[t].description}</blockquote>
+							{/if}
+						</li>
+					{/if}
+				{/each}
+			</ul>
+
+			<p />
 
-		<p>
 			Have any requests for cool tools that you think others might find useful? Send a message to
 			<a href="https://anilist.co/user/fuwn" target="_blank" rel="noopener">@fuwn</a> on AniList!
-		</p>
-	{:else if tool === 'activity_history'}
-		<ActivityHistory user={data.user} />
-	{:else if tool === 'wrapped'}
-		<Wrapped user={data.user} />
-	{:else if tool === 'discussions'}
-		<EpisodeDiscussionCollector />
-	{:else if tool === 'birthdays'}
-		<CharacterBirthdays />
-	{:else if tool === 'sequel_spy'}
-		<SequelSpy user={data.user} />
-	{:else if tool === 'random_follower'}
-		<RandomFollower />
+		{:else if tool === 'activity_history'}
+			<ActivityHistory user={data.user} />
+		{:else if tool === 'wrapped'}
+			<Wrapped user={data.user} />
+		{:else if tool === 'discussions'}
+			<EpisodeDiscussionCollector />
+		{:else if tool === 'birthdays'}
+			<CharacterBirthdays />
+		{:else if tool === 'sequel_spy'}
+			<SequelSpy user={data.user} />
+		{:else if tool === 'random_follower'}
+			<RandomFollower />
+		{/if}
 	{/if}
-{/if}
+</div>