Yumder · Match- & Joker-Overlay

Spec-Mockup für die Sieger-Ansicht (MatchOverlay) und den Joker-Reveal. Halbtransparente Flächen entfernen, klare Farben verwenden.

1 · Match-Overlay

VORHER

Runner-up-Zeile · bg-white/5 + backdrop-blur-sm

Trattoria Roma
2 Ja-Stimmen
Hauptstr. 1, Karlsruhe
NACHHER

Runner-up-Zeile · bg-neutral-800

Trattoria Roma
2 Ja-Stimmen
Hauptstr. 1, Karlsruhe
VORHER

Cuisine-Pillen

Italienisch Pizza

Teilen-Button (Ghost)

Teilen

Symbol-Badge

Symbolbild
NACHHER

Cuisine-Pillen

Italienisch Pizza

Teilen-Button (Ghost)

Teilen

Symbol-Badge

Symbolbild
  • Pillen: bg-yumder-pink/90 · /80 → bg-yumder-pink
  • Teilen: border-white/30 + hover:bg-white/10 → border-white (deckend)
  • Symbol-Badge: bg-black/60 → bg-black
FORM-FRAGE · „MATCH!"-Stempel

aktuell: nur Kontur (transparenter Grund, farbiger Rand)

Match!
OPTION · voll eingefärbt

deckende Farbe, weißer Text

Match!
  • Kontur border-yumder-pink text-yumder-pink → bg-yumder-pink text-white
  • Joker analog: bg-amber-400 text-black

2 · Joker-Reveal

PRÜFERGEBNIS

Der Joker-Reveal ist bereits deckend – keine Änderung nötig.

  • Karten-Vorderseite: bg-gradient-to-br from-amber-400 via-yellow-500 to-amber-600 (deckend, farbig)
  • Karten-Rückseite: Bild mit from-black/90-Verlauf (nur Lesbarkeits-Schatten am Text, kein transparenter Button)
  • Scrim bg-black/80 backdrop-blur-md bleibt bewusst transluzent (Abdunklung, kein Button).

3 · Gruppenmanagement-Popup (Session-Info-Sheet)

VORHER

Teilnehmer-Zeile · bg-neutral-800/40

AM
Anna M.
0 / 3 Vetos
RP
Robert P.
1 / 3 Vetos

Session-Code-Pille

TISCH AB12CD
NACHHER

Teilnehmer-Zeile · bg-neutral-800

AM
Anna M.
0 / 3 Vetos
RP
Robert P.
1 / 3 Vetos

Session-Code-Pille

TISCH AB12CD
  • Sheet-Panel: bg-neutral-900/95 → bg-neutral-900
  • Code-Pille: bg-neutral-900/50 → bg-neutral-900
  • Teilnehmer-Zeile: bg-neutral-800/40 · hover /60 → bg-neutral-800 · hover /700
  • Avatare: bg-yumder-teal/20 border-yumder-teal/30 → bg-yumder-teal text-neutral-900 (pink analog)
HINWEIS

Bereits deckend, keine Änderung nötig:

  • Schließen-Button: bg-neutral-800 hover:bg-neutral-700
  • Einladen-Button: bg-yumder-teal text-neutral-900
  • Verlassen-Button: bg-neutral-900 border-yumder-pink text-yumder-pink
  • Host-Avatar: bg-gradient-to-tr from-yumder-pink via-pink-400 to-yumder-teal (deckend).
  • Sprachwahl (LanguageSwitch) bleibt wie besprochen unverändert.
Zusammenfassung