From dd6f49b1c98e01cc1eafad2e58238c31ab92a853 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Tue, 14 Apr 2026 23:43:54 +0200
Subject: [PATCH] ui: start tailwind utility migration

---
 internal/shared/ui/empty_state.templ |  6 +--
 internal/shared/ui/loading.templ     |  8 ++--
 internal/templates/auth.templ        | 58 ++++++++++++++--------------
 internal/templates/not_found.templ   | 10 ++---
 4 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/internal/shared/ui/empty_state.templ b/internal/shared/ui/empty_state.templ
index ab0dd4b..6aa9f82 100644
--- a/internal/shared/ui/empty_state.templ
+++ b/internal/shared/ui/empty_state.templ
@@ -1,9 +1,9 @@
 package ui
 
 templ EmptyState(title string) {
-	<div class="empty-state">
-		<div class="empty-state-title">{ title }</div>
-		<div class="empty-state-text">
+	<div class="empty-state py-4">
+		<div class="empty-state-title mb-2 text-base">{ title }</div>
+		<div class="empty-state-text text-sm text-[var(--color-text-muted)]">
 			{ children... }
 		</div>
 	</div>
diff --git a/internal/shared/ui/loading.templ b/internal/shared/ui/loading.templ
index 3dac5a5..2ac6439 100644
--- a/internal/shared/ui/loading.templ
+++ b/internal/shared/ui/loading.templ
@@ -1,10 +1,10 @@
 package ui
 
 templ LoadingIndicator(text string) {
-	<div class="loading-indicator">
-		<div class="loading-dot"></div>
-		<div class="loading-dot"></div>
-		<div class="loading-dot"></div>
+	<div class="loading-indicator inline-flex items-center gap-2 text-sm text-[var(--color-text-muted)]">
+		<div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
+		<div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
+		<div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
 		<span>{ text }</span>
 	</div>
 }
diff --git a/internal/templates/auth.templ b/internal/templates/auth.templ
index edd44ed..12086ef 100644
--- a/internal/templates/auth.templ
+++ b/internal/templates/auth.templ
@@ -2,28 +2,28 @@ package templates
 
 templ Login(formError string, username string) {
 	@Layout("Login", false) {
-		<div class="auth-shell">
-			<div class="login-container">
-				<h2>Sign in</h2>
-				<p class="login-subtitle">Enter your credentials to continue.</p>
-				<form action="/login" method="POST" class="login-form">
-					<div class="form-group">
+		<div class="auth-shell w-full max-w-[560px]">
+			<div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
+				<h2 class="m-0 text-[1.4rem]">Sign in</h2>
+				<p class="login-subtitle my-3 mb-5 text-[0.95rem] text-[var(--color-text-muted)]">Enter your credentials to continue.</p>
+				<form action="/login" method="POST" class="login-form grid gap-4">
+					<div class="form-group grid gap-1">
 						<label for="username">Username / Email</label>
 						<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
 					</div>
-					<div class="form-group">
+					<div class="form-group grid gap-1">
 						<label for="password">Password</label>
 						<input type="password" id="password" name="password" required placeholder="Your password"/>
 					</div>
-					<button type="submit" class="login-button">Sign in</button>
+					<button type="submit" class="login-button h-10 border-0 bg-[var(--color-accent)] text-[var(--text-on-accent)] text-[0.9rem] font-semibold cursor-pointer hover:brightness-95">Sign in</button>
 					if formError != "" {
 						<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
 					}
 				</form>
-				<p class="auth-switch-row">
+				<p class="auth-switch-row mt-5 mb-0 text-center text-[0.9rem] text-[var(--color-text-muted)]">
 					Don't have an account? <a href="/register">Register</a>
 				</p>
-				<p class="auth-switch-row">
+				<p class="auth-switch-row mt-5 mb-0 text-center text-[0.9rem] text-[var(--color-text-muted)]">
 					Lost access? <a href="/recover">Recover account</a>
 				</p>
 			</div>
@@ -33,28 +33,28 @@ templ Login(formError string, username string) {
 
 templ Register(formError string, username string) {
 	@Layout("Register", false) {
-		<div class="auth-shell">
-			<div class="login-container">
-				<h2>Register</h2>
-				<p class="login-subtitle">Create a new account to track anime.</p>
-				<form action="/register" method="POST" class="login-form">
-					<div class="form-group">
+		<div class="auth-shell w-full max-w-[560px]">
+			<div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
+				<h2 class="m-0 text-[1.4rem]">Register</h2>
+				<p class="login-subtitle my-3 mb-5 text-[0.95rem] text-[var(--color-text-muted)]">Create a new account to track anime.</p>
+				<form action="/register" method="POST" class="login-form grid gap-4">
+					<div class="form-group grid gap-1">
 						<label for="username">Username / Email</label>
 						<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
 					</div>
-					<div class="form-group">
+					<div class="form-group grid gap-1">
 						<label for="password">Password</label>
 						<input type="password" id="password" name="password" required placeholder="Minimum 12 chars"/>
 					</div>
 					<p class="auth-password-note">
 						Password must be at least 12 characters and include an uppercase letter, lowercase letter, number, and special character.
 					</p>
-					<button type="submit" class="login-button">Create account</button>
+					<button type="submit" class="login-button h-10 border-0 bg-[var(--color-accent)] text-[var(--text-on-accent)] text-[0.9rem] font-semibold cursor-pointer hover:brightness-95">Create account</button>
 					if formError != "" {
 						<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
 					}
 				</form>
-				<p class="auth-switch-row">
+				<p class="auth-switch-row mt-5 mb-0 text-center text-[0.9rem] text-[var(--color-text-muted)]">
 					Already have an account? <a href="/login">Sign in</a>
 				</p>
 			</div>
@@ -84,29 +84,29 @@ templ RegistrationRecoveryKey(recoveryKey string) {
 
 templ Recover(formError string, username string, recoveryKey string) {
 	@Layout("Recover account", false) {
-		<div class="auth-shell">
-			<div class="login-container">
-				<h2>Recover account</h2>
-				<p class="login-subtitle">Enter your username, recovery key, and a new password.</p>
-				<form action="/recover" method="POST" class="login-form">
-					<div class="form-group">
+		<div class="auth-shell w-full max-w-[560px]">
+			<div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
+				<h2 class="m-0 text-[1.4rem]">Recover account</h2>
+				<p class="login-subtitle my-3 mb-5 text-[0.95rem] text-[var(--color-text-muted)]">Enter your username, recovery key, and a new password.</p>
+				<form action="/recover" method="POST" class="login-form grid gap-4">
+					<div class="form-group grid gap-1">
 						<label for="username">Username / Email</label>
 						<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
 					</div>
-					<div class="form-group">
+					<div class="form-group grid gap-1">
 						<label for="recovery_key">Recovery key</label>
 						<input type="text" id="recovery_key" name="recovery_key" required value={ recoveryKey }/>
 					</div>
-					<div class="form-group">
+					<div class="form-group grid gap-1">
 						<label for="new_password">New password</label>
 						<input type="password" id="new_password" name="new_password" required placeholder="Minimum 12 chars"/>
 					</div>
-					<button type="submit" class="login-button">Reset password</button>
+					<button type="submit" class="login-button h-10 border-0 bg-[var(--color-accent)] text-[var(--text-on-accent)] text-[0.9rem] font-semibold cursor-pointer hover:brightness-95">Reset password</button>
 					if formError != "" {
 						<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
 					}
 				</form>
-				<p class="auth-switch-row">
+				<p class="auth-switch-row mt-5 mb-0 text-center text-[0.9rem] text-[var(--color-text-muted)]">
 					Remembered your password? <a href="/login">Sign in</a>
 				</p>
 			</div>
diff --git a/internal/templates/not_found.templ b/internal/templates/not_found.templ
index f318b22..8eb548f 100644
--- a/internal/templates/not_found.templ
+++ b/internal/templates/not_found.templ
@@ -2,11 +2,11 @@ package templates
 
 templ NotFoundPage() {
 	@Layout("mal - not found", false) {
-		<section class="not-found-page anime-surface">
-			<p class="not-found-code">404</p>
-			<h1>Page not found</h1>
-			<p class="empty-inline-note">The page you requested does not exist, or it was moved.</p>
-			<p><a href="/" class="not-found-link">Back to catalog</a></p>
+		<section class="not-found-page anime-surface w-[min(780px,calc(100vw-(1.5rem*2)))] min-h-[72vh] mx-auto py-8 px-7 grid content-center justify-items-center gap-3 text-center">
+			<p class="not-found-code m-0 text-[clamp(4rem,15vw,10rem)] tracking-[0.04em] leading-[0.9] text-[var(--color-text-muted)]">404</p>
+			<h1 class="m-0 text-[clamp(2rem,4vw,3rem)]">Page not found</h1>
+			<p class="empty-inline-note text-[var(--color-text-muted)]">The page you requested does not exist, or it was moved.</p>
+			<p><a href="/" class="not-found-link text-[var(--color-accent)] no-underline text-[1.05rem] hover:underline">Back to catalog</a></p>
 		</section>
 	}
 }