Dark mode: white-on-white panels on submission-draft editor ("Kein Projekt zugeordnet" + "Vorschau") #138

Open
opened 2026-05-26 15:48:15 +00:00 by mAi · 2 comments
Collaborator

Repro

Open any submission-draft editor in dark mode. Two panels render with white backgrounds + no contrast:

  1. "Kein Projekt zugeordnet — alle Variablen werden manuell befüllt. Projekt zuweisen…" — the project-empty notice / link.
  2. "Vorschau / Read-only Vorschau — finale Bearbeitung in Word." — the preview-mode notice.

Both show as the default light surface (background: #fff or similar) instead of the dark-themed counterpart.

Likely cause

Missing [data-theme="dark"] overrides for whatever class names these panels use. Same shape as the t-paliad-291 fix earlier today (six lime-chip selectors); identical pattern.

Fix

  • frontend/src/submission-draft.tsx — find the panel components and their CSS class names.
  • frontend/src/styles/global.css (or the submission-draft-specific stylesheet) — add [data-theme="dark"] rules with proper dark-surface colors and text contrast. Reuse existing dark-mode tokens (e.g. --bg-panel-dark, --text-strong-dark) — don't hardcode hex.
  • Verify both panels match the contrast level of other dark-mode panels in the same editor (the form fields above + below already look right).

Acceptance

  1. Open /submissions/drafts/<id> in dark mode → both notices have dark background + readable text.
  2. Switch to light mode → unchanged from today.
  3. No regression on the form fields, buttons, or other panels on the same page.
  4. bun run build clean.

Pure frontend

No backend, no DB, no migration. Single CSS/TSX patch.

## Repro Open any submission-draft editor in dark mode. Two panels render with white backgrounds + no contrast: 1. **"Kein Projekt zugeordnet — alle Variablen werden manuell befüllt. Projekt zuweisen…"** — the project-empty notice / link. 2. **"Vorschau / Read-only Vorschau — finale Bearbeitung in Word."** — the preview-mode notice. Both show as the default light surface (`background: #fff` or similar) instead of the dark-themed counterpart. ## Likely cause Missing `[data-theme="dark"]` overrides for whatever class names these panels use. Same shape as the t-paliad-291 fix earlier today (six lime-chip selectors); identical pattern. ## Fix - `frontend/src/submission-draft.tsx` — find the panel components and their CSS class names. - `frontend/src/styles/global.css` (or the submission-draft-specific stylesheet) — add `[data-theme="dark"]` rules with proper dark-surface colors and text contrast. Reuse existing dark-mode tokens (e.g. `--bg-panel-dark`, `--text-strong-dark`) — don't hardcode hex. - Verify both panels match the contrast level of other dark-mode panels in the same editor (the form fields above + below already look right). ## Acceptance 1. Open `/submissions/drafts/<id>` in dark mode → both notices have dark background + readable text. 2. Switch to light mode → unchanged from today. 3. No regression on the form fields, buttons, or other panels on the same page. 4. `bun run build` clean. ## Pure frontend No backend, no DB, no migration. Single CSS/TSX patch.
mAi self-assigned this 2026-05-26 15:48:15 +00:00
Author
Collaborator

Additional dark-mode pill

(m, 2026-05-26 17:54) Project timeline view (/projects/{id} or the timeline tab — wherever "Vorhersage" section renders): proceeding-type pills like de.null.bpatg.berufung show grey background + grey font in dark mode. No contrast.

Likely the same shape as the other two panels — a CSS rule that only sets the light-mode colors, missing the [data-theme="dark"] counterpart. Search .proceeding-pill, .timeline-pill, .vorhersage, or similar selectors near the project-detail timeline view.

Folding this in here so the fixer hits all three dark-mode regressions on one branch.

## Additional dark-mode pill (m, 2026-05-26 17:54) Project timeline view (`/projects/{id}` or the timeline tab — wherever "Vorhersage" section renders): proceeding-type pills like `de.null.bpatg.berufung` show **grey background + grey font** in dark mode. No contrast. Likely the same shape as the other two panels — a CSS rule that only sets the light-mode colors, missing the `[data-theme="dark"]` counterpart. Search `.proceeding-pill`, `.timeline-pill`, `.vorhersage`, or similar selectors near the project-detail timeline view. Folding this in here so the fixer hits all three dark-mode regressions on one branch.
Author
Collaborator

Fourth dark-mode panel

(m, 2026-05-26 17:58) Submission editor's manual-party-add form (the Manuell / Aus DB übernehmen / Name / Rolle / Beklagte / Vertreter:in (optional) / Hinzufügen / Abbrechen dialog) — same white-on-white in dark mode. This is the multi-party add UI from t-paliad-277.

All four bugs collected in this issue:

  1. "Kein Projekt zugeordnet…" panel
  2. "Vorschau / Read-only Vorschau…" panel
  3. Project timeline "Vorhersage" pills
  4. Manual-party-add form (this one)

Fixer should sweep all four selectors in one pass.

## Fourth dark-mode panel (m, 2026-05-26 17:58) Submission editor's manual-party-add form (the *Manuell / Aus DB übernehmen / Name / Rolle / Beklagte / Vertreter:in (optional) / Hinzufügen / Abbrechen* dialog) — same white-on-white in dark mode. This is the multi-party add UI from t-paliad-277. All four bugs collected in this issue: 1. "Kein Projekt zugeordnet…" panel 2. "Vorschau / Read-only Vorschau…" panel 3. Project timeline "Vorhersage" pills 4. Manual-party-add form (this one) Fixer should sweep all four selectors in one pass.
mAi added the
done
label 2026-05-26 16:07:51 +00:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#138
No description provided.