Update guest v2 branding and theming
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { YStack } from '@tamagui/stacks';
|
||||
import { YStack, XStack } from '@tamagui/stacks';
|
||||
import { SizableText as Text } from '@tamagui/text';
|
||||
import { Button } from '@tamagui/button';
|
||||
import { Input } from '@tamagui/input';
|
||||
@@ -8,7 +8,8 @@ import { Card } from '@tamagui/card';
|
||||
import { useTranslation } from '@/guest/i18n/useTranslation';
|
||||
import { useEventData } from '../context/EventDataContext';
|
||||
import { useGuestIdentity } from '../context/GuestIdentityContext';
|
||||
import { useAppearance } from '@/hooks/use-appearance';
|
||||
import EventLogo from '../components/EventLogo';
|
||||
import { useGuestThemeVariant } from '../lib/guestTheme';
|
||||
|
||||
export default function ProfileSetupScreen() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
@@ -16,8 +17,7 @@ export default function ProfileSetupScreen() {
|
||||
const { t } = useTranslation();
|
||||
const { event, status } = useEventData();
|
||||
const identity = useGuestIdentity();
|
||||
const { resolved } = useAppearance();
|
||||
const isDark = resolved === 'dark';
|
||||
const { isDark } = useGuestThemeVariant();
|
||||
const primaryText = isDark ? '#F8FAFF' : '#0F172A';
|
||||
const mutedText = isDark ? 'rgba(226, 232, 240, 0.7)' : 'rgba(15, 23, 42, 0.6)';
|
||||
const cardBackground = isDark ? 'rgba(15, 23, 42, 0.75)' : 'rgba(255, 255, 255, 0.9)';
|
||||
@@ -67,9 +67,12 @@ export default function ProfileSetupScreen() {
|
||||
<YStack flex={1} minHeight="100vh" padding="$5" justifyContent="center" backgroundColor={isDark ? '#0B101E' : '#FFF8F5'}>
|
||||
<YStack gap="$5" maxWidth={420} width="100%" alignSelf="center">
|
||||
<YStack gap="$2">
|
||||
<Text fontSize="$7" fontFamily="$display" fontWeight="$9" color={primaryText}>
|
||||
{event.name}
|
||||
</Text>
|
||||
<XStack alignItems="center" gap="$3">
|
||||
<EventLogo name={event.name} icon={event.type?.icon ?? null} size="m" />
|
||||
<Text fontSize="$7" fontFamily="$display" fontWeight="$9" color={primaryText}>
|
||||
{event.name}
|
||||
</Text>
|
||||
</XStack>
|
||||
<Text color={mutedText}>
|
||||
{t('profileSetup.card.description')}
|
||||
</Text>
|
||||
|
||||
Reference in New Issue
Block a user