feat(forms): tighten labels and add Circle helper text
- join.vue: "Full Name" -> "Name", "Email Address" -> "Email", drop redundant "Your name" placeholder - join.vue + accept-invite.vue: unify Circle helper copy to "Where you are in your co-op journey. You can change this anytime." - join.vue: add .field-note style rule for the new helper paragraph
This commit is contained in:
parent
ad63a37a05
commit
1079e8212f
2 changed files with 11 additions and 4 deletions
|
|
@ -68,7 +68,7 @@
|
||||||
|
|
||||||
<div class="form-group full-width">
|
<div class="form-group full-width">
|
||||||
<label class="form-label">Circle</label>
|
<label class="form-label">Circle</label>
|
||||||
<p class="field-note" style="margin-bottom: 8px">Which circle fits where you are right now?</p>
|
<p class="field-note" style="margin-bottom: 8px">Where you are in your co-op journey. You can change this anytime.</p>
|
||||||
<div class="circle-radios">
|
<div class="circle-radios">
|
||||||
<div class="circle-radio community">
|
<div class="circle-radio community">
|
||||||
<input
|
<input
|
||||||
|
|
|
||||||
|
|
@ -121,18 +121,17 @@
|
||||||
<form @submit.prevent="handleSubmit">
|
<form @submit.prevent="handleSubmit">
|
||||||
<div class="form-stack">
|
<div class="form-stack">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label" for="join-name">Full Name</label>
|
<label class="form-label" for="join-name">Name</label>
|
||||||
<input
|
<input
|
||||||
id="join-name"
|
id="join-name"
|
||||||
v-model="form.name"
|
v-model="form.name"
|
||||||
class="form-input"
|
class="form-input"
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Your name"
|
|
||||||
required
|
required
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label" for="join-email">Email Address</label>
|
<label class="form-label" for="join-email">Email</label>
|
||||||
<input
|
<input
|
||||||
id="join-email"
|
id="join-email"
|
||||||
v-model="form.email"
|
v-model="form.email"
|
||||||
|
|
@ -144,6 +143,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="form-label">Circle</label>
|
<label class="form-label">Circle</label>
|
||||||
|
<p class="field-note">Where you are in your co-op journey. You can change this anytime.</p>
|
||||||
<div class="circle-radios">
|
<div class="circle-radios">
|
||||||
<div class="circle-radio community">
|
<div class="circle-radio community">
|
||||||
<input
|
<input
|
||||||
|
|
@ -627,6 +627,13 @@ onUnmounted(() => {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
.field-note {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-faint);
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
/* ---- TWO-COLUMN JOIN LAYOUT ---- */
|
/* ---- TWO-COLUMN JOIN LAYOUT ---- */
|
||||||
.join-two-col {
|
.join-two-col {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue