Skip to content

Commit e19cc7b

Browse files
gemmadlougemmadlou
committed
refactor: apply consistent formatting and update branding in authentication pages
1 parent 2fdeab4 commit e19cc7b

File tree

5 files changed

+254
-215
lines changed

5 files changed

+254
-215
lines changed

‎src/app/auth_layout.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
{% block extra_head %}{% endblock %}
44

55
{% block content %}
6-
<div class="relative min-h-screen w-full flex flex-col overflow-x-hidden bg-background-light text-charcoal min-h-screen grid-bg">
6+
<div class="relative min-h-screen w-full flex flex-col overflow-x-hidden bg-gray-150 text-charcoal grid-bg font-sans">
7+
{% block auth_container %}
78
<div class="flex-1 flex items-center justify-center px-6 py-12">
89
<div class="w-full max-w-md">
910
{% block auth_content %}{% endblock %}
1011
</div>
1112
</div>
13+
{% endblock %}
1214
</div>
1315
{% endblock %}

‎src/app/features/auth/login.html‎

Lines changed: 100 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,110 @@
22

33
{% block title %}Log In · {{ app_name }}{% endblock %}
44

5-
{% block auth_content %}
6-
<div class="rounded-xl bg-white border border-border-subtle shadow-lg shadow-slate-200/50 p-6">
7-
<div class="text-center mb-6">
8-
<div class="inline-flex items-center justify-center size-12 rounded-xl bg-primary/10 mb-4">
9-
<span class="material-symbols-outlined !text-2xl text-primary">login</span>
10-
</div>
11-
<h1 class="text-3xl font-bold text-charcoal tracking-tight">Welcome Back</h1>
12-
<p class="text-slate-500 mt-2">Sign in to your account</p>
13-
</div>
5+
{% block auth_container %}
6+
<main class="flex-1 flex flex-col justify-center w-full max-w-6xl mx-auto px-6 py-12 lg:py-16">
7+
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
8+
<header class="mb-12 lg:mb-0 text-center lg:text-left">
9+
<div class="inline-flex flex-col items-center lg:items-start max-w-full">
10+
<h1 class="text-7xl font-bold tracking-tight text-gray-900 max-w-full text-center lg:text-left">Welcome
11+
Back</h1>
12+
<p class="mt-6 text-base lg:text-lg text-slate-500 font-normal">Sign in to your account</p>
13+
<div class="bg-slate-500/50 h-1 w-14 rounded-full mt-8" aria-hidden="true"></div>
14+
</div>
15+
</header>
1416

15-
{% if error != "" %}
16-
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-4">
17-
{{ error }}
18-
{% if resend_verification_url != "" %}
19-
<p class="mt-2">
20-
Didn't receive it? <a href="{{ resend_verification_url }}" class="text-primary hover:text-primary/80 underline">Resend verification email</a>
21-
</p>
22-
{% endif %}
23-
</div>
24-
{% endif %}
17+
<div
18+
class="rounded-2xl bg-white border border-black/6 shadow-card p-8 lg:p-10 max-w-2xl mx-auto lg:mx-0 lg:ml-auto w-full">
19+
{% if error != "" %}
20+
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl mb-6">
21+
{{ error }}
22+
{% if resend_verification_url != "" %}
23+
<p class="mt-2">
24+
Didn't receive it? <a href="{{ resend_verification_url }}"
25+
class="text-primary hover:text-primary/80 underline">Resend verification email</a>
26+
</p>
27+
{% endif %}
28+
</div>
29+
{% endif %}
2530

26-
<form method="post" class="space-y-5">
27-
{% if next != "" %}
28-
<input type="hidden" name="next" value="{{ next }}">
29-
{% endif %}
30-
<div>
31-
<label for="email" class="block text-sm font-medium text-charcoal mb-1.5">Email</label>
32-
<input
33-
type="email"
34-
id="email"
35-
name="email"
36-
value="{{ email }}"
37-
required
38-
class="form-input w-full px-4 py-2.5 border border-border-subtle rounded-xl focus:ring-2 focus:ring-primary/30 focus:border-primary"
39-
>
40-
</div>
31+
<form method="post" class="space-y-6">
32+
{% if next != "" %}
33+
<input type="hidden" name="next" value="{{ next }}">
34+
{% endif %}
4135

42-
<div>
43-
<label for="password" class="block text-sm font-medium text-charcoal mb-1.5">Password</label>
44-
<input
45-
type="password"
46-
id="password"
47-
name="password"
48-
required
49-
class="form-input w-full px-4 py-2.5 border border-border-subtle rounded-xl focus:ring-2 focus:ring-primary/30 focus:border-primary"
50-
>
51-
<div class="mt-2 text-right">
52-
<a href="/forgot-password" class="text-sm text-primary hover:text-primary/80">Forgot password?</a>
53-
</div>
54-
</div>
36+
<div>
37+
<label for="email"
38+
class="text-2xs font-semibold uppercase tracking-overline text-gray-400 block mb-2">Email</label>
39+
<div
40+
class="flex items-center gap-3 rounded-xl bg-gray-100 px-4 py-1 focus-within:ring-2 focus-within:ring-primary/20">
41+
<span class="material-symbols-outlined text-slate-400 !text-xl shrink-0"
42+
aria-hidden="true">mail</span>
43+
<input id="email" name="email" type="email" value="{{ email }}" required autocomplete="off"
44+
placeholder="[email protected]"
45+
class="form-input flex-1 w-full border-0 bg-transparent py-3 shadow-none focus:ring-0 focus:border-transparent rounded-lg placeholder:text-slate-400">
46+
</div>
47+
</div>
48+
49+
<div>
50+
<div class="flex items-center justify-between gap-3 mb-2">
51+
<label for="password"
52+
class="text-2xs font-semibold uppercase tracking-overline text-gray-400">Password</label>
53+
<a href="/forgot-password"
54+
class="text-sm font-medium text-primary hover:text-primary/80 shrink-0">Forgot password?</a>
55+
</div>
56+
<div
57+
class="flex items-center gap-2 rounded-xl bg-gray-100 px-4 py-1 focus-within:ring-2 focus-within:ring-primary/20">
58+
<span class="material-symbols-outlined text-slate-400 !text-xl shrink-0"
59+
aria-hidden="true">lock</span>
60+
<input id="password" name="password" type="password" required autocomplete="off"
61+
placeholder="••••••••"
62+
class="form-input flex-1 w-full border-0 bg-transparent py-3 pr-2 shadow-none focus:ring-0 focus:border-transparent rounded-lg placeholder:text-slate-400">
63+
<button type="button" id="poc-login-toggle-pw"
64+
class="border-0 m-0 p-1 bg-transparent shadow-none cursor-pointer text-gray-400 rounded-md inline-flex items-center justify-center leading-none appearance-none outline-none shrink-0 hover:text-gray-500 focus-visible:outline-blue-soft"
65+
aria-label="Show password">
66+
<span class="material-symbols-outlined !text-xl" aria-hidden="true">visibility</span>
67+
</button>
68+
</div>
69+
</div>
70+
71+
<button type="submit"
72+
class="w-full border-0 cursor-pointer transition bg-gradient-blue-cta shadow-blue-cta text-white py-4 px-6 rounded-full text-base font-semibold outline-none hover:brightness-105 focus-visible:shadow-submit">
73+
Log In
74+
</button>
75+
</form>
5576

56-
<button
57-
type="submit"
58-
class="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white py-2.5 px-4 rounded-xl font-semibold shadow-lg shadow-primary/20 transition-all"
59-
>
60-
<span class="material-symbols-outlined !text-lg">login</span>
61-
Log In
62-
</button>
63-
</form>
77+
<p class="mt-8 text-center text-sm text-slate-500">
78+
Don't have an account?
79+
<a href="/signup" class="font-semibold text-primary hover:text-primary/80">Sign up</a>
80+
</p>
81+
</div>
82+
</div>
83+
</main>
6484

65-
<p class="mt-6 text-center text-sm text-slate-500">
66-
Don't have an account?
67-
<a href="/signup" class="text-primary hover:text-primary/80 font-medium">Sign up</a>
85+
<footer class="mt-auto shrink-0 py-8 px-6 text-center text-10 tracking-overline uppercase text-gray-400">
86+
<p class="mb-4">
87+
© 2026 Boardtask. All rights reserved.
6888
</p>
69-
</div>
89+
<nav class="flex flex-wrap justify-center items-center gap-x-8 gap-y-2" aria-label="Legal">
90+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Privacy policy</a>
91+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Terms of service</a>
92+
<a href="#" class="text-inherit no-underline hover:text-blue-600">Support</a>
93+
</nav>
94+
</footer>
95+
96+
<script>
97+
(function () {
98+
var btn = document.getElementById('poc-login-toggle-pw');
99+
var input = document.getElementById('password');
100+
if (!btn || !input) return;
101+
var icon = btn.querySelector('.material-symbols-outlined');
102+
btn.addEventListener('click', function () {
103+
var show = input.type === 'password';
104+
input.type = show ? 'text' : 'password';
105+
btn.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
106+
btn.setAttribute('aria-pressed', show ? 'true' : 'false');
107+
if (icon) icon.textContent = show ? 'visibility_off' : 'visibility';
108+
});
109+
})();
110+
</script>
70111
{% endblock %}

‎styleguide/poc-forgot-password.html‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,34 @@
44
Same shell as poc-signup.html / poc-login.html. Not wired to real auth — demo form only.
55
-->
66
<html lang="en">
7+
78
<head>
89
<meta charset="UTF-8">
910
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1011
<title>Styleguide — Forgot Password (POC)</title>
11-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap">
12-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
12+
<link rel="stylesheet"
13+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap">
14+
<link rel="stylesheet"
15+
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200">
1316
<link rel="stylesheet" href="/css/app.css">
1417
</head>
18+
1519
<body class="min-h-screen bg-gray-150 grid-bg text-charcoal flex flex-col font-sans">
1620

1721
<main class="flex-1 flex flex-col justify-center w-full max-w-6xl mx-auto px-6 py-12 lg:py-16">
1822
<div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
1923
<header class="mb-12 lg:mb-0 text-center lg:text-left">
2024
<div class="inline-flex flex-col items-center lg:items-start max-w-full">
21-
<h1 class="text-7xl font-bold tracking-tight text-gray-900 max-w-full text-center lg:text-left">Reset your password</h1>
22-
<p class="mt-6 text-base lg:text-lg text-slate-500 font-normal">We'll email you a link to get back into your workspace</p>
25+
<h1 class="text-7xl font-bold tracking-tight text-gray-900 max-w-full text-center lg:text-left">Reset your
26+
password</h1>
27+
<p class="mt-6 text-base lg:text-lg text-slate-500 font-normal">We'll email you a link to get back into your
28+
workspace</p>
2329
<div class="bg-slate-500/50 h-1 w-14 rounded-full mt-8" aria-hidden="true"></div>
2430
</div>
2531
</header>
2632

27-
<div class="rounded-2xl bg-white border border-black/6 shadow-card p-8 lg:p-10 max-w-2xl mx-auto lg:mx-0 lg:ml-auto w-full">
33+
<div
34+
class="rounded-2xl bg-white border border-black/6 shadow-card p-8 lg:p-10 max-w-2xl mx-auto lg:mx-0 lg:ml-auto w-full">
2835
<div class="text-center mb-6">
2936
<div class="inline-flex items-center justify-center size-12 rounded-full bg-primary/10 mb-4">
3037
<span class="material-symbols-outlined !text-2xl text-primary" aria-hidden="true">lock_reset</span>
@@ -33,23 +40,21 @@ <h2 class="text-3xl font-bold text-charcoal tracking-tight">Forgot Password</h2>
3340
<p class="text-slate-500 mt-2">Enter your email and we'll send you a reset link</p>
3441
</div>
3542

36-
<form action="#" method="post" onsubmit="return false;" class="space-y-6" aria-label="Demo forgot password (does not submit)">
43+
<form action="#" method="post" onsubmit="return false;" class="space-y-6"
44+
aria-label="Demo forgot password (does not submit)">
3745
<div>
38-
<label for="poc-forgot-email" class="text-2xs font-semibold uppercase tracking-overline text-gray-400 block mb-2">Email</label>
39-
<div class="flex items-center gap-3 rounded-xl bg-gray-100 px-4 py-1 focus-within:ring-2 focus-within:ring-primary/20">
46+
<label for="poc-forgot-email"
47+
class="text-2xs font-semibold uppercase tracking-overline text-gray-400 block mb-2">Email</label>
48+
<div
49+
class="flex items-center gap-3 rounded-xl bg-gray-100 px-4 py-1 focus-within:ring-2 focus-within:ring-primary/20">
4050
<span class="material-symbols-outlined text-slate-400 !text-xl shrink-0" aria-hidden="true">mail</span>
41-
<input
42-
id="poc-forgot-email"
43-
name="email"
44-
type="email"
45-
autocomplete="email"
46-
placeholder="[email protected]"
47-
class="form-input flex-1 w-full border-0 bg-transparent py-3 shadow-none focus:ring-0 focus:border-transparent rounded-lg placeholder:text-slate-400"
48-
>
51+
<input id="poc-forgot-email" name="email" type="email" autocomplete="email" placeholder="[email protected]"
52+
class="form-input flex-1 w-full border-0 bg-transparent py-3 shadow-none focus:ring-0 focus:border-transparent rounded-lg placeholder:text-slate-400">
4953
</div>
5054
</div>
5155

52-
<button type="button" class="w-full flex items-center justify-center gap-2 border-0 cursor-pointer transition bg-gradient-blue-cta shadow-blue-cta text-white py-4 px-6 rounded-full text-base font-semibold outline-none hover:brightness-105 focus-visible:shadow-submit">
56+
<button type="button"
57+
class="w-full flex items-center justify-center gap-2 border-0 cursor-pointer transition bg-gradient-blue-cta shadow-blue-cta text-white py-4 px-6 rounded-full text-base font-semibold outline-none hover:brightness-105 focus-visible:shadow-submit">
5358
<span class="material-symbols-outlined !text-xl shrink-0" aria-hidden="true">send</span>
5459
Send reset link
5560
</button>
@@ -65,7 +70,7 @@ <h2 class="text-3xl font-bold text-charcoal tracking-tight">Forgot Password</h2>
6570

6671
<footer class="mt-auto shrink-0 py-8 px-6 text-center text-10 tracking-overline uppercase text-gray-400">
6772
<p class="mb-4">
68-
© 2026 Board Task. All rights reserved.
73+
© 2026 Boardtask. All rights reserved.
6974
</p>
7075
<nav class="flex flex-wrap justify-center items-center gap-x-8 gap-y-2" aria-label="Legal">
7176
<a href="#" class="text-inherit no-underline hover:text-blue-600">Privacy policy</a>
@@ -78,4 +83,5 @@ <h2 class="text-3xl font-bold text-charcoal tracking-tight">Forgot Password</h2>
7883
</footer>
7984

8085
</body>
81-
</html>
86+
87+
</html>

0 commit comments

Comments
 (0)