Skip to content

Fix #210: "Account löschen"-Button sichtbar machen (destructive-Variante statt Silent-No-Op-Klassen) - #227

Merged
Gree44 merged 1 commit into
stagingfrom
fix/210-lecturer-delete-visible
Jul 25, 2026
Merged

Fix #210: "Account löschen"-Button sichtbar machen (destructive-Variante statt Silent-No-Op-Klassen)#227
Gree44 merged 1 commit into
stagingfrom
fix/210-lecturer-delete-visible

Conversation

@Gree44

@Gree44 Gree44 commented Jul 24, 2026

Copy link
Copy Markdown
Contributor

Closes #210

Problem (Demo-Feedback Dozenten-Verwaltung)

  • "wo kann man die Dozenten löschen?"
  • "Dozenten löschen fehlt noch"

Das Delete-Feature ist tatsächlich vollständig implementiert: Liste → LecturerDetailDialogDeleteLecturerConfirmDialog (Namens-Bestätigung) → async Cascade-Delete. Der "Account löschen"-Button war nur praktisch unsichtbar (weiß-auf-transparent), deshalb konnte der Reviewer ihn nicht finden.

Root Cause — der wiederkehrende Gotcha dieses Repos

src/index.css ist eine handgepflegte, prebuilt Tailwind-Datei ohne Build-Step. Jede in JSX genutzte Utility-Klasse, die dort fehlt, ist ein stiller No-Op.

Beide Delete-Buttons überschrieben die Button-Variante hart per className="bg-red-600 hover:bg-red-700 text-white". Da die Standard-App-Farbe für destruktive Aktionen aber --destructive (#d4183d) ist, weicht das nicht nur optisch ab — der Button rendert im Ergebnis unauffindbar. focus:ring-red-600 ist ebenfalls ein No-Op (nicht in index.css).

Fix

Beide Buttons nutzen jetzt die reguläre destruktive-Variante-Optik (bg-destructive = #d4183d + text-white), konsistent mit allen anderen destruktiven Buttons der App:

Datei vorher nachher
LecturerDetailDialog.tsx variant="destructive" + className="bg-red-600 hover:bg-red-700 text-white" variant="destructive" (Override entfernt — Variante setzt bg + text-white selbst)
DeleteLecturerConfirmDialog.tsx className="bg-red-600 hover:bg-red-700 focus:ring-red-600" className="bg-destructive text-white hover:bg-destructive/90"

Anmerkung zum zweiten Button: AlertDialogAction hat keine variant-Prop (default = bg-primary), daher werden die destruktiven Klassen explizit gesetzt — alle drei sind in index.css vorhanden. Der No-Op focus:ring-red-600 wurde entfernt statt tote Klasse stehenzulassen.

Padding (Item 3)

Der DialogFooter (justify-between, gap-2, pt-4-Border) ist bereits sauber und nicht gedrängt — kein struktureller Padding-Eingriff nötig, um das Desktop-Layout nicht zu verändern. Die Lupen-Padding (Item 1) ist per Triage ebenfalls in Ordnung (pl-8 Input + left-2.5 Icon) und wurde nicht angefasst.

Verifikation

Playwright gegen einen lokalen Vite-Build der Worktree (Auth-Stub + gemockte /api/v1/lecturers-Fixtures):

  • "Account löschen": backgroundColor = rgb(212, 24, 61) (#d4183d), color = rgb(255, 255, 255)nicht mehr rgba(0,0,0,0). Im Screenshot ein solider roter Button unten rechts im Dialog.
  • "Endgültig löschen" (Confirm-Dialog): backgroundColor = rgb(212, 24, 61).
  • npm run build grün.

…lent-No-Op in prebuilt index.css)

Demo-Feedback zur Dozenten-Verwaltung: "wo kann man die Dozenten löschen?"
Das Delete-Feature ist vollständig implementiert (Liste → LecturerDetailDialog
→ DeleteLecturerConfirmDialog mit Namens-Bestätigung → async Cascade-Delete),
aber der "Account löschen"-Button war praktisch unsichtbar.

Root cause: Beide Buttons überschrieben die Variante per
`className="bg-red-600 hover:bg-red-700 text-white"`. `src/index.css` ist eine
handgepflegte, prebuilt Tailwind-Datei OHNE Build-Step — jede in JSX genutzte
Klasse, die dort fehlt, ist ein stiller No-Op. Damit rendert der Button
weiß-auf-transparent und ist nicht auffindbar. (Anmerkung: #221 hat .bg-red-600/700
zwar nachträglich ergänzt, aber die App-Standardfarbe für destruktive Aktionen ist
--destructive = #d4183d.)

Fix: beide Buttons nutzen jetzt die Standard-`variant="destructive"`-Optik
(bg-destructive/#d4183d + text-white), konsistent mit allen anderen
destruktiven Buttons der App:
- LecturerDetailDialog: bg-red-600-Override entfernt, variant="destructive"
  setzt bg + text-white bereits selbst.
- DeleteLecturerConfirmDialog: AlertDialogAction hat keine variant-Prop
  (default = bg-primary), daher explizit bg-destructive text-white
  hover:bg-destructive/90 (alle in index.css vorhanden). Der No-Op
  focus:ring-red-600 wurde entfernt.

Visuell verifiziert (Playwright): "Account löschen" backgroundColor
rgb(212,24,61) / color rgb(255,255,255); "Endgültig löschen" rgb(212,24,61).
npm run build grün.
@RamonaKT
RamonaKT self-requested a review July 24, 2026 21:44
@Gree44
Gree44 merged commit db4e3e8 into staging Jul 25, 2026
6 checks passed
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