From bcae21a8dee949303749d81052a154be5e7daf01 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Wed, 26 Feb 2025 16:47:22 +0100
Subject: frontend: Allow Pills to be highlighted when hovered

This gives better visual feedback, especially in the ComicDetails tab
where clicking on a Pill is a separate action.
---
 frontend/src/lib/tabs/ComicDetails.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'frontend/src/lib/tabs')

diff --git a/frontend/src/lib/tabs/ComicDetails.svelte b/frontend/src/lib/tabs/ComicDetails.svelte
index 9992c82..3f9090e 100644
--- a/frontend/src/lib/tabs/ComicDetails.svelte
+++ b/frontend/src/lib/tabs/ComicDetails.svelte
@@ -87,7 +87,7 @@
 		<Section title="Artists">
 			{#each comic.artists as { id, name } (id)}
 				<a href={filterFor('artists', id)}>
-					<Pill {name} style="artist" />
+					<Pill highlight {name} style="artist" />
 				</a>
 			{/each}
 		</Section>
@@ -96,7 +96,7 @@
 		<Section title="Circles">
 			{#each comic.circles as { id, name } (id)}
 				<a href={filterFor('circles', id)}>
-					<Pill {name} style="circle" />
+					<Pill highlight {name} style="circle" />
 				</a>
 			{/each}
 		</Section>
@@ -105,7 +105,7 @@
 		<Section title="Characters">
 			{#each comic.characters as { id, name } (id)}
 				<a href={filterFor('characters', id)}>
-					<Pill {name} style="character" />
+					<Pill highlight {name} style="character" />
 				</a>
 			{/each}
 		</Section>
@@ -114,7 +114,7 @@
 		<Section title="Worlds">
 			{#each comic.worlds as { id, name } (id)}
 				<a href={filterFor('worlds', id)}>
-					<Pill {name} style="world" />
+					<Pill highlight {name} style="world" />
 				</a>
 			{/each}
 		</Section>
@@ -123,7 +123,7 @@
 		<Section title="Tags">
 			{#each comic.tags as { id, name, description } (id)}
 				<a href={filterFor('tags', id)}>
-					<TagPill {name} {description} />
+					<TagPill highlight {name} {description} />
 				</a>
 			{/each}
 		</Section>
-- 
cgit v1.2.3-2-gb3c3