upgrade to tamagui v2 and guest pwa overhaul
This commit is contained in:
@@ -191,15 +191,15 @@ export default function MobileEventPhotoboothPage() {
|
||||
) : null}
|
||||
|
||||
{loading ? (
|
||||
<YStack space="$2">
|
||||
<YStack gap="$2">
|
||||
{Array.from({ length: 3 }).map((_, idx) => (
|
||||
<SkeletonCard key={`ph-skel-${idx}`} height={110} />
|
||||
))}
|
||||
</YStack>
|
||||
) : (
|
||||
<YStack space="$2">
|
||||
<MobileCard space="$3">
|
||||
<YStack space="$1">
|
||||
<YStack gap="$2">
|
||||
<MobileCard gap="$3">
|
||||
<YStack gap="$1">
|
||||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||||
{t('photobooth.steps.activate.title', '1. Photobooth aktivieren')}
|
||||
</Text>
|
||||
@@ -207,7 +207,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
{t('photobooth.steps.activate.description', 'Schalte den Upload-Zugang fuer dieses Event frei.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<XStack alignItems="center" justifyContent="space-between" space="$3" flexWrap="wrap">
|
||||
<XStack alignItems="center" justifyContent="space-between" gap="$3" flexWrap="wrap">
|
||||
<PillBadge tone={isActive ? 'success' : 'warning'}>
|
||||
{isActive ? t('photobooth.status.badgeActive', 'ACTIVE') : t('photobooth.status.badgeInactive', 'INACTIVE')}
|
||||
</PillBadge>
|
||||
@@ -215,7 +215,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
{t('photobooth.mode.active', 'Current: {{mode}}', { mode: modeLabel })}
|
||||
</Text>
|
||||
</XStack>
|
||||
<XStack space="$2" marginTop="$2">
|
||||
<XStack gap="$2" marginTop="$2">
|
||||
<CTAButton
|
||||
label={isActive ? t('photobooth.actions.disable', 'Disable uploads') : t('photobooth.actions.enable', 'Enable uploads')}
|
||||
onPress={() => (isActive ? handleDisable() : handleEnable())}
|
||||
@@ -237,8 +237,8 @@ export default function MobileEventPhotoboothPage() {
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<YStack space="$1">
|
||||
<MobileCard gap="$3">
|
||||
<YStack gap="$1">
|
||||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||||
{t('photobooth.steps.download.title', '2. Uploader App herunterladen')}
|
||||
</Text>
|
||||
@@ -249,7 +249,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
)}
|
||||
</Text>
|
||||
</YStack>
|
||||
<XStack space="$2" marginTop="$2" flexWrap="wrap">
|
||||
<XStack gap="$2" marginTop="$2" flexWrap="wrap">
|
||||
<CTAButton
|
||||
label={t('photobooth.uploaderDownload.actionWindows', 'Uploader herunterladen (Windows)')}
|
||||
onPress={() => {
|
||||
@@ -278,7 +278,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
fullWidth={false}
|
||||
/>
|
||||
</XStack>
|
||||
<XStack space="$2" marginTop="$2">
|
||||
<XStack gap="$2" marginTop="$2">
|
||||
<CTAButton
|
||||
label={
|
||||
sendingEmail
|
||||
@@ -294,8 +294,8 @@ export default function MobileEventPhotoboothPage() {
|
||||
</XStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<YStack space="$1">
|
||||
<MobileCard gap="$3">
|
||||
<YStack gap="$1">
|
||||
<Text fontSize="$sm" fontWeight="800" color={text}>
|
||||
{t('photobooth.steps.access.title', '3. Verbindungscode erstellen')}
|
||||
</Text>
|
||||
@@ -303,7 +303,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
{t('photobooth.steps.access.description', 'Der Code verbindet die App sicher mit deinem Event.')}
|
||||
</Text>
|
||||
</YStack>
|
||||
<XStack space="$2" marginTop="$2">
|
||||
<XStack gap="$2" marginTop="$2">
|
||||
<CTAButton
|
||||
label={
|
||||
connectLoading
|
||||
@@ -326,7 +326,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
fullWidth={false}
|
||||
/>
|
||||
</XStack>
|
||||
<YStack space="$2" marginTop="$2">
|
||||
<YStack gap="$2" marginTop="$2">
|
||||
{connectCode ? (
|
||||
<CredentialRow label={t('photobooth.connectCode.label', 'Connect code')} value={connectCode} border={border} />
|
||||
) : null}
|
||||
@@ -338,7 +338,7 @@ export default function MobileEventPhotoboothPage() {
|
||||
</Text>
|
||||
) : null}
|
||||
{showCredentials ? (
|
||||
<YStack space="$1">
|
||||
<YStack gap="$1">
|
||||
<CredentialRow label={t('photobooth.credentials.postUrl', 'Upload URL')} value={uploadUrl ?? '—'} border={border} />
|
||||
<CredentialRow label={t('photobooth.credentials.username', 'Username')} value={username ?? '—'} border={border} />
|
||||
<CredentialRow label={t('photobooth.credentials.password', 'Password')} value={password ?? '—'} border={border} masked />
|
||||
@@ -354,11 +354,11 @@ export default function MobileEventPhotoboothPage() {
|
||||
</YStack>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$2">
|
||||
<MobileCard gap="$2">
|
||||
<Text fontSize="$sm" fontWeight="700" color={text}>
|
||||
{t('photobooth.status.heading', 'Status')}
|
||||
</Text>
|
||||
<YStack space="$1">
|
||||
<YStack gap="$1">
|
||||
<StatusRow icon={<ShieldCheck size={16} color={text} />} label={t('photobooth.status.mode', 'Mode')} value={modeLabel} />
|
||||
<StatusRow
|
||||
icon={<PlugZap size={16} color={text} />}
|
||||
@@ -437,7 +437,7 @@ function StatusRow({ icon, label, value }: { icon: React.ReactNode; label: strin
|
||||
const { text } = useAdminTheme();
|
||||
return (
|
||||
<XStack alignItems="center" justifyContent="space-between">
|
||||
<XStack alignItems="center" space="$2">
|
||||
<XStack alignItems="center" gap="$2">
|
||||
{icon}
|
||||
<Text fontSize="$sm" color={text}>
|
||||
{label}
|
||||
|
||||
Reference in New Issue
Block a user