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

Update guest v2 branding and theming

Browse Source
This commit is contained in:
Codex Agent
2026-02-03 15:18:44 +01:00
parent a0ef90e13a
commit a820ef2e8b
57 changed files with 1416 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
resources/js/guest-v2/screens/PublicGalleryScreen.tsx
View File

@@ -3,17 +3,18 @@ import { useParams } from 'react-router-dom';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { Image as ImageIcon, Download, Share2 } from 'lucide-react';
import { Download, Share2 } from 'lucide-react';
import { Sheet } from '@tamagui/sheet';
import StandaloneShell from '../components/StandaloneShell';
import SurfaceCard from '../components/SurfaceCard';
import EventLogo from '../components/EventLogo';
import { fetchGalleryMeta, fetchGalleryPhotos, type GalleryMetaResponse, type GalleryPhotoResource } from '@/guest/services/galleryApi';
import { createPhotoShareLink } from '@/guest/services/photosApi';
import { useTranslation } from '@/guest/i18n/useTranslation';
import { EventBrandingProvider } from '@/guest/context/EventBrandingContext';
import { mapEventBranding } from '../lib/eventBranding';
import { BrandingTheme } from '../lib/brandingTheme';
import { useAppearance } from '@/hooks/use-appearance';
import { useGuestThemeVariant } from '../lib/guestTheme';
type GalleryState = {
meta: GalleryMetaResponse | null;
@@ -40,9 +41,6 @@ const PAGE_SIZE = 30;
export default function PublicGalleryScreen() {
const { token } = useParams<{ token: string }>();
const { t, locale } = useTranslation();
const { resolved } = useAppearance();
const isDark = resolved === 'dark';
const mutedText = isDark ? 'rgba(248, 250, 252, 0.7)' : 'rgba(15, 23, 42, 0.65)';
const [state, setState] = React.useState<GalleryState>(INITIAL_STATE);
const [selected, setSelected] = React.useState<GalleryPhotoResource | null>(null);
const [shareLoading, setShareLoading] = React.useState(false);
@@ -50,16 +48,10 @@ export default function PublicGalleryScreen() {
const branding = React.useMemo(() => {
if (!state.meta) return null;
const raw = state.meta.branding ?? null;
return mapEventBranding({
primary_color: raw.primary_color,
secondary_color: raw.secondary_color,
background_color: raw.background_color,
surface_color: raw.surface_color ?? raw.background_color,
palette: raw.palette ?? undefined,
mode: raw.mode ?? 'auto',
} as any);
return mapEventBranding(state.meta.branding ?? null);
}, [state.meta]);
const { isDark } = useGuestThemeVariant(branding);
const mutedText = isDark ? 'rgba(248, 250, 252, 0.7)' : 'rgba(15, 23, 42, 0.65)';
const loadInitial = React.useCallback(async () => {
if (!token) return;
@@ -117,15 +109,17 @@ export default function PublicGalleryScreen() {
const content = (
<StandaloneShell>
<SurfaceCard glow>
<XStack alignItems="center" gap="$2">
<ImageIcon size={20} color={isDark ? '#F8FAFF' : '#0F172A'} />
<Text fontSize="$4" fontWeight="$7">
{t('galleryPublic.title')}
</Text>
<XStack alignItems="center" gap="$3">
<EventLogo name={state.meta?.event?.name ?? t('galleryPage.hero.eventFallback', 'Event')} size="s" />
<YStack gap="$1">
<Text fontSize="$4" fontWeight="$7">
{t('galleryPublic.title')}
</Text>
<Text fontSize="$2" color={mutedText}>
{state.meta?.event?.name ?? t('galleryPage.hero.eventFallback', 'Event')}
</Text>
</YStack>
</XStack>
<Text fontSize="$2" color={mutedText} marginTop="$2">
{state.meta?.event?.name ?? t('galleryPage.hero.eventFallback', 'Event')}
</Text>
</SurfaceCard>
{state.loading ? (