WIP PWA for Grain
feat: improve login dialog styling and add legal links
- Update dialog to use elevated surface background with larger border radius
- Add close button with grain-icon and escape key support
- Add links to Terms and Privacy Policy
- Adjust input background to match dialog surface
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+51
-6
+51
-6
src/components/molecules/grain-login-dialog.js
+51
-6
src/components/molecules/grain-login-dialog.js
···
1
1
import { LitElement, html, css } from 'lit';
2
+
import '../atoms/grain-icon.js';
2
3
3
4
export class GrainLoginDialog extends LitElement {
4
5
static properties = {
···
24
25
z-index: 1000;
25
26
}
26
27
.dialog {
27
-
background: var(--color-bg-primary);
28
-
border-radius: 12px;
28
+
position: relative;
29
+
background: var(--color-bg-elevated);
30
+
border-radius: 20px;
29
31
padding: var(--space-lg);
30
32
width: 90%;
31
33
max-width: 320px;
32
34
}
35
+
.close-button {
36
+
position: absolute;
37
+
top: var(--space-sm);
38
+
right: var(--space-sm);
39
+
background: none;
40
+
border: none;
41
+
padding: var(--space-xs);
42
+
cursor: pointer;
43
+
color: var(--color-text-secondary);
44
+
display: flex;
45
+
align-items: center;
46
+
justify-content: center;
47
+
}
48
+
.close-button:hover {
49
+
color: var(--color-text-primary);
50
+
}
33
51
h2 {
34
52
margin: 0 0 var(--space-md);
35
53
font-size: var(--font-size-md);
···
40
58
display: block;
41
59
width: 100%;
42
60
margin-bottom: var(--space-md);
43
-
--qs-input-bg: #000000;
61
+
--qs-input-bg: #1a1a1a;
44
62
--qs-input-border: #363636;
45
63
--qs-input-border-focus: #fafafa;
46
64
--qs-input-text: #fafafa;
···
53
71
--qs-handle-color: #fafafa;
54
72
--qs-name-color: #a8a8a8;
55
73
}
56
-
button {
74
+
button[type="submit"] {
57
75
width: 100%;
58
76
padding: var(--space-sm);
59
77
background: var(--color-text-primary);
···
64
82
font-weight: var(--font-weight-semibold);
65
83
cursor: pointer;
66
84
}
67
-
button:disabled {
85
+
button[type="submit"]:disabled {
68
86
opacity: 0.5;
69
87
cursor: not-allowed;
70
88
}
89
+
.legal-links {
90
+
margin-top: var(--space-md);
91
+
text-align: center;
92
+
font-size: var(--font-size-xs);
93
+
color: var(--color-text-secondary);
94
+
}
95
+
.legal-links a {
96
+
color: var(--color-text-secondary);
97
+
text-decoration: underline;
98
+
}
99
+
.legal-links a:hover {
100
+
color: var(--color-text-primary);
101
+
}
71
102
`;
72
103
73
104
constructor() {
···
81
112
this._open = true;
82
113
this._handle = '';
83
114
this._loading = false;
115
+
document.addEventListener('keydown', this.#handleKeyDown);
84
116
}
85
117
86
118
close() {
87
119
this._open = false;
88
120
this._handle = '';
89
121
this._loading = false;
122
+
document.removeEventListener('keydown', this.#handleKeyDown);
90
123
}
91
124
125
+
#handleKeyDown = (e) => {
126
+
if (e.key === 'Escape') {
127
+
this.close();
128
+
}
129
+
};
130
+
92
131
#handleSubmit(e) {
93
132
e.preventDefault();
94
133
if (!this._handle.trim()) return;
···
111
150
return html`
112
151
<div class="overlay" @click=${this.#handleOverlayClick}>
113
152
<form class="dialog" @submit=${this.#handleSubmit}>
114
-
<h2>Login with Bluesky</h2>
153
+
<button type="button" class="close-button" @click=${() => this.close()}>
154
+
<grain-icon name="close" size="20"></grain-icon>
155
+
</button>
156
+
<h2>Login with AT Protocol</h2>
115
157
<qs-actor-autocomplete
116
158
name="handle"
117
159
placeholder="handle.bsky.social"
···
123
165
<button type="submit" ?disabled=${this._loading || !this._handle.trim()}>
124
166
${this._loading ? 'Redirecting...' : 'Continue'}
125
167
</button>
168
+
<p class="legal-links">
169
+
By continuing, you agree to our <a href="/legal/terms">Terms</a> and <a href="/legal/privacy">Privacy Policy</a>
170
+
</p>
126
171
</form>
127
172
</div>
128
173
`;