Skip to content

feat: rediseño de resultados y lobby, y modo oscuro - #18

Merged
MrRevillod merged 5 commits into
mainfrom
feat/rediseno-modo-oscuro
Oct 19, 2026
Merged

MrRevillod merged 5 commits into
mainfrom
feat/rediseno-modo-oscuro

Conversation

@vcntttt

@vcntttt vcntttt commented Oct 19, 2026 •

Copy link
Copy Markdown
Member

Depende de #17; se revisa después de ella.

Resumen

Cuatro commits, revisables por separado:

  1. Rediseño de resultados y lobby. La revisión del intento adopta el diseño de marcador: estado y puntaje en una etiqueta por pregunta, respuesta propia y correcta marcadas en la opción. El lobby se alinea con el resto de las páginas, la tabla de certeza usa la superficie estándar y .panel-muted / .stat-card pierden el degradado.
  2. Modo oscuro. Paleta oscura sobre los mismos tokens (:root.dark), con tokens nuevos (--lift, --wash, --shade, --press, --scrim, --focus) en lugar de mezclas con white / black. El tema se guarda en localStorage, se aplica antes del primer pintado y se alterna desde la cabecera. Incluye Markdown con tokens y toasts con el tema.
  3. Checkboxes y radios con los tokens. En oscuro el navegador rellenaba de gris los controles nativos sin marcar; ahora se dibujan con --paper-soft, --line-strong y --accent. La propiedad --check cambia el color marcado: el editor de bancos la usa para el verde de la respuesta correcta.
  4. Favicon según el tema del navegador. Un solo favicon.svg cambia de trazo con prefers-color-scheme y se actualiza sin recargar, así que se ve bien en pestañas claras y oscuras. Los PNG claro y oscuro quedan de respaldo para navegadores sin favicon SVG.

Capturas

Revisión de resultados antes:

resultados-antes-escritorio

Después, con el diseño de marcador:

resultados-marcador-escritorio

resultados-marcador-mobile

Modo oscuro en la lista de cuestionarios:

cuestionarios-oscuro-escritorio

Revisión de resultados en oscuro, escritorio y móvil:

resultados-oscuro-escritorio

resultados-oscuro-mobile

Componentes de edición de #17 en oscuro:

editar-cuestionario-oscuro-escritorio

editor-banco-oscuro-mobile

Lobby del estudiante antes, en móvil:

lobby-antes-mobile

Después, en oscuro y en claro:

lobby-oscuro-mobile

lobby-claro-mobile

Checkboxes y radios en oscuro y en claro:

radios-oscuro-mobile

radios-claro-desktop

checkbox-oscuro-desktop

checkbox-claro-desktop

Favicon con el navegador en claro y en oscuro (pestaña simulada a 16 px y ampliado):

favicon-tema-claro

favicon-tema-oscuro

Verificación

  • svelte-check y eslint sin errores.
  • Manual en el stack local con datos de prueba (curso, banco con justificaciones, quiz publicado con un intento y quiz de certeza sin iniciar): el tema persiste al recargar, se aplica antes del primer pintado y el botón de la cabecera lo alterna.

Límites

  • El estilo de checkboxes y radios es global; los checkboxes de «Nuevo cuestionario» y del selector de bancos no se revisaron visualmente.
  • El favicon se comprobó en Chromium emulando el tema; en Firefox y Safari no se probó en una pestaña real.

@vcntttt
vcntttt added this pull request to stack #19 October 19, 2026 18:55
@vcntttt
vcntttt marked this pull request as ready for review October 19, 2026 19:09
@vcntttt
vcntttt marked this pull request as draft October 19, 2026 19:23
@vcntttt
vcntttt marked this pull request as ready for review October 19, 2026 19:30
La revisión del intento adopta el diseño de marcador, el lobby se alinea con el resto de las páginas y los paneles atenuados y las tarjetas de estadística pierden el degradado.
Paleta oscura sobre los mismos tokens, tema persistido y aplicado antes del primer pintado, y un botón para alternarlo en la cabecera.
En modo oscuro el navegador rellenaba de gris los controles nativos sin marcar. Ahora usan los tokens de papel, línea y acento; --check permite el verde de la respuesta correcta en el editor de bancos.
@MrRevillod
MrRevillod force-pushed the feat/rediseno-modo-oscuro branch from 19b69eb to 0ed04e2 Compare October 19, 2026 19:30
Un solo SVG cambia de trazo con prefers-color-scheme y se actualiza sin recargar. Los PNG claro y oscuro quedan como respaldo para navegadores sin favicon SVG.
Base automatically changed from feat/edicion-bancos-quizzes to main October 19, 2026 20:38
…curo

# Conflicts:
#	apps/client/src/lib/banks/components/BankQuestionsEditor.svelte
@MrRevillod
MrRevillod merged commit ff67dfd into main Oct 19, 2026
1 check passed
@MrRevillod
MrRevillod deleted the feat/rediseno-modo-oscuro branch October 19, 2026 20:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants