soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix guest PWA dark mode contrast

Browse Source
This commit is contained in:
Codex Agent
2026-01-22 15:47:26 +01:00
parent b6e0005734
commit 91bb09248a
6 changed files with 95 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/guest/pages/HomePage.tsx
View File

@@ -620,7 +620,7 @@ export function MissionActionCard({
const isExpanded = card ? expandedTaskId === card.id : false;
const isExpandable = Boolean(card && expandableTitles[card.id]);
const titleClamp = isExpanded ? '' : 'line-clamp-2 sm:line-clamp-3';
const titleClasses = `text-xl font-semibold leading-snug text-slate-900 sm:text-2xl break-words py-1 min-h-[3.75rem] sm:min-h-[4.5rem] ${titleClamp}`;
const titleClasses = `text-xl font-semibold leading-snug text-slate-900 dark:text-white sm:text-2xl break-words py-1 min-h-[3.75rem] sm:min-h-[4.5rem] ${titleClamp}`;
const titleId = card ? `task-title-${card.id}` : undefined;
const toggleExpanded = () => {
if (!card) return;
@@ -648,7 +648,7 @@ export function MissionActionCard({
<div className="absolute -left-12 -top-10 h-32 w-32 rounded-full bg-white/40 blur-3xl" />
<div className="absolute -right-10 bottom-0 h-28 w-28 rounded-full bg-white/25 blur-3xl" />
<div className="relative z-10 m-3 rounded-2xl border border-white/35 bg-white/80 px-4 py-4 shadow-lg backdrop-blur-xl">
<div className="relative z-10 m-3 rounded-2xl border border-white/35 bg-white/80 px-4 py-4 shadow-lg backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/70">
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3">
<div className="relative">
@@ -664,15 +664,15 @@ export function MissionActionCard({
>
{card?.emotion?.name ?? 'Fotoaufgabe'}
</Badge>
<div className="flex items-center gap-2 text-xs font-medium text-slate-600">
<div className="flex items-center gap-2 text-xs font-medium text-slate-600 dark:text-white/70">
<Sparkles className="h-4 w-4 text-amber-500" aria-hidden />
<span>Foto-Challenge</span>
</div>
</div>
</div>
<div className="hidden items-center gap-1 rounded-full border border-white/70 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm sm:flex">
<Timer className="mr-1 h-3.5 w-3.5 text-slate-500" aria-hidden />
<div className="hidden items-center gap-1 rounded-full border border-white/70 bg-white/80 px-3 py-1 text-xs font-semibold text-slate-700 shadow-sm dark:border-white/10 dark:bg-slate-950/70 dark:text-white/80 sm:flex">
<Timer className="mr-1 h-3.5 w-3.5 text-slate-500 dark:text-white/60" aria-hidden />
<span>ca. {durationMinutes} min</span>
</div>
</div>
@@ -701,7 +701,7 @@ export function MissionActionCard({
{card.title}
</p>
<ChevronDown
className={`h-4 w-4 text-slate-600 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
className={`h-4 w-4 text-slate-600 transition-transform dark:text-white/70 ${isExpanded ? 'rotate-180' : ''}`}
aria-hidden
/>
<span className="sr-only">Titel ein- oder ausklappen</span>
@@ -728,7 +728,7 @@ export function MissionActionCard({
<Skeleton className="mx-auto h-4 w-5/6" />
</div>
) : (
<p className="text-sm text-slate-600">Ziehe deine erste Mission oder wähle eine Stimmung.</p>
<p className="text-sm text-slate-600 dark:text-white/70">Ziehe deine erste Mission oder wähle eine Stimmung.</p>
)}
</div>
@@ -736,10 +736,10 @@ export function MissionActionCard({
<div className="mt-4 space-y-2">
<div className="flex items-center justify-between">
<div className="space-y-1 text-left">
<p className="text-sm font-semibold text-slate-800" style={titleFont}>
<p className="text-sm font-semibold text-slate-800 dark:text-white" style={titleFont}>
{card.title}
</p>
<p className="text-sm leading-relaxed text-slate-600">{card.description}</p>
<p className="text-sm leading-relaxed text-slate-600 dark:text-white/70">{card.description}</p>
</div>
</div>
</div>
@@ -770,7 +770,7 @@ export function MissionActionCard({
<Button
type="button"
variant="secondary"
className="w-full border border-slate-200 bg-white/80 text-slate-800 shadow-sm backdrop-blur"
className="w-full border border-slate-200 bg-white/80 text-slate-800 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70 dark:text-white/80"
onClick={() => {
dismissSwipeHint();
onAdvance();
@@ -805,7 +805,7 @@ export function MissionActionCard({
exit={{ opacity: 0, y: 6 }}
transition={{ duration: 0.2, ease: [0.22, 0.61, 0.36, 1] }}
>
<div className="flex items-center gap-2 rounded-full border border-white/40 bg-white/85 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-700 shadow-sm backdrop-blur">
<div className="flex items-center gap-2 rounded-full border border-white/40 bg-white/85 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-700 shadow-sm backdrop-blur dark:border-white/10 dark:bg-slate-950/70 dark:text-white/80">
<motion.span
animate={{ x: [-6, 0, -6] }}
transition={{ duration: 1.6, repeat: Infinity, ease: 'easeInOut' }}
@@ -983,7 +983,7 @@ export function UploadActionCard({
className="hidden"
onChange={onPick}
/>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-muted-foreground dark:text-white/70">
Kamera öffnen oder ein Foto aus deiner Galerie wählen. Offline möglich – wir laden später hoch.
</p>
{requiresApproval ? (