WIP PWA for Grain
refactor: use grain-form-field in grain-edit-profile
+5
-23
+5
-23
src/components/pages/grain-edit-profile.js
+5
-23
src/components/pages/grain-edit-profile.js
···
8
8
import '../atoms/grain-input.js';
9
9
import '../atoms/grain-textarea.js';
10
10
import '../atoms/grain-avatar.js';
11
+
import '../molecules/grain-form-field.js';
11
12
12
13
const UPLOAD_BLOB_MUTATION = `
13
14
mutation UploadBlob($data: String!, $mimeType: String!) {
···
129
130
}
130
131
input[type="file"] {
131
132
display: none;
132
-
}
133
-
.form-group {
134
-
margin-bottom: var(--space-md);
135
-
}
136
-
.form-group label {
137
-
display: block;
138
-
font-size: var(--font-size-sm);
139
-
font-weight: var(--font-weight-medium);
140
-
color: var(--color-text-primary);
141
-
margin-bottom: var(--space-xs);
142
-
}
143
-
.char-count {
144
-
font-size: var(--font-size-xs);
145
-
color: var(--color-text-secondary);
146
-
text-align: right;
147
-
margin-top: 4px;
148
133
}
149
134
.save-section {
150
135
padding: var(--space-md) var(--space-sm);
···
369
354
>
370
355
</div>
371
356
372
-
<div class="form-group">
373
-
<label>Display Name</label>
357
+
<grain-form-field label="Display Name" .value=${this._displayName} .maxlength=${64}>
374
358
<grain-input
375
359
placeholder="Display name"
376
360
.value=${this._displayName}
377
361
@input=${this.#handleDisplayNameChange}
378
362
></grain-input>
379
-
<div class="char-count">${this._displayName.length}/64</div>
380
-
</div>
363
+
</grain-form-field>
381
364
382
-
<div class="form-group">
383
-
<label>Bio</label>
365
+
<grain-form-field label="Bio" .value=${this._description} .maxlength=${256}>
384
366
<grain-textarea
385
367
placeholder="Tell us about yourself"
386
368
.value=${this._description}
387
369
.maxlength=${256}
388
370
@input=${this.#handleDescriptionChange}
389
371
></grain-textarea>
390
-
</div>
372
+
</grain-form-field>
391
373
</div>
392
374
393
375
<div class="save-section">