melosh/mal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: start tailwind utility migration

Browse Source
This commit is contained in:
mkelvers
2026-04-14 23:43:54 +02:00
parent b5bc9c23cc
commit dd6f49b1c9
4 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
internal/shared/ui/empty_state.templ
View File

@@ -1,9 +1,9 @@
package ui package ui
templ EmptyState(title string) { templ EmptyState(title string) {
<div class="empty-state"> <div class="empty-state py-4">
<div class="empty-state-title">{ title }</div> <div class="empty-state-title mb-2 text-base">{ title }</div>
<div class="empty-state-text"> <div class="empty-state-text text-sm text-[var(--color-text-muted)]">
{ children... } { children... }
</div> </div>
</div> </div>

8
internal/shared/ui/loading.templ
View File

@@ -1,10 +1,10 @@
package ui package ui
templ LoadingIndicator(text string) { templ LoadingIndicator(text string) {
<div class="loading-indicator"> <div class="loading-indicator inline-flex items-center gap-2 text-sm text-[var(--color-text-muted)]">
<div class="loading-dot"></div> <div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
<div class="loading-dot"></div> <div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
<div class="loading-dot"></div> <div class="loading-dot h-1.5 w-1.5 rounded-full bg-[var(--color-text-faint)]"></div>
<span>{ text }</span> <span>{ text }</span>
</div> </div>
} }

58
internal/templates/auth.templ
View File

@@ -2,28 +2,28 @@ package templates
templ Login(formError string, username string) { templ Login(formError string, username string) {
@Layout("Login", false) { @Layout("Login", false) {
<div class="auth-shell"> <div class="auth-shell w-full max-w-[560px]">
<div class="login-container"> <div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
<h2>Sign in</h2> <h2 class="m-0 text-[1.4rem]">Sign in</h2>
<p class="login-subtitle">Enter your credentials to continue.</p> <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"> <form action="/login" method="POST" class="login-form grid gap-4">
<div class="form-group"> <div class="form-group grid gap-1">
<label for="username">Username / Email</label> <label for="username">Username / Email</label>
<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/> <input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
</div> </div>
<div class="form-group"> <div class="form-group grid gap-1">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" required placeholder="Your password"/> <input type="password" id="password" name="password" required placeholder="Your password"/>
</div> </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 != "" { if formError != "" {
<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p> <p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
} }
</form> </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> Don't have an account? <a href="/register">Register</a>
</p> </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> Lost access? <a href="/recover">Recover account</a>
</p> </p>
</div> </div>
@@ -33,28 +33,28 @@ templ Login(formError string, username string) {
templ Register(formError string, username string) { templ Register(formError string, username string) {
@Layout("Register", false) { @Layout("Register", false) {
<div class="auth-shell"> <div class="auth-shell w-full max-w-[560px]">
<div class="login-container"> <div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
<h2>Register</h2> <h2 class="m-0 text-[1.4rem]">Register</h2>
<p class="login-subtitle">Create a new account to track anime.</p> <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"> <form action="/register" method="POST" class="login-form grid gap-4">
<div class="form-group"> <div class="form-group grid gap-1">
<label for="username">Username / Email</label> <label for="username">Username / Email</label>
<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/> <input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
</div> </div>
<div class="form-group"> <div class="form-group grid gap-1">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" required placeholder="Minimum 12 chars"/> <input type="password" id="password" name="password" required placeholder="Minimum 12 chars"/>
</div> </div>
<p class="auth-password-note"> <p class="auth-password-note">
Password must be at least 12 characters and include an uppercase letter, lowercase letter, number, and special character. Password must be at least 12 characters and include an uppercase letter, lowercase letter, number, and special character.
</p> </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 != "" { if formError != "" {
<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p> <p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
} }
</form> </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> Already have an account? <a href="/login">Sign in</a>
</p> </p>
</div> </div>
@@ -84,29 +84,29 @@ templ RegistrationRecoveryKey(recoveryKey string) {
templ Recover(formError string, username string, recoveryKey string) { templ Recover(formError string, username string, recoveryKey string) {
@Layout("Recover account", false) { @Layout("Recover account", false) {
<div class="auth-shell"> <div class="auth-shell w-full max-w-[560px]">
<div class="login-container"> <div class="login-container w-full mx-auto p-6 bg-[var(--color-panel)]">
<h2>Recover account</h2> <h2 class="m-0 text-[1.4rem]">Recover account</h2>
<p class="login-subtitle">Enter your username, recovery key, and a new password.</p> <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"> <form action="/recover" method="POST" class="login-form grid gap-4">
<div class="form-group"> <div class="form-group grid gap-1">
<label for="username">Username / Email</label> <label for="username">Username / Email</label>
<input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/> <input type="text" id="username" name="username" required placeholder="you@example.com" value={ username }/>
</div> </div>
<div class="form-group"> <div class="form-group grid gap-1">
<label for="recovery_key">Recovery key</label> <label for="recovery_key">Recovery key</label>
<input type="text" id="recovery_key" name="recovery_key" required value={ recoveryKey }/> <input type="text" id="recovery_key" name="recovery_key" required value={ recoveryKey }/>
</div> </div>
<div class="form-group"> <div class="form-group grid gap-1">
<label for="new_password">New password</label> <label for="new_password">New password</label>
<input type="password" id="new_password" name="new_password" required placeholder="Minimum 12 chars"/> <input type="password" id="new_password" name="new_password" required placeholder="Minimum 12 chars"/>
</div> </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 != "" { if formError != "" {
<p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p> <p class="auth-form-error" role="alert" aria-live="polite">{ formError }</p>
} }
</form> </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> Remembered your password? <a href="/login">Sign in</a>
</p> </p>
</div> </div>

10
internal/templates/not_found.templ
View File

@@ -2,11 +2,11 @@ package templates
templ NotFoundPage() { templ NotFoundPage() {
@Layout("mal - not found", false) { @Layout("mal - not found", false) {
<section class="not-found-page anime-surface"> <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">404</p> <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>Page not found</h1> <h1 class="m-0 text-[clamp(2rem,4vw,3rem)]">Page not found</h1>
<p class="empty-inline-note">The page you requested does not exist, or it was moved.</p> <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">Back to catalog</a></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> </section>
} }
} }