Collapse branding controls on default mode
This commit is contained in:
Codex Agent
@@ -640,340 +640,344 @@ export default function MobileBrandingPage() {
|
||||
</Text>
|
||||
</MobileCard>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.mode', 'Theme')}
|
||||
</Text>
|
||||
<XStack space="$2">
|
||||
<ModeButton
|
||||
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>
|
||||
{form.useDefaultBranding ? null : (
|
||||
<>
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.mode', 'Theme')}
|
||||
</Text>
|
||||
<XStack space="$2">
|
||||
<ModeButton
|
||||
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>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.colors', 'Colors')}
|
||||
</Text>
|
||||
<ColorField
|
||||
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>
|
||||
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.fonts', 'Fonts')}
|
||||
</Text>
|
||||
<InputField
|
||||
label={t('events.branding.headingFont', 'Headline Font')}
|
||||
value={form.headingFont}
|
||||
placeholder={t('events.branding.headingFontPlaceholder', 'SF Pro Display')}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
|
||||
onPicker={() => {
|
||||
setFontField('heading');
|
||||
setShowFontsSheet(true);
|
||||
}}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<InputField
|
||||
label={t('events.branding.bodyFont', 'Body Font')}
|
||||
value={form.bodyFont}
|
||||
placeholder={t('events.branding.bodyFontPlaceholder', 'SF Pro Text')}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
|
||||
onPicker={() => {
|
||||
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>
|
||||
<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' }}
|
||||
/>
|
||||
<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="$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' }}
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.colors', 'Colors')}
|
||||
</Text>
|
||||
<ColorField
|
||||
label={t('events.branding.primary', 'Primary Color')}
|
||||
value={form.primary}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, primary: value }))}
|
||||
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>
|
||||
)}
|
||||
<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>
|
||||
|
||||
<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}
|
||||
/>
|
||||
<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.fonts', 'Fonts')}
|
||||
</Text>
|
||||
<InputField
|
||||
label={t('events.branding.headingFont', 'Headline Font')}
|
||||
value={form.headingFont}
|
||||
placeholder={t('events.branding.headingFontPlaceholder', 'SF Pro Display')}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, headingFont: value }))}
|
||||
onPicker={() => {
|
||||
setFontField('heading');
|
||||
setShowFontsSheet(true);
|
||||
}}
|
||||
disabled={brandingDisabled}
|
||||
/>
|
||||
<InputField
|
||||
label={t('events.branding.bodyFont', 'Body Font')}
|
||||
value={form.bodyFont}
|
||||
placeholder={t('events.branding.bodyFontPlaceholder', 'SF Pro Text')}
|
||||
onChange={(value) => setForm((prev) => ({ ...prev, bodyFont: value }))}
|
||||
onPicker={() => {
|
||||
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.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>
|
||||
<MobileCard space="$3">
|
||||
<Text fontSize="$md" fontWeight="800" color={textStrong}>
|
||||
{t('events.branding.logo', 'Logo')}
|
||||
</Text>
|
||||
<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' }}
|
||||
/>
|
||||
<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="$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' }}
|
||||
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}
|
||||
/>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
renderWatermarkTab()
|
||||
|
||||
Reference in New Issue
Block a user