frontend: Simplify Pill handling

Where before we handled the styling of pills (such as their icons and
colours) in multiple different places, instead centralize all of this in
the base Pill component.

1 files changed, 5 insertions, 5 deletions

diff --git a/frontend/src/lib/components/ComicCard.svelte b/frontend/src/lib/components/ComicCard.svelte
index cb73e97..1a648b2 100644
--- a/frontend/src/lib/components/ComicCard.svelte
+++ b/frontend/src/lib/components/ComicCard.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ComicFragment } from '$gql/graphql';
-	import AssociationPill from '$lib/pills/AssociationPill.svelte';
 	import FooterPill from '$lib/pills/FooterPill.svelte';
+	import Pill from '$lib/pills/Pill.svelte';
 	import TagPill from '$lib/pills/TagPill.svelte';
 	import { type Snippet } from 'svelte';
 	import Card from './Card.svelte';
@@ -30,20 +30,20 @@
 		{#if comic.artists.length || comic.circles.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.artists as { name } (name)}
-					<AssociationPill {name} type="artist" />
+					<Pill {name} style="artist" />
 				{/each}
 				{#each comic.circles as { name } (name)}
-					<AssociationPill {name} type="circle" />
+					<Pill {name} style="circle" />
 				{/each}
 			</div>
 		{/if}
 		{#if comic.characters.length || comic.worlds.length}
 			<div class="flex flex-wrap gap-1">
 				{#each comic.worlds as { name } (name)}
-					<AssociationPill {name} type="world" />
+					<Pill {name} style="world" />
 				{/each}
 				{#each comic.characters as { name } (name)}
-					<AssociationPill {name} type="character" />
+					<Pill {name} style="character" />
 				{/each}
 			</div>
 		{/if}