frontend: Migrate to Tailwind 4.0

5 files changed, 6 insertions, 27 deletions

diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
index 60cf727..8de5e34 100644
--- a/frontend/src/lib/components/Badge.svelte
+++ b/frontend/src/lib/components/Badge.svelte
@@ -7,7 +7,7 @@
 
 {#if number > 0}
 	<span
-		class="absolute -right-[3px] -top-[6px] z-[1] rounded-sm bg-teal-600 px-1 text-xs font-semibold drop-shadow"
+		class="absolute -top-1.5 -right-1 z-1 rounded-xs bg-teal-600 px-1 text-xs font-semibold drop-shadow-sm"
 		transition:fade={fadeDefault}
 	>
 		{number}
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index 45e1662..8066b42 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -49,7 +49,7 @@
 
 <a
 	{href}
-	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30"
+	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded-sm bg-slate-900 shadow-md shadow-slate-950/30"
 	class:compact
 	class:grid-card-cover-only={coverOnly}
 	{onclick}
diff --git a/frontend/src/lib/components/Cardlet.svelte b/frontend/src/lib/components/Cardlet.svelte
index d0c0509..cfbbd58 100644
--- a/frontend/src/lib/components/Cardlet.svelte
+++ b/frontend/src/lib/components/Cardlet.svelte
@@ -14,7 +14,7 @@
 
 <button
 	type="button"
-	class="relative flex overflow-hidden rounded bg-slate-900 text-left shadow-md shadow-slate-950/20"
+	class="relative flex overflow-hidden rounded-sm bg-slate-900 text-left shadow-md shadow-slate-950/20"
 	{title}
 	{onclick}
 	{onauxclick}
diff --git a/frontend/src/lib/components/Dropdown.svelte b/frontend/src/lib/components/Dropdown.svelte
index ddd20a0..e2979e6 100644
--- a/frontend/src/lib/components/Dropdown.svelte
+++ b/frontend/src/lib/components/Dropdown.svelte
@@ -28,7 +28,7 @@
 	{@render button(() => (visible = !visible))}
 	{#if visible}
 		<div
-			class="absolute z-[1] mt-1 w-max rounded bg-slate-700 p-1 shadow-sm shadow-slate-900"
+			class="absolute z-1 mt-1 w-max rounded-sm bg-slate-700 p-1 shadow-xs shadow-slate-900"
 			transition:fade={fadeFast}
 		>
 			{@render children?.()}
diff --git a/frontend/src/lib/components/Spinner.svelte b/frontend/src/lib/components/Spinner.svelte
index 1a471a7..d85c4f4 100644
--- a/frontend/src/lib/components/Spinner.svelte
+++ b/frontend/src/lib/components/Spinner.svelte
@@ -9,28 +9,7 @@
 
 {#if show}
 	<div class="flex h-full w-full items-center justify-center">
-		<span class="spinner"></span>
+		<span class="h-16 w-16 animate-spin rounded-full border-4 border-white/80 border-b-transparent"
+		></span>
 	</div>
 {/if}
-
-<style lang="postcss">
-	.spinner {
-		width: 64px;
-		height: 64px;
-		border: 5px solid theme(colors.gray.200);
-		border-bottom-color: transparent;
-		border-radius: 50%;
-		display: inline-block;
-		box-sizing: border-box;
-		animation: rotation 1s linear infinite;
-	}
-
-	@keyframes rotation {
-		0% {
-			transform: rotate(0deg);
-		}
-		100% {
-			transform: rotate(360deg);
-		}
-	}
-</style>