events werden nun erfolgreich gespeichert, branding wird nun erfolgreich gespeichert, emotionen können nun angelegt werden. Task Ansicht im Event admin verbessert, Buttons in FAB umgewandelt und vereinheitlicht. Teilen-Link Guest PWA schicker gemacht, SynGoogleFonts ausgebaut (mit Einzel-Family-Download).

resources/js/guest/pages/GalleryPage.tsx

@@ -53,10 +53,16 @@ const normalizeImageUrl = (src?: string | null) => {
 export default function GalleryPage() {
   const { token } = useParams<{ token?: string }>();
   const { t, locale } = useTranslation();
+  const { branding } = useEventBranding();
   const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '', locale);
   const [searchParams, setSearchParams] = useSearchParams();
   const photoIdParam = searchParams.get('photoId');
   const modeParam = searchParams.get('mode');
+  const radius = branding.buttons?.radius ?? 12;
+  const buttonStyle = branding.buttons?.style ?? 'filled';
+  const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
+  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
+  const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;
   const [filter, setFilterState] = React.useState<GalleryFilter>('latest');
   const [currentPhotoIndex, setCurrentPhotoIndex] = React.useState<number | null>(null);
   const [hasOpenedPhoto, setHasOpenedPhoto] = useState(false);
@@ -178,7 +184,11 @@ export default function GalleryPage() {
     }
   }
 
-  const buildShareText = (fallback?: string) => t('share.shareText', { event: event?.name ?? fallback ?? 'Fotospiel' });
+  const buildShareText = (fallback?: string) => {
+    const eventName = event?.name ?? fallback ?? 'Fotospiel';
+    const base = t('share.shareText', 'Schau dir diesen Moment bei Fotospiel an.');
+    return `${eventName} – ${base}`;
+  };
 
   async function onShare(photo: GalleryPhoto) {
     if (!token) return;
@@ -436,83 +446,94 @@ export default function GalleryPage() {
       )}
 
       {shareSheet.photo && (
-        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm">
-          <div className="w-full max-w-md rounded-t-3xl bg-white p-4 shadow-xl dark:bg-slate-900">
-            <div className="mb-3 flex items-center justify-between">
-              <div>
-                <p className="text-xs uppercase tracking-wide text-muted-foreground">
+        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 backdrop-blur-sm">
+          <div
+            className="w-full max-w-md rounded-t-3xl border border-border bg-white/98 p-4 text-slate-900 shadow-2xl ring-1 ring-black/10 backdrop-blur-md dark:border-white/10 dark:bg-slate-900/98 dark:text-white"
+            style={{ ...(bodyFont ? { fontFamily: bodyFont } : {}), borderRadius: radius }}
+          >
+            <div className="mb-4 flex items-start justify-between gap-3">
+              <div className="space-y-1">
+                <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                   {t('share.title', 'Geteiltes Foto')}
                 </p>
-                <p className="text-sm font-semibold text-foreground">#{shareSheet.photo.id}</p>
+                <p className="text-base font-semibold text-foreground" style={headingFont ? { fontFamily: headingFont } : undefined}>
+                  #{shareSheet.photo.id}
+                </p>
+                {event?.name && <p className="text-xs text-muted-foreground line-clamp-2">{event.name}</p>}
               </div>
               <button
                 type="button"
-                className="rounded-full border border-muted px-3 py-1 text-xs font-semibold"
+                className="rounded-full border border-muted px-3 py-1 text-xs font-semibold text-foreground transition hover:bg-muted/80 dark:border-white/20 dark:text-white"
+                style={{ borderRadius: radius }}
                 onClick={closeShareSheet}
               >
                 {t('lightbox.close', 'Schließen')}
               </button>
             </div>
 
-              <div className="grid grid-cols-2 gap-3">
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
-                  onClick={() => shareNative(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <Share2 className="h-4 w-4" />
-                  <div>
-                    <div>{t('share.button', 'Teilen')}</div>
-                    <div className="text-xs text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-emerald-50 px-3 py-3 text-left text-sm font-semibold text-emerald-700 transition hover:bg-emerald-100 dark:border-emerald-900/40 dark:bg-emerald-900/20 dark:text-emerald-200"
-                  onClick={() => shareWhatsApp(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <WhatsAppIcon className="h-5 w-5" />
-                  <div>
-                    <div>{t('share.whatsapp', 'WhatsApp')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-sky-50 px-3 py-3 text-left text-sm font-semibold text-sky-700 transition hover:bg-sky-100 dark:border-sky-900/40 dark:bg-sky-900/20 dark:text-sky-200"
-                  onClick={() => shareMessages(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <MessageSquare className="h-5 w-5" />
-                  <div>
-                    <div>{t('share.imessage', 'Nachrichten')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? '…' : ''}</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  className="flex items-center gap-2 rounded-2xl border border-muted bg-muted/40 px-3 py-3 text-left text-sm font-semibold transition hover:bg-muted/60"
-                  onClick={() => copyLink(shareSheet.url)}
-                  disabled={shareSheet.loading}
-                >
-                  <Copy className="h-4 w-4" />
-                  <div>
-                    <div>{t('share.copyLink', 'Link kopieren')}</div>
-                    <div className="text-xs text-muted-foreground">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
-                  </div>
-                </button>
-              </div>
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-50 disabled:text-slate-800 disabled:opacity-100 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/10 dark:disabled:text-white/80"
+                onClick={() => shareNative(shareSheet.url)}
+                disabled={shareSheet.loading}
+                style={{ borderRadius: radius }}
+              >
+                <Share2 className="h-4 w-4" aria-hidden />
+                <div>
+                  <div>{t('share.button', 'Teilen')}</div>
+                  <div className="text-xs text-slate-600 dark:text-white/70">{t('share.title', 'Geteiltes Foto')}</div>
+                </div>
+              </button>
+              <button
+                type="button"
+                className="flex items-center gap-3 rounded-2xl border border-emerald-200 bg-emerald-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-emerald-600 disabled:opacity-60 dark:border-emerald-400/40"
+                onClick={() => shareWhatsApp(shareSheet.url)}
+                disabled={shareSheet.loading}
+                style={{ borderRadius: radius }}
+              >
+                <WhatsAppIcon className="h-5 w-5" />
+                <div>
+                  <div>{t('share.whatsapp', 'WhatsApp')}</div>
+                  <div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
+                </div>
+              </button>
+              <button
+                type="button"
+                className="flex items-center gap-3 rounded-2xl border border-sky-200 bg-sky-500/90 px-3 py-3 text-left text-sm font-semibold text-white shadow transition hover:bg-sky-600 disabled:opacity-60 dark:border-sky-400/40"
+                onClick={() => shareMessages(shareSheet.url)}
+                disabled={shareSheet.loading}
+                style={{ borderRadius: radius }}
+              >
+                <MessageSquare className="h-5 w-5" />
+                <div>
+                  <div>{t('share.imessage', 'Nachrichten')}</div>
+                  <div className="text-xs text-white/80">{shareSheet.loading ? '…' : ''}</div>
+                </div>
+              </button>
+              <button
+                type="button"
+                className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-3 py-3 text-left text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 disabled:border-slate-200 disabled:bg-slate-100 disabled:text-slate-500 dark:border-white/15 dark:bg-white/10 dark:text-white dark:disabled:bg-white/5 dark:disabled:text-white/50"
+                onClick={() => copyLink(shareSheet.url)}
+                disabled={shareSheet.loading}
+                style={{ borderRadius: radius }}
+              >
+                <Copy className="h-4 w-4" aria-hidden />
+                <div>
+                  <div className="text-slate-900 dark:text-white">{t('share.copyLink', 'Link kopieren')}</div>
+                  <div className="text-xs text-slate-600 dark:text-white/80">{shareSheet.loading ? t('share.loading', 'Lädt…') : ''}</div>
+                </div>
+              </button>
+            </div>
+
+            {shareSheet.url && (
+              <p className="mt-3 truncate text-xs text-slate-700 dark:text-white/80" title={shareSheet.url}>
+                {shareSheet.url}
+              </p>
+            )}
           </div>
         </div>
       )}
     </Page>
   );
 }
-  const { branding } = useEventBranding();
-  const radius = branding.buttons?.radius ?? 12;
-  const buttonStyle = branding.buttons?.style ?? 'filled';
-  const linkColor = branding.buttons?.linkColor ?? branding.secondaryColor;
-  const bodyFont = branding.typography?.body ?? branding.fontFamily ?? undefined;
-  const headingFont = branding.typography?.heading ?? branding.fontFamily ?? undefined;