marcoallegretti/likwid
1
0
Fork 0
mirror of https://codeberg.org/likwid/likwid.git synced 2026-02-09 21:13:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ux: unify auth page styling

Browse source
This commit is contained in:
Marco Allegretti 2026-01-29 21:17:24 +01:00
parent e1f6b120c4
commit 8e904f247a
3 changed files with 62 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/components/ui/DesignSystemStyles.astro
View file

@ -482,6 +482,52 @@
text-align: center; text-align: center;
} }
.ui-auth-page {
display: flex;
justify-content: center;
padding: 4rem 0;
}
.ui-auth-card {
width: 100%;
max-width: 400px;
padding: 2rem;
}
.ui-auth-card h1 {
margin-bottom: 1.5rem;
text-align: center;
}
.ui-auth-card .field {
margin-bottom: 1rem;
}
.ui-auth-card label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.ui-auth-card .ui-btn {
width: 100%;
margin-top: 1rem;
}
.ui-auth-error {
color: var(--color-error);
font-size: 0.875rem;
min-height: 1.25rem;
}
.ui-auth-alt {
text-align: center;
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.ui-btn { .ui-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

91
frontend/src/pages/login.astro
View file

@ -13,23 +13,23 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
--- ---
<Layout title="Login"> <Layout title="Login">
<section class="auth-page"> <section class="ui-auth-page">
<div class="auth-card"> <div class="ui-auth-card ui-card">
<h1>Login</h1> <h1>Login</h1>
<form id="login-form"> <form id="login-form">
<div class="field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" id="username" name="username" required /> <input type="text" id="username" name="username" class="ui-input" required />
</div> </div>
<div class="field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" required /> <input type="password" id="password" name="password" class="ui-input" required />
</div> </div>
<div id="error" class="error"></div> <div id="error" class="ui-auth-error"></div>
<button type="submit">Login</button> <button type="submit" class="ui-btn ui-btn-primary">Login</button>
</form> </form>
{!publicDemoSite ? ( {!publicDemoSite ? (
<p class="alt-action"> <p class="ui-auth-alt">
Don't have an account? <a href="/register">Register</a> Don't have an account? <a href="/register">Register</a>
</p> </p>
) : null} ) : null}
@ -74,80 +74,3 @@ const publicDemoSite = isEnabled((globalThis as any).process?.env?.PUBLIC_DEMO_S
} }
}); });
</script> </script>
<style>
.auth-page {
display: flex;
justify-content: center;
padding: 4rem 0;
}
.auth-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem;
width: 100%;
max-width: 400px;
box-shadow: var(--shadow-sm);
}
h1 {
margin-bottom: 1.5rem;
text-align: center;
}
.field {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
input {
width: 100%;
border-radius: var(--radius-md);
}
button {
width: 100%;
padding: 0.75rem;
background: var(--color-primary);
color: var(--color-on-primary);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 1rem;
box-shadow: var(--shadow-sm);
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
}
button:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
button:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.error {
color: var(--color-error);
font-size: 0.875rem;
min-height: 1.25rem;
}
.alt-action {
text-align: center;
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
</style>

95
frontend/src/pages/register.astro
View file

@ -5,30 +5,30 @@ import { API_BASE as apiBase } from '../lib/api';
--- ---
<Layout title="Register"> <Layout title="Register">
<section class="auth-page"> <section class="ui-auth-page">
<div class="auth-card"> <div class="ui-auth-card ui-card">
<h1>Register</h1> <h1>Register</h1>
<form id="register-form"> <form id="register-form">
<div class="field"> <div class="field">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" id="username" name="username" required minlength="3" /> <input type="text" id="username" name="username" class="ui-input" required minlength="3" />
</div> </div>
<div class="field"> <div class="field">
<label for="email">Email</label> <label for="email">Email</label>
<input type="email" id="email" name="email" required /> <input type="email" id="email" name="email" class="ui-input" required />
</div> </div>
<div class="field"> <div class="field">
<label for="display_name">Display Name (optional)</label> <label for="display_name">Display Name (optional)</label>
<input type="text" id="display_name" name="display_name" /> <input type="text" id="display_name" name="display_name" class="ui-input" />
</div> </div>
<div class="field"> <div class="field">
<label for="password">Password</label> <label for="password">Password</label>
<input type="password" id="password" name="password" required minlength="8" /> <input type="password" id="password" name="password" class="ui-input" required minlength="8" />
</div> </div>
<div id="error" class="error"></div> <div id="error" class="ui-auth-error"></div>
<button type="submit">Create Account</button> <button type="submit" class="ui-btn ui-btn-primary">Create Account</button>
</form> </form>
<p class="alt-action"> <p class="ui-auth-alt">
Already have an account? <a href="/login">Login</a> Already have an account? <a href="/login">Login</a>
</p> </p>
</div> </div>
@ -73,80 +73,3 @@ import { API_BASE as apiBase } from '../lib/api';
} }
}); });
</script> </script>
<style>
.auth-page {
display: flex;
justify-content: center;
padding: 4rem 0;
}
.auth-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 2rem;
width: 100%;
max-width: 400px;
box-shadow: var(--shadow-sm);
}
h1 {
margin-bottom: 1.5rem;
text-align: center;
}
.field {
margin-bottom: 1rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
input {
width: 100%;
border-radius: var(--radius-md);
}
button {
width: 100%;
padding: 0.75rem;
background: var(--color-primary);
color: var(--color-on-primary);
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
margin-top: 1rem;
box-shadow: var(--shadow-sm);
transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard);
}
button:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
button:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
.error {
color: var(--color-error);
font-size: 0.875rem;
min-height: 1.25rem;
}
.alt-action {
text-align: center;
margin-top: 1.5rem;
font-size: 0.875rem;
color: var(--color-text-muted);
}
</style>