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

Expand branding controls and logo upload

Browse Source
This commit is contained in:
Codex Agent
2026-01-15 08:42:20 +01:00
parent a1f37bb491
commit b0ba29fcb6
11 changed files with 906 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
resources/js/admin/mobile/BrandingPage.tsx
View File

@@ -7,7 +7,7 @@ import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { MobileShell, HeaderActionButton } from './components/MobileShell';
import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
import { TenantEvent, getEvent, updateEvent, getTenantFonts, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
import { TenantEvent, getEvent, updateEvent, getTenantFonts, getTenantSettings, TenantFont, WatermarkSettings, trackOnboarding } from '../api';
import { isAuthError } from '../auth/tokens';
import { ApiError, getApiErrorMessage } from '../lib/apiError';
import { isBrandingAllowed } from '../lib/events';
@@ -25,6 +25,15 @@ const BRANDING_FORM_DEFAULTS = {
background: '#ffffff',
surface: '#ffffff',
mode: 'auto' as const,
buttonStyle: 'filled' as const,
buttonRadius: 12,
buttonPrimary: ADMIN_COLORS.primary,
buttonSecondary: ADMIN_COLORS.accent,
linkColor: ADMIN_COLORS.accent,
fontSize: 'm' as const,
logoMode: 'upload' as const,
logoPosition: 'left' as const,
logoSize: 'm' as const,
};
const BRANDING_FORM_BASE: BrandingFormValues = {
@@ -32,6 +41,20 @@ const BRANDING_FORM_BASE: BrandingFormValues = {
headingFont: '',
bodyFont: '',
logoDataUrl: '',
logoValue: '',
useDefaultBranding: false,
};
const FONT_SIZE_SCALE: Record<BrandingFormValues['fontSize'], number> = {
s: 0.94,
m: 1,
l: 1.08,
};
const LOGO_SIZE_PREVIEW: Record<BrandingFormValues['logoSize'], number> = {
s: 28,
m: 36,
l: 44,
};
type WatermarkPosition =
@@ -89,6 +112,8 @@ export default function MobileBrandingPage() {
const [fonts, setFonts] = React.useState<TenantFont[]>([]);
const [fontsLoading, setFontsLoading] = React.useState(false);
const [fontsLoaded, setFontsLoaded] = React.useState(false);
const [tenantBranding, setTenantBranding] = React.useState<BrandingFormValues | null>(null);
const [tenantBrandingLoaded, setTenantBrandingLoaded] = React.useState(false);
React.useEffect(() => {
if (!slug) return;
@@ -122,13 +147,42 @@ export default function MobileBrandingPage() {
});
}, [showFontsSheet, fontsLoaded]);
React.useEffect(() => {
if (tenantBrandingLoaded) return;
let active = true;
getTenantSettings()
.then((payload) => {
if (!active) return;
setTenantBranding(extractBrandingForm(payload.settings ?? {}, BRANDING_FORM_DEFAULTS));
})
.catch(() => undefined)
.finally(() => {
if (active) {
setTenantBrandingLoaded(true);
}
});
return () => {
active = false;
};
}, [tenantBrandingLoaded]);
const previewForm = form.useDefaultBranding && tenantBranding ? tenantBranding : form;
const previewTitle = event ? renderName(event.name) : t('events.placeholders.untitled', 'Unbenanntes Event');
const previewHeadingFont = form.headingFont || 'Fraunces';
const previewBodyFont = form.bodyFont || 'Manrope';
const previewSurfaceText = getContrastingTextColor(form.surface, '#ffffff', '#0f172a');
const previewHeadingFont = previewForm.headingFont || 'Fraunces';
const previewBodyFont = previewForm.bodyFont || 'Manrope';
const previewSurfaceText = getContrastingTextColor(previewForm.surface, '#ffffff', '#0f172a');
const previewScale = FONT_SIZE_SCALE[previewForm.fontSize] ?? 1;
const previewButtonColor = previewForm.buttonPrimary || previewForm.primary;
const previewButtonText = getContrastingTextColor(previewButtonColor, '#ffffff', '#0f172a');
const previewLogoSize = LOGO_SIZE_PREVIEW[previewForm.logoSize] ?? 36;
const previewLogoUrl = previewForm.logoMode === 'upload' ? previewForm.logoDataUrl : '';
const previewLogoValue = previewForm.logoMode === 'emoticon' ? previewForm.logoValue : '';
const previewInitials = getInitials(previewTitle);
const watermarkAllowed = event?.package?.watermark_allowed !== false;
const brandingAllowed = isBrandingAllowed(event ?? null);
const watermarkLocked = watermarkAllowed && !brandingAllowed;
const brandingDisabled = !brandingAllowed || form.useDefaultBranding;
async function handleSave() {
if (!event?.slug) return;
@@ -159,22 +213,38 @@ export default function MobileBrandingPage() {
is_active: event.is_active ?? undefined,
};
const settings = { ...(event.settings ?? {}) };
const logoUploadValue = form.logoMode === 'upload' ? form.logoDataUrl.trim() : '';
const logoIsDataUrl = logoUploadValue.startsWith('data:image/');
const normalizedLogoPath = logoIsDataUrl ? '' : normalizeBrandingPath(logoUploadValue);
const logoValue = form.logoMode === 'upload'
? (logoIsDataUrl ? logoUploadValue : normalizedLogoPath || null)
: (form.logoValue.trim() || null);
settings.branding = {
...(typeof settings.branding === 'object' ? (settings.branding as Record<string, unknown>) : {}),
use_default_branding: form.useDefaultBranding,
primary_color: form.primary,
secondary_color: form.accent,
accent_color: form.accent,
background_color: form.background,
surface_color: form.surface,
font_family: form.bodyFont,
heading_font: form.headingFont,
body_font: form.bodyFont,
font_size: form.fontSize,
mode: form.mode,
button_style: form.buttonStyle,
button_radius: form.buttonRadius,
button_primary_color: form.buttonPrimary,
button_secondary_color: form.buttonSecondary,
link_color: form.linkColor,
typography: {
...(typeof (settings.branding as Record<string, unknown> | undefined)?.typography === 'object'
? ((settings.branding as Record<string, unknown>).typography as Record<string, unknown>)
: {}),
heading: form.headingFont,
body: form.bodyFont,
size: form.fontSize,
},
palette: {
...(typeof (settings.branding as Record<string, unknown> | undefined)?.palette === 'object'
@@ -185,15 +255,28 @@ export default function MobileBrandingPage() {
background: form.background,
surface: form.surface,
},
logo_data_url: form.logoDataUrl || null,
logo: form.logoDataUrl
? {
mode: 'upload',
value: form.logoDataUrl,
position: 'center',
size: 'm',
}
: null,
buttons: {
...(typeof (settings.branding as Record<string, unknown> | undefined)?.buttons === 'object'
? ((settings.branding as Record<string, unknown>).buttons as Record<string, unknown>)
: {}),
style: form.buttonStyle,
radius: form.buttonRadius,
primary: form.buttonPrimary,
secondary: form.buttonSecondary,
link_color: form.linkColor,
},
logo_data_url: form.logoMode === 'upload' && logoIsDataUrl ? logoUploadValue : null,
logo_url: form.logoMode === 'upload' ? (normalizedLogoPath || null) : null,
logo_mode: form.logoMode,
logo_value: logoValue,
logo_position: form.logoPosition,
logo_size: form.logoSize,
logo: {
mode: form.logoMode,
value: logoValue,
position: form.logoPosition,
size: form.logoSize,
},
};
const watermarkPayload = buildWatermarkPayload(watermarkForm, watermarkAllowed, brandingAllowed);
if (watermarkPayload) {
@@ -445,27 +528,117 @@ export default function MobileBrandingPage() {
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{t('events.branding.previewTitle', 'Guest App Preview')}
</Text>
<YStack borderRadius={16} borderWidth={1} borderColor={border} backgroundColor={form.background} padding="$3" space="$2" alignItems="center">
<YStack width="100%" borderRadius={12} backgroundColor={form.surface} borderWidth={1} borderColor={border} overflow="hidden">
<YStack backgroundColor={form.primary} height={64} />
<YStack padding="$3" space="$1.5">
<Text fontSize="$md" fontWeight="800" color={previewSurfaceText} style={{ fontFamily: previewHeadingFont }}>
{previewTitle}
</Text>
<Text fontSize="$sm" color={previewSurfaceText} style={{ fontFamily: previewBodyFont, opacity: 0.7 }}>
{t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
</Text>
<YStack borderRadius={16} borderWidth={1} borderColor={border} backgroundColor={previewForm.background} padding="$3" space="$2" alignItems="center">
<YStack width="100%" borderRadius={12} backgroundColor={previewForm.surface} borderWidth={1} borderColor={border} overflow="hidden">
<YStack
height={64}
style={{ background: `linear-gradient(135deg, ${previewForm.primary}, ${previewForm.accent})` }}
/>
<YStack padding="$3" space="$2">
<XStack
alignItems="center"
space="$2"
flexDirection={previewForm.logoPosition === 'center' ? 'column' : previewForm.logoPosition === 'right' ? 'row-reverse' : 'row'}
justifyContent={previewForm.logoPosition === 'center' ? 'center' : 'flex-start'}
>
<YStack
width={previewLogoSize}
height={previewLogoSize}
borderRadius={previewLogoSize}
alignItems="center"
justifyContent="center"
backgroundColor={previewForm.accent}
>
{previewLogoUrl ? (
<img
src={previewLogoUrl}
alt={t('events.branding.logoAlt', 'Logo')}
style={{ width: previewLogoSize - 6, height: previewLogoSize - 6, borderRadius: previewLogoSize, objectFit: 'cover' }}
/>
) : (
<Text fontSize="$sm" color={previewSurfaceText} fontWeight="700">
{previewLogoValue || previewInitials}
</Text>
)}
</YStack>
<YStack>
<Text
fontWeight="800"
color={previewSurfaceText}
style={{ fontFamily: previewHeadingFont, fontSize: 18 * previewScale }}
>
{previewTitle}
</Text>
<Text
color={previewSurfaceText}
style={{ fontFamily: previewBodyFont, opacity: 0.7, fontSize: 13 * previewScale }}
>
{t('events.branding.previewSubtitle', 'Aktuelle Farben & Schriften')}
</Text>
</YStack>
</XStack>
<XStack space="$2" marginTop="$1">
<ColorSwatch color={form.primary} label={t('events.branding.primary', 'Primary')} />
<ColorSwatch color={form.accent} label={t('events.branding.accent', 'Accent')} />
<ColorSwatch color={form.background} label={t('events.branding.background', 'Background')} />
<ColorSwatch color={form.surface} label={t('events.branding.surface', 'Surface')} />
<ColorSwatch color={previewForm.primary} label={t('events.branding.primary', 'Primary')} />
<ColorSwatch color={previewForm.accent} label={t('events.branding.accent', 'Accent')} />
<ColorSwatch color={previewForm.background} label={t('events.branding.background', 'Background')} />
<ColorSwatch color={previewForm.surface} label={t('events.branding.surface', 'Surface')} />
</XStack>
<XStack marginTop="$2">
<div
style={{
padding: '8px 14px',
borderRadius: previewForm.buttonRadius,
background: previewForm.buttonStyle === 'outline' ? 'transparent' : previewButtonColor,
color: previewForm.buttonStyle === 'outline' ? previewForm.linkColor : previewButtonText,
border: previewForm.buttonStyle === 'outline' ? `1px solid ${previewForm.linkColor}` : 'none',
fontWeight: 700,
fontSize: 13 * previewScale,
}}
>
{t('events.branding.previewCta', 'Fotos hochladen')}
</div>
</XStack>
</YStack>
</YStack>
</YStack>
</MobileCard>
{!brandingAllowed ? (
<InfoBadge
icon={<Lock size={16} color={danger} />}
text={t('events.branding.lockedBranding', 'Branding ist in diesem Paket gesperrt.')}
tone="danger"
/>
) : null}
<MobileCard space="$3">
<Text fontSize="$md" fontWeight="800" color={textStrong}>
{t('events.branding.source', 'Branding Source')}
</Text>
<Text fontSize="$sm" color={muted}>
{t('events.branding.sourceHint', 'Nutze das Tenant-Branding oder überschreibe es für dieses Event.')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.useDefault', 'Tenant')}
active={form.useDefaultBranding}
onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: true }))}
disabled={!brandingAllowed}
/>
<ModeButton
label={t('events.branding.useCustom', 'Event')}
active={!form.useDefaultBranding}
onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: false }))}
disabled={!brandingAllowed}
/>
</XStack>
<Text fontSize="$xs" color={muted}>
{form.useDefaultBranding
? t('events.branding.usingDefault', 'Tenant-Branding aktiv')
: t('events.branding.usingCustom', 'Event-Branding aktiv')}
</Text>
</MobileCard>
<MobileCard space="$3">
<Text fontSize="$md" fontWeight="800" color={textStrong}>
{t('events.branding.mode', 'Theme')}
@@ -475,16 +648,19 @@ export default function MobileBrandingPage() {
label={t('events.branding.modeLight', 'Light')}
active={form.mode === 'light'}
onPress={() => setForm((prev) => ({ ...prev, mode: 'light' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.modeAuto', 'Auto')}
active={form.mode === 'auto'}
onPress={() => setForm((prev) => ({ ...prev, mode: 'auto' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.modeDark', 'Dark')}
active={form.mode === 'dark'}
onPress={() => setForm((prev) => ({ ...prev, mode: 'dark' }))}
disabled={brandingDisabled}
/>
</XStack>
</MobileCard>
@@ -497,21 +673,25 @@ export default function MobileBrandingPage() {
label={t('events.branding.primary', 'Primary Color')}
value={form.primary}
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.accent', 'Accent Color')}
value={form.accent}
onChange={(value) => setForm((prev) => ({ ...prev, accent: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.backgroundColor', 'Background Color')}
value={form.background}
onChange={(value) => setForm((prev) => ({ ...prev, background: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.surfaceColor', 'Surface Color')}
value={form.surface}
onChange={(value) => setForm((prev) => ({ ...prev, surface: value }))}
disabled={brandingDisabled}
/>
</MobileCard>
@@ -528,6 +708,7 @@ export default function MobileBrandingPage() {
setFontField('heading');
setShowFontsSheet(true);
}}
disabled={brandingDisabled}
/>
<InputField
label={t('events.branding.bodyFont', 'Body Font')}
@@ -538,105 +719,259 @@ export default function MobileBrandingPage() {
setFontField('body');
setShowFontsSheet(true);
}}
disabled={brandingDisabled}
/>
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{t('events.branding.fontSize', 'Font Size')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.fontSizeSmall', 'S')}
active={form.fontSize === 's'}
onPress={() => setForm((prev) => ({ ...prev, fontSize: 's' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.fontSizeMedium', 'M')}
active={form.fontSize === 'm'}
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'm' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.fontSizeLarge', 'L')}
active={form.fontSize === 'l'}
onPress={() => setForm((prev) => ({ ...prev, fontSize: 'l' }))}
disabled={brandingDisabled}
/>
</XStack>
</MobileCard>
<MobileCard space="$3">
<Text fontSize="$md" fontWeight="800" color={textStrong}>
{t('events.branding.logo', 'Logo')}
</Text>
<YStack
borderRadius={14}
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
padding="$3"
alignItems="center"
justifyContent="center"
space="$2"
>
{form.logoDataUrl ? (
<>
<img
src={form.logoDataUrl}
alt={t('events.branding.logoAlt', 'Logo')}
style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }}
/>
<XStack space="$2">
<CTAButton
label={t('events.branding.replaceLogo', 'Replace logo')}
onPress={() => document.getElementById('branding-logo-input')?.click()}
<Text fontSize="$sm" color={muted}>
{t('events.branding.logoHint', 'Upload a logo or use an emoji for the guest header.')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.logoModeUpload', 'Upload')}
active={form.logoMode === 'upload'}
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'upload' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.logoModeEmoticon', 'Emoticon')}
active={form.logoMode === 'emoticon'}
onPress={() => setForm((prev) => ({ ...prev, logoMode: 'emoticon' }))}
disabled={brandingDisabled}
/>
</XStack>
{form.logoMode === 'emoticon' ? (
<InputField
label={t('events.branding.logoValue', 'Emoticon')}
value={form.logoValue}
placeholder={t('events.branding.logoValuePlaceholder', '🎉')}
onChange={(value) => setForm((prev) => ({ ...prev, logoValue: value }))}
disabled={brandingDisabled}
/>
) : (
<YStack
borderRadius={14}
borderWidth={1}
borderColor={border}
backgroundColor={surfaceMuted}
padding="$3"
alignItems="center"
justifyContent="center"
space="$2"
>
{form.logoDataUrl ? (
<>
<img
src={form.logoDataUrl}
alt={t('events.branding.logoAlt', 'Logo')}
style={{ maxHeight: 80, maxWidth: '100%', objectFit: 'contain' }}
/>
<Pressable onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}>
<XStack space="$2">
<CTAButton
label={t('events.branding.replaceLogo', 'Replace logo')}
onPress={() => document.getElementById('branding-logo-input')?.click()}
disabled={brandingDisabled}
/>
<Pressable
disabled={brandingDisabled}
onPress={() => setForm((prev) => ({ ...prev, logoDataUrl: '' }))}
>
<XStack
alignItems="center"
space="$1.5"
paddingHorizontal="$3"
paddingVertical="$2"
borderRadius={12}
borderWidth={1}
borderColor={border}
>
<Trash2 size={16} color={danger} />
<Text fontSize="$sm" color={danger} fontWeight="700">
{t('events.branding.removeLogo', 'Remove')}
</Text>
</XStack>
</Pressable>
</XStack>
</>
) : (
<>
<ImageIcon size={28} color={subtle} />
<Pressable
disabled={brandingDisabled}
onPress={() => document.getElementById('branding-logo-input')?.click()}
>
<XStack
alignItems="center"
space="$1.5"
paddingHorizontal="$3"
paddingVertical="$2"
space="$2"
paddingHorizontal="$3.5"
paddingVertical="$2.5"
borderRadius={12}
borderWidth={1}
borderColor={border}
backgroundColor={surface}
>
<Trash2 size={16} color={danger} />
<Text fontSize="$sm" color={danger} fontWeight="700">
{t('events.branding.removeLogo', 'Remove')}
<UploadCloud size={18} color={primary} />
<Text fontSize="$sm" color={primary} fontWeight="700">
{t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
</Text>
</XStack>
</Pressable>
</XStack>
</>
) : (
<>
<ImageIcon size={28} color={subtle} />
<Text fontSize="$sm" color={muted} textAlign="center">
{t('events.branding.logoHint', 'Upload a logo to brand guest invites and QR posters.')}
</Text>
<Pressable onPress={() => document.getElementById('branding-logo-input')?.click()}>
<XStack
alignItems="center"
space="$2"
paddingHorizontal="$3.5"
paddingVertical="$2.5"
borderRadius={12}
borderWidth={1}
borderColor={border}
backgroundColor={surface}
>
<UploadCloud size={18} color={primary} />
<Text fontSize="$sm" color={primary} fontWeight="700">
{t('events.branding.uploadLogo', 'Upload logo (max. 1 MB)')}
</Text>
</XStack>
</Pressable>
</>
)}
<input
id="branding-logo-input"
type="file"
accept="image/*"
style={{ display: 'none' }}
onChange={(event) => {
const file = event.target.files?.[0];
if (!file) return;
if (file.size > 1024 * 1024) {
setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
return;
}
const reader = new FileReader();
reader.onload = () => {
const nextLogo =
typeof reader.result === 'string'
? reader.result
: typeof reader.result === 'object' && reader.result !== null
? String(reader.result)
: '';
setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
setError(null);
};
reader.readAsDataURL(file);
}}
</>
)}
<input
id="branding-logo-input"
type="file"
accept="image/*"
style={{ display: 'none' }}
disabled={brandingDisabled}
onChange={(event) => {
const file = event.target.files?.[0];
if (!file) return;
if (file.size > 1024 * 1024) {
setError(t('events.branding.logoTooLarge', 'Logo must be under 1 MB.'));
return;
}
const reader = new FileReader();
reader.onload = () => {
const nextLogo =
typeof reader.result === 'string'
? reader.result
: typeof reader.result === 'object' && reader.result !== null
? String(reader.result)
: '';
setForm((prev) => ({ ...prev, logoDataUrl: nextLogo }));
setError(null);
};
reader.readAsDataURL(file);
}}
/>
</YStack>
)}
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{t('events.branding.logoPosition', 'Position')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.positionLeft', 'Left')}
active={form.logoPosition === 'left'}
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'left' }))}
disabled={brandingDisabled}
/>
</YStack>
<ModeButton
label={t('events.branding.positionCenter', 'Center')}
active={form.logoPosition === 'center'}
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'center' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.positionRight', 'Right')}
active={form.logoPosition === 'right'}
onPress={() => setForm((prev) => ({ ...prev, logoPosition: 'right' }))}
disabled={brandingDisabled}
/>
</XStack>
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{t('events.branding.logoSize', 'Size')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.logoSizeSmall', 'S')}
active={form.logoSize === 's'}
onPress={() => setForm((prev) => ({ ...prev, logoSize: 's' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.logoSizeMedium', 'M')}
active={form.logoSize === 'm'}
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'm' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.logoSizeLarge', 'L')}
active={form.logoSize === 'l'}
onPress={() => setForm((prev) => ({ ...prev, logoSize: 'l' }))}
disabled={brandingDisabled}
/>
</XStack>
</MobileCard>
<MobileCard space="$3">
<Text fontSize="$md" fontWeight="800" color={textStrong}>
{t('events.branding.buttons', 'Buttons & Links')}
</Text>
<Text fontSize="$sm" color={muted}>
{t('events.branding.buttonsHint', 'Style, radius, and link color for CTA buttons.')}
</Text>
<XStack space="$2">
<ModeButton
label={t('events.branding.buttonFilled', 'Filled')}
active={form.buttonStyle === 'filled'}
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'filled' }))}
disabled={brandingDisabled}
/>
<ModeButton
label={t('events.branding.buttonOutline', 'Outline')}
active={form.buttonStyle === 'outline'}
onPress={() => setForm((prev) => ({ ...prev, buttonStyle: 'outline' }))}
disabled={brandingDisabled}
/>
</XStack>
<LabeledSlider
label={t('events.branding.buttonRadius', 'Radius')}
value={form.buttonRadius}
min={0}
max={32}
step={1}
onChange={(value) => setForm((prev) => ({ ...prev, buttonRadius: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.buttonPrimary', 'Button Primary')}
value={form.buttonPrimary}
onChange={(value) => setForm((prev) => ({ ...prev, buttonPrimary: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.buttonSecondary', 'Button Secondary')}
value={form.buttonSecondary}
onChange={(value) => setForm((prev) => ({ ...prev, buttonSecondary: value }))}
disabled={brandingDisabled}
/>
<ColorField
label={t('events.branding.linkColor', 'Link Color')}
value={form.linkColor}
onChange={(value) => setForm((prev) => ({ ...prev, linkColor: value }))}
disabled={brandingDisabled}
/>
</MobileCard>
</>
) : (
@@ -787,10 +1122,47 @@ function renderName(name: TenantEvent['name']): string {
return '';
}
function ColorField({ label, value, onChange }: { label: string; value: string; onChange: (next: string) => void }) {
function normalizeBrandingPath(value: string): string {
const trimmed = value.trim();
if (!trimmed) {
return '';
}
if (trimmed.startsWith('http://') || trimmed.startsWith('https://') || trimmed.startsWith('data:')) {
return trimmed;
}
const normalized = trimmed.replace(/^\/+/, '');
if (normalized.startsWith('storage/')) {
return normalized.slice('storage/'.length);
}
return normalized;
}
function getInitials(name: string): string {
const words = name.split(' ').filter(Boolean);
if (words.length >= 2) {
return `${words[0][0]}${words[1][0]}`.toUpperCase();
}
return name.substring(0, 2).toUpperCase();
}
function ColorField({
label,
value,
onChange,
disabled,
}: {
label: string;
value: string;
onChange: (next: string) => void;
disabled?: boolean;
}) {
const { textStrong, muted, border, surface } = useAdminTheme();
return (
<YStack space="$2">
<YStack space="$2" opacity={disabled ? 0.6 : 1}>
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{label}
</Text>
@@ -799,6 +1171,7 @@ function ColorField({ label, value, onChange }: { label: string; value: string;
type="color"
value={value}
onChange={(event) => onChange(event.target.value)}
disabled={disabled}
style={{ width: 52, height: 52, borderRadius: 12, border: `1px solid ${border}`, background: surface }}
/>
<Text fontSize="$sm" color={muted}>
@@ -828,6 +1201,7 @@ function InputField({
onChange,
onPicker,
children,
disabled,
}: {
label: string;
value: string;
@@ -835,10 +1209,11 @@ function InputField({
onChange: (next: string) => void;
onPicker?: () => void;
children?: React.ReactNode;
disabled?: boolean;
}) {
const { textStrong, border, surface, primary } = useAdminTheme();
return (
<YStack space="$2">
<YStack space="$2" opacity={disabled ? 0.6 : 1}>
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
{label}
</Text>
@@ -859,6 +1234,7 @@ function InputField({
value={value}
placeholder={placeholder}
onChange={(event) => onChange(event.target.value)}
disabled={disabled}
style={{
flex: 1,
height: '100%',
@@ -871,7 +1247,7 @@ function InputField({
/>
)}
{onPicker ? (
<Pressable onPress={onPicker}>
<Pressable onPress={onPicker} disabled={disabled}>
<ChevronDown size={16} color={primary} />
</Pressable>
) : null}
@@ -1104,10 +1480,20 @@ function TabButton({ label, active, onPress }: { label: string; active: boolean;
);
}
function ModeButton({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
function ModeButton({
label,
active,
onPress,
disabled,
}: {
label: string;
active: boolean;
onPress: () => void;
disabled?: boolean;
}) {
const { backdrop, surfaceMuted, border, surface } = useAdminTheme();
return (
<Pressable onPress={onPress} style={{ flex: 1 }}>
<Pressable onPress={onPress} disabled={disabled} style={{ flex: 1, opacity: disabled ? 0.6 : 1 }}>
<XStack
alignItems="center"
justifyContent="center"