Refine branding labels and access checks

resources/js/admin/mobile/BrandingPage.tsx

@@ -10,7 +10,7 @@ import { MobileCard, CTAButton, SkeletonCard } from './components/Primitives';
 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';
+import { isBrandingAllowed, isWatermarkAllowed } from '../lib/events';
 import { MobileSheet } from './components/Sheet';
 import toast from 'react-hot-toast';
 import { adminPath } from '../constants';
@@ -179,7 +179,7 @@ export default function MobileBrandingPage() {
   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 watermarkAllowed = isWatermarkAllowed(event ?? null);
   const brandingAllowed = isBrandingAllowed(event ?? null);
   const watermarkLocked = watermarkAllowed && !brandingAllowed;
   const brandingDisabled = !brandingAllowed || form.useDefaultBranding;
@@ -616,17 +616,17 @@ export default function MobileBrandingPage() {
               {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.')}
+              {t('events.branding.sourceHint', 'Use the default branding or customize this event only.')}
             </Text>
             <XStack space="$2">
               <ModeButton
-                label={t('events.branding.useDefault', 'Tenant')}
+                label={t('events.branding.useDefault', 'Default')}
                 active={form.useDefaultBranding}
                 onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: true }))}
                 disabled={!brandingAllowed}
               />
               <ModeButton
-                label={t('events.branding.useCustom', 'Event')}
+                label={t('events.branding.useCustom', 'This event')}
                 active={!form.useDefaultBranding}
                 onPress={() => setForm((prev) => ({ ...prev, useDefaultBranding: false }))}
                 disabled={!brandingAllowed}
@@ -1275,7 +1275,7 @@ function LabeledSlider({
   disabled?: boolean;
   suffix?: string;
 }) {
-  const { textStrong, muted } = useAdminTheme();
+  const { textStrong, muted, primary } = useAdminTheme();
   return (
     <YStack space="$1.5">
       <XStack alignItems="center" justifyContent="space-between">
@@ -1295,7 +1295,7 @@ function LabeledSlider({
         value={value}
         disabled={disabled}
         onChange={(event) => onChange(Number(event.target.value))}
-        style={{ width: '100%' }}
+        style={{ width: '100%', height: 28, accentColor: primary }}
       />
     </YStack>
   );