Update guest v2 branding and theming
This commit is contained in:
@@ -10,7 +10,8 @@ import { QrCode, ArrowRight } from 'lucide-react';
|
||||
import { useTranslation } from '@/guest/i18n/useTranslation';
|
||||
import { fetchEvent } from '../services/eventApi';
|
||||
import { readGuestName } from '../context/GuestIdentityContext';
|
||||
import { useAppearance } from '@/hooks/use-appearance';
|
||||
import EventLogo from '../components/EventLogo';
|
||||
import { useGuestThemeVariant } from '../lib/guestTheme';
|
||||
|
||||
const qrConfig = { fps: 10, qrbox: { width: 240, height: 240 } } as const;
|
||||
|
||||
@@ -24,14 +25,14 @@ export default function LandingScreen() {
|
||||
const [errorKey, setErrorKey] = React.useState<LandingErrorKey | null>(null);
|
||||
const [isScanning, setIsScanning] = React.useState(false);
|
||||
const scannerRef = React.useRef<Html5Qrcode | null>(null);
|
||||
const { resolved } = useAppearance();
|
||||
const isDark = resolved === 'dark';
|
||||
const { isDark } = useGuestThemeVariant();
|
||||
const cardBackground = isDark ? 'rgba(15, 23, 42, 0.7)' : 'rgba(255, 255, 255, 0.9)';
|
||||
const cardBorder = isDark ? 'rgba(148, 163, 184, 0.2)' : 'rgba(15, 23, 42, 0.12)';
|
||||
const primaryText = isDark ? '#F8FAFF' : '#0F172A';
|
||||
const mutedText = isDark ? 'rgba(226, 232, 240, 0.78)' : 'rgba(15, 23, 42, 0.6)';
|
||||
const mutedButton = isDark ? 'rgba(248, 250, 255, 0.1)' : 'rgba(15, 23, 42, 0.06)';
|
||||
const mutedButtonBorder = isDark ? 'rgba(248, 250, 255, 0.2)' : 'rgba(15, 23, 42, 0.12)';
|
||||
const brandName = 'Fotospiel';
|
||||
|
||||
const errorMessage = errorKey ? t(`landing.errors.${errorKey}`) : null;
|
||||
|
||||
@@ -159,6 +160,12 @@ export default function LandingScreen() {
|
||||
return (
|
||||
<YStack flex={1} minHeight="100vh" padding="$5" justifyContent="center" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
|
||||
<YStack gap="$5" maxWidth={480} width="100%" alignSelf="center">
|
||||
<XStack alignItems="center" gap="$3">
|
||||
<EventLogo name={brandName} size="s" />
|
||||
<Text fontSize="$5" fontFamily="$display" fontWeight="$8" color={primaryText}>
|
||||
{brandName}
|
||||
</Text>
|
||||
</XStack>
|
||||
<YStack gap="$2">
|
||||
<Text fontSize="$8" fontFamily="$display" fontWeight="$9" color={primaryText}>
|
||||
{t('landing.pageTitle')}
|
||||
|
||||
Reference in New Issue
Block a user