1 files changed, 59 insertions, 16 deletions

diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index 7aa9670..98d9b5a 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -1,40 +1,83 @@
-<script lang="ts" context="module">
-	export type PillColour = 'pink' | 'blue' | 'violet' | 'amber' | 'zinc' | 'sky';
-</script>
-
 <script lang="ts">
-	export let name: string;
-	export let tooltip: string | null | undefined = undefined;
-	export let colour: PillColour = 'zinc';
+	interface Props {
+		name: string;
+		tooltip?: string | null;
+		style: string;
+		highlight?: boolean;
+	}
+
+	let { name, tooltip, style, highlight = false }: Props = $props();
 </script>
 
-<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}>
-	<slot name="icon" />
+<div class:highlight 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">
-	.pink {
+	@reference "tailwindcss/theme";
+
+	div {
+		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	}
+
+	div.highlight {
+		@apply transition-colors hover:border-zinc-600 hover:bg-zinc-500/20 hover:text-zinc-200;
+	}
+
+	.female {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
 
-	.blue {
+	.female.highlight {
+		@apply hover:border-pink-700 hover:bg-pink-600/20 hover:text-pink-100;
+	}
+
+	.male {
 		@apply border-blue-800 bg-blue-800/20 text-blue-200;
 	}
 
-	.violet {
+	.male.highlight {
+		@apply hover:border-blue-700 hover:bg-blue-600/20 hover:text-blue-100;
+	}
+
+	.trans {
 		@apply border-violet-800 bg-violet-800/20 text-violet-200;
 	}
 
-	.amber {
+	.trans.highlight {
+		@apply hover:border-violet-600 hover:bg-violet-600/20 hover:text-violet-100;
+	}
+
+	.mixed {
 		@apply border-amber-800 bg-amber-800/20 text-amber-200;
 	}
 
-	.sky {
+	.mixed.highlight {
+		@apply hover:border-amber-700 hover:bg-amber-600/20 hover:text-amber-100;
+	}
+
+	.location {
 		@apply border-sky-800 bg-sky-800/20 text-sky-200;
 	}
 
-	.zinc {
-		@apply border-zinc-700 bg-zinc-700/20 text-zinc-300;
+	.location.highlight {
+		@apply hover:border-sky-700 hover:bg-sky-600/20 hover:text-sky-100;
 	}
 </style>