photo visibility for demo events, hardened the demo mode. fixed dark/light mode toggle and notification bell toggle. fixed photo upload page sizes & header visibility.

resources/js/guest/pages/HomePage.tsx

@@ -12,7 +12,7 @@ import GalleryPreview from '../components/GalleryPreview';
 import { useGuestIdentity } from '../context/GuestIdentityContext';
 import { useEventData } from '../hooks/useEventData';
 import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
-import { ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
+import { Camera, ChevronDown, Sparkles, UploadCloud, X, RefreshCw, Timer } from 'lucide-react';
 import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
 import { useEventBranding } from '../context/EventBrandingContext';
 import type { EventBranding } from '../types/event-branding';
@@ -453,7 +453,7 @@ type MissionPreview = {
   emotion?: EmotionIdentity | null;
 };
 
-function MissionActionCard({
+export function MissionActionCard({
   token,
   mission,
   loading,
@@ -676,8 +676,10 @@ function MissionActionCard({
                     ? `/e/${encodeURIComponent(token)}/upload?task=${card.id}`
                     : `/e/${encodeURIComponent(token)}/tasks`
                 }
+                className="inline-flex items-center justify-center gap-2"
               >
-                Aufgabe starten
+                <Camera className="h-4 w-4" aria-hidden />
+                <span>Aufgabe starten</span>
               </Link>
             </Button>
             <Button
@@ -703,9 +705,9 @@ function MissionActionCard({
   const initialSlide = Math.min(initialIndex, Math.max(0, slides.length - 1));
 
   return (
-    <Card className="border-0 bg-transparent shadow-none" style={{ fontFamily: bodyFont }}>
+    <Card className="border-0 bg-transparent py-2 shadow-none" style={{ fontFamily: bodyFont }}>
       <CardContent className="px-0 py-0">
-        <div className="relative min-h-[280px] px-2">
+        <div className="relative min-h-[240px] px-2 sm:min-h-[260px]" data-testid="mission-card-stack">
           <Swiper
             effect="cards"
             modules={[EffectCards]}
@@ -733,7 +735,7 @@ function MissionActionCard({
               lastSlideIndexRef.current = realIndex;
               onIndexChange(realIndex, slides.length);
             }}
-            className="!pb-2"
+            className="!pb-1"
             style={{ paddingLeft: '0.25rem', paddingRight: '0.25rem' }}
           >
             {slides.map((card, index) => {
@@ -769,7 +771,7 @@ function EmotionActionCard() {
   );
 }
 
-function UploadActionCard({
+export function UploadActionCard({
   token,
   accentColor,
   secondaryAccent,
@@ -829,14 +831,14 @@ function UploadActionCard({
 
   return (
     <Card
-      className="overflow-hidden border border-muted/30 shadow-sm"
+      className="gap-2 overflow-hidden border border-muted/30 bg-[var(--guest-surface)] py-2 shadow-sm dark:border-slate-800/60 dark:bg-slate-950/70"
+      data-testid="upload-action-card"
       style={{
-        background: 'var(--guest-surface)',
         borderRadius: `${radius}px`,
         fontFamily: bodyFont,
       }}
     >
-      <CardContent className="flex flex-col gap-2 py-[4px]">
+      <CardContent className="flex flex-col gap-1.5 px-4 py-2">
         <Button
           type="button"
           className="text-white justify-center"