upgrade to tamagui v2 and guest pwa overhaul
This commit is contained in:
@@ -50,7 +50,7 @@ export default function WelcomeEventPage() {
|
||||
onSkip={handleSkip}
|
||||
skipLabel={t('layout.jumpToDashboard', 'Jump to dashboard')}
|
||||
>
|
||||
<MobileCard space="$3">
|
||||
<MobileCard gap="$3">
|
||||
<Text fontSize="$sm" fontWeight="800">
|
||||
{t('eventSetup.step.title', 'Event setup in minutes')}
|
||||
</Text>
|
||||
@@ -60,7 +60,7 @@ export default function WelcomeEventPage() {
|
||||
'We guide you through name, date, mood, and tasks. Afterwards you can moderate photos and support guests live.',
|
||||
)}
|
||||
</Text>
|
||||
<YStack space="$2">
|
||||
<YStack gap="$2">
|
||||
<FeatureRow
|
||||
icon={Sparkles}
|
||||
title={t('eventSetup.tiles.story.title', 'Story & mood')}
|
||||
@@ -79,7 +79,7 @@ export default function WelcomeEventPage() {
|
||||
</YStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$2">
|
||||
<MobileCard gap="$2">
|
||||
<Text fontSize="$sm" fontWeight="800">
|
||||
{t('eventSetup.cta.heading', 'Ready for your first event?')}
|
||||
</Text>
|
||||
@@ -95,7 +95,7 @@ export default function WelcomeEventPage() {
|
||||
/>
|
||||
</MobileCard>
|
||||
|
||||
<YStack space="$2">
|
||||
<YStack gap="$2">
|
||||
<CTAButton
|
||||
label={t('eventSetup.actions.dashboard.button', 'Open dashboard')}
|
||||
tone="ghost"
|
||||
@@ -121,7 +121,7 @@ function FeatureRow({
|
||||
body: string;
|
||||
}) {
|
||||
return (
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<XStack
|
||||
width={34}
|
||||
height={34}
|
||||
|
||||
@@ -48,7 +48,7 @@ export default function WelcomeLandingPage() {
|
||||
onSkip={handleSkip}
|
||||
skipLabel={t('layout.jumpToDashboard', 'Jump to dashboard')}
|
||||
>
|
||||
<MobileCard space="$3">
|
||||
<MobileCard gap="$3">
|
||||
<PillBadge tone="muted">{t('hero.eyebrow', 'Your event, your stage')}</PillBadge>
|
||||
<Text fontSize="$lg" fontWeight="900">
|
||||
{t('hero.title', 'Design the next Fotospiel experience')}
|
||||
@@ -59,7 +59,7 @@ export default function WelcomeLandingPage() {
|
||||
'In just a few steps you guide guests through a magical photo journey – complete with storytelling, tasks, and a moderated gallery.',
|
||||
)}
|
||||
</Text>
|
||||
<XStack space="$2" flexWrap="wrap">
|
||||
<XStack gap="$2" flexWrap="wrap">
|
||||
<CTAButton
|
||||
label={
|
||||
shouldGoBilling
|
||||
@@ -80,7 +80,7 @@ export default function WelcomeLandingPage() {
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
|
||||
<YStack space="$3">
|
||||
<YStack gap="$3">
|
||||
<FeatureCard
|
||||
icon={ImageIcon}
|
||||
title={t('highlights.gallery.title', 'Premium guest gallery')}
|
||||
@@ -117,9 +117,9 @@ function FeatureCard({
|
||||
badge?: string;
|
||||
}) {
|
||||
return (
|
||||
<MobileCard space="$2">
|
||||
<MobileCard gap="$2">
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<XStack
|
||||
width={36}
|
||||
height={36}
|
||||
|
||||
@@ -85,7 +85,7 @@ export default function WelcomePackagesPage() {
|
||||
</Text>
|
||||
</MobileCard>
|
||||
) : (
|
||||
<YStack space="$3">
|
||||
<YStack gap="$3">
|
||||
{packages?.map((pkg) => (
|
||||
<PackageCard
|
||||
key={pkg.id}
|
||||
@@ -97,7 +97,7 @@ export default function WelcomePackagesPage() {
|
||||
</YStack>
|
||||
)}
|
||||
|
||||
<MobileCard space="$2">
|
||||
<MobileCard gap="$2">
|
||||
<Text fontSize="$sm" fontWeight="800">
|
||||
{t('packages.step.title', 'Activate the right plan')}
|
||||
</Text>
|
||||
@@ -106,7 +106,7 @@ export default function WelcomePackagesPage() {
|
||||
</Text>
|
||||
</MobileCard>
|
||||
|
||||
<XStack space="$2">
|
||||
<XStack gap="$2">
|
||||
<CTAButton
|
||||
label={t('packages.cta.summary.button', 'Continue to summary')}
|
||||
onPress={() => navigate(ADMIN_WELCOME_SUMMARY_PATH)}
|
||||
@@ -143,9 +143,9 @@ function PackageCard({
|
||||
|
||||
return (
|
||||
<Pressable onPress={onSelect}>
|
||||
<MobileCard borderColor={selected ? primary : border} space="$2">
|
||||
<MobileCard borderColor={selected ? primary : border} gap="$2">
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<XStack width={36} height={36} borderRadius={12} backgroundColor={accentSoft} alignItems="center" justifyContent="center">
|
||||
<PackageIcon size={18} color={primary} />
|
||||
</XStack>
|
||||
@@ -162,7 +162,7 @@ function PackageCard({
|
||||
{selected ? t('packages.card.selected', 'Selected') : t('packages.card.select', 'Select package')}
|
||||
</PillBadge>
|
||||
</XStack>
|
||||
<XStack flexWrap="wrap" space="$2">
|
||||
<XStack flexWrap="wrap" gap="$2">
|
||||
{badges.map((badge) => (
|
||||
<PillBadge key={badge as any} tone="muted">
|
||||
{badge as any}
|
||||
@@ -170,7 +170,7 @@ function PackageCard({
|
||||
))}
|
||||
</XStack>
|
||||
{selected ? (
|
||||
<XStack alignItems="center" space="$1">
|
||||
<XStack alignItems="center" gap="$1">
|
||||
<Check size={14} color={primary} />
|
||||
<Text fontSize="$xs" color={primary} fontWeight="700">
|
||||
{t('packages.card.selected', 'Selected')}
|
||||
|
||||
@@ -94,9 +94,9 @@ export default function WelcomeSummaryPage() {
|
||||
<CTAButton label={t('summary.footer.back', 'Back to package selection')} onPress={() => navigate(ADMIN_WELCOME_PACKAGES_PATH)} />
|
||||
</MobileCard>
|
||||
) : (
|
||||
<MobileCard space="$3">
|
||||
<MobileCard gap="$3">
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<XStack
|
||||
width={36}
|
||||
height={36}
|
||||
@@ -123,7 +123,7 @@ export default function WelcomeSummaryPage() {
|
||||
</PillBadge>
|
||||
</XStack>
|
||||
|
||||
<YStack space="$2">
|
||||
<YStack gap="$2">
|
||||
<SummaryRow
|
||||
label={t('summary.details.section.photosTitle', 'Photos & gallery')}
|
||||
value={t('summary.details.section.photosValue', {
|
||||
@@ -148,7 +148,7 @@ export default function WelcomeSummaryPage() {
|
||||
</YStack>
|
||||
|
||||
{resolvedPackage.active ? (
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
<CheckCircle2 size={18} color={ADMIN_COLORS.success} />
|
||||
<Text fontSize="$sm" color={ADMIN_COLORS.success} fontWeight="700">
|
||||
{t('summary.details.section.statusActive', 'Already purchased')}
|
||||
@@ -158,11 +158,11 @@ export default function WelcomeSummaryPage() {
|
||||
</MobileCard>
|
||||
)}
|
||||
|
||||
<MobileCard space="$2">
|
||||
<MobileCard gap="$2">
|
||||
<Text fontSize="$sm" fontWeight="800">
|
||||
{t('summary.nextStepsTitle', 'Next steps')}
|
||||
</Text>
|
||||
<YStack space="$1">
|
||||
<YStack gap="$1">
|
||||
{(t('summary.nextSteps', {
|
||||
returnObjects: true,
|
||||
defaultValue: [
|
||||
@@ -171,7 +171,7 @@ export default function WelcomeSummaryPage() {
|
||||
'Check your event slots before go-live and share your guest link.',
|
||||
],
|
||||
}) as string[]).map((item) => (
|
||||
<XStack key={item} space="$2">
|
||||
<XStack key={item} gap="$2">
|
||||
<Text fontSize="$xs" color={ADMIN_COLORS.textMuted}>
|
||||
•
|
||||
</Text>
|
||||
@@ -183,7 +183,7 @@ export default function WelcomeSummaryPage() {
|
||||
</YStack>
|
||||
</MobileCard>
|
||||
|
||||
<XStack space="$2">
|
||||
<XStack gap="$2">
|
||||
<CTAButton
|
||||
label={t('summary.cta.billing.button', 'Go to billing')}
|
||||
tone="ghost"
|
||||
|
||||
Reference in New Issue
Block a user