fix(quality): contraste teal, submit red, bottombar mobile, autocomplete touch
P1: color de texto teal -> #494F4F en 5 clases del wizard (WCAG AA). P2: try/catch en handleSubmit - error de red muestra estado error del wizard. P3: flex-wrap + column-reverse en bottombar <=480px. P4: onTouchEnd fallback en autocomplete barrio y ciudad.
This commit is contained in:
@@ -316,7 +316,7 @@ body {
|
|||||||
.barrio-autocomplete-item:hover,
|
.barrio-autocomplete-item:hover,
|
||||||
.barrio-autocomplete-item--active {
|
.barrio-autocomplete-item--active {
|
||||||
background: var(--color-primary-light);
|
background: var(--color-primary-light);
|
||||||
color: var(--color-primary);
|
color: #494F4F;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Textarea ── */
|
/* ── Textarea ── */
|
||||||
@@ -377,7 +377,7 @@ body {
|
|||||||
.btn-primary:hover { background: var(--color-primary-hover); }
|
.btn-primary:hover { background: var(--color-primary-hover); }
|
||||||
.btn-secondary {
|
.btn-secondary {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: var(--color-primary);
|
color: #494F4F;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
}
|
}
|
||||||
.btn-secondary:hover { background: var(--color-primary-light); }
|
.btn-secondary:hover { background: var(--color-primary-light); }
|
||||||
@@ -428,7 +428,7 @@ body {
|
|||||||
}
|
}
|
||||||
.summary-code {
|
.summary-code {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--color-primary);
|
color: #494F4F;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
.summary-answer {
|
.summary-answer {
|
||||||
@@ -487,7 +487,7 @@ body {
|
|||||||
.consent-checkbox-label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
|
.consent-checkbox-label:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
|
||||||
.consent-checkbox-input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
|
.consent-checkbox-input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--color-primary); cursor: pointer; }
|
||||||
.consent-checkbox-text { flex: 1; }
|
.consent-checkbox-text { flex: 1; }
|
||||||
.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
|
.consent-required-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #494F4F; background: var(--color-primary-light); padding: 1px 6px; border-radius: 4px; }
|
||||||
.consent-optional-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
|
.consent-optional-badge { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
|
||||||
.consent-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
.consent-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
|
||||||
.consent-required-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
|
.consent-required-hint { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
|
||||||
@@ -566,7 +566,7 @@ body {
|
|||||||
.wizard-section-number {
|
.wizard-section-number {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--color-primary);
|
color: #494F4F;
|
||||||
margin: 0 0 8px;
|
margin: 0 0 8px;
|
||||||
}
|
}
|
||||||
.wizard-section-title {
|
.wizard-section-title {
|
||||||
@@ -659,6 +659,7 @@ body {
|
|||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@@ -673,6 +674,11 @@ body {
|
|||||||
.wizard-prompt-text { font-size: 1.1875rem; }
|
.wizard-prompt-text { font-size: 1.1875rem; }
|
||||||
.wizard-section-title { font-size: 1.5rem; }
|
.wizard-section-title { font-size: 1.5rem; }
|
||||||
.wizard-answer-area { max-height: 400px; }
|
.wizard-answer-area { max-height: 400px; }
|
||||||
|
/* column-reverse: el botón primario (Siguiente/Enviar) queda arriba —
|
||||||
|
el pulgar llega más fácil al centro de la pantalla que a la base. */
|
||||||
|
.wizard-bottombar { flex-direction: column-reverse; }
|
||||||
|
.wizard-bottombar .btn { width: 100%; }
|
||||||
|
.wizard-bottombar-hint { order: 3; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Loading skeleton ── */
|
/* ── Loading skeleton ── */
|
||||||
|
|||||||
@@ -147,6 +147,7 @@ export function BarrioAutocompleteField({
|
|||||||
aria-selected={i === activeIdx}
|
aria-selected={i === activeIdx}
|
||||||
className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
|
className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
|
||||||
onMouseDown={() => select(barrio)}
|
onMouseDown={() => select(barrio)}
|
||||||
|
onTouchEnd={(e) => { e.preventDefault(); select(barrio) }}
|
||||||
>
|
>
|
||||||
{barrio}
|
{barrio}
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -151,6 +151,7 @@ export function CiudadSelectField({
|
|||||||
aria-selected={i === activeIdx}
|
aria-selected={i === activeIdx}
|
||||||
className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
|
className={`barrio-autocomplete-item${i === activeIdx ? ' barrio-autocomplete-item--active' : ''}`}
|
||||||
onMouseDown={() => select(ciudad)}
|
onMouseDown={() => select(ciudad)}
|
||||||
|
onTouchEnd={(e) => { e.preventDefault(); select(ciudad) }}
|
||||||
>
|
>
|
||||||
{ciudad}
|
{ciudad}
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -210,6 +210,7 @@ export function WizardForm({ survey, schema }: WizardFormProps) {
|
|||||||
})
|
})
|
||||||
|
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
|
try {
|
||||||
const result = await submitSurvey({
|
const result = await submitSurvey({
|
||||||
surveyId: survey.id,
|
surveyId: survey.id,
|
||||||
answers,
|
answers,
|
||||||
@@ -223,6 +224,12 @@ export function WizardForm({ survey, schema }: WizardFormProps) {
|
|||||||
setSubmitError(result.error)
|
setSubmitError(result.error)
|
||||||
setStage('error')
|
setStage('error')
|
||||||
}
|
}
|
||||||
|
} catch {
|
||||||
|
// Falla de red al invocar el Server Action (fetch failed) — no es un
|
||||||
|
// error que submitSurvey pueda devolver como result, hay que capturarlo acá.
|
||||||
|
setSubmitError('No pudimos enviar tu respuesta. Verificá tu conexión e intentá de nuevo.')
|
||||||
|
setStage('error')
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user