3 files changed, 34 insertions, 84 deletions

diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
deleted file mode 100644
index fec59b8..0000000
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ /dev/null
@@ -1,27 +0,0 @@
-<script lang="ts">
-	import Artist from '$lib/icons/Artist.svelte';
-	import Character from '$lib/icons/Character.svelte';
-	import Circle from '$lib/icons/Circle.svelte';
-	import World from '$lib/icons/World.svelte';
-	import type { Component } from 'svelte';
-	import Pill from './Pill.svelte';
-
-	type Association = 'artist' | 'circle' | 'world' | 'character';
-
-	let { name, type }: { name: string; type: Association } = $props();
-
-	const icons: Record<Association, Component> = {
-		artist: Artist,
-		character: Character,
-		circle: Circle,
-		world: World
-	};
-
-	const Icon = icons[type];
-</script>
-
-<Pill {name}>
-	{#snippet icon()}
-		<Icon />
-	{/snippet}
-</Pill>
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index e7c6a8f..494cbe4 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,49 +1,58 @@
-<script lang="ts" module>
-	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
-</script>
-
 <script lang="ts">
-	import type { Snippet } from 'svelte';
-
 	interface Props {
 		name: string;
 		tooltip?: string | null;
-		colour?: PillColour;
-		icon?: Snippet;
+		style: string;
 	}
 
-	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
+	let { name, tooltip, style }: Props = $props();
 </script>
 
-<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
-	{@render icon?.()}
+<div class="flex items-center rounded-sm border p-0.5 {style}" title={tooltip}>
+	{#if style === 'female'}
+		<span class="icon-xs icon-[material-symbols--female] -mx-[3px]"></span>
+	{:else if style === 'male'}
+		<span class="icon-xs icon-[material-symbols--male] -mx-px"></span>
+	{:else if style === 'trans'}
+		<span class="icon-xs icon-[material-symbols--transgender]"></span>
+	{:else if style === 'location'}
+		<span class="icon-xs icon-[material-symbols--location-on-outline]"></span>
+	{:else if style === 'artist'}
+		<span class="icon-xs icon-[material-symbols--person] -mx-px"></span>
+	{:else if style === 'character'}
+		<span class="icon-xs icon-[material-symbols--face]"></span>
+	{:else if style === 'circle'}
+		<span class="icon-xs icon-[material-symbols--group] mx-px"></span>
+	{:else if style === 'world'}
+		<span class="icon-xs icon-[material-symbols--public]"></span>
+	{/if}
 	<span>{name}</span>
 </div>
 
 <style lang="postcss">
 	@reference "tailwindcss/theme";
 
-	.pink {
+	div {
+		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	}
+
+	.female {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
 
-	.blue {
+	.male {
 		@apply border-blue-800 bg-blue-800/20 text-blue-200;
 	}
 
-	.violet {
+	.trans {
 		@apply border-violet-800 bg-violet-800/20 text-violet-200;
 	}
 
-	.amber {
+	.mixed {
 		@apply border-amber-800 bg-amber-800/20 text-amber-200;
 	}
 
-	.sky {
+	.location {
 		@apply border-sky-800 bg-sky-800/20 text-sky-200;
 	}
-
-	.zinc {
-		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
-	}
 </style>
diff --git a/frontend/src/lib/pills/TagPill.svelte b/frontend/src/lib/pills/TagPill.svelte
index 92d2a0b..17e4b25 100644
--- a/frontend/src/lib/pills/TagPill.svelte
+++ b/frontend/src/lib/pills/TagPill.svelte
@@ -1,43 +1,11 @@
 <script lang="ts">
-	import Female from '$lib/icons/Female.svelte';
-	import Location from '$lib/icons/Location.svelte';
-	import Male from '$lib/icons/Male.svelte';
-	import Transgender from '$lib/icons/Transgender.svelte';
-	import type { Component } from 'svelte';
-	import Pill, { type PillColour } from './Pill.svelte';
+	import type { ComicTag } from '$gql/graphql';
+	import Pill from './Pill.svelte';
 
-	let { name, description }: { name: string; description?: string | null } = $props();
+	let { name, description }: Pick<ComicTag, 'name' | 'description'> = $props();
 
 	let [namespace, tag] = name.split(':');
-
-	const styles: Record<string, PillColour> = {
-		female: 'pink',
-		male: 'blue',
-		trans: 'violet',
-		mixed: 'amber',
-		location: 'sky',
-		rest: 'zinc'
-	};
-
-	const icons: Record<string, Component> = {
-		female: Female,
-		male: Male,
-		trans: Transgender,
-		location: Location
-	};
-
-	const colour = styles[namespace] ?? styles.rest;
-	const Icon = icons[namespace];
-
-	function formatTooltip() {
-		return [name, description].filter((v) => v).join('\n\n');
-	}
+	let tooltip = [name, description].filter((v) => v).join('\n\n');
 </script>
 
-<Pill name={tag} tooltip={formatTooltip()} {colour}>
-	{#snippet icon()}
-		{#if Icon}
-			<Icon />
-		{/if}
-	{/snippet}
-</Pill>
+<Pill name={tag} style={namespace} {tooltip}></Pill>