Update guest v2 branding and theming

resources/js/guest-v2/screens/HelpCenterScreen.tsx

@@ -12,14 +12,14 @@ import PullToRefresh from '@/guest/components/PullToRefresh';
 import { getHelpArticles, type HelpArticleSummary } from '@/guest/services/helpApi';
 import { useLocale } from '@/guest/i18n/LocaleContext';
 import { useTranslation } from '@/guest/i18n/useTranslation';
-import { useAppearance } from '@/hooks/use-appearance';
+import EventLogo from '../components/EventLogo';
+import { useGuestThemeVariant } from '../lib/guestTheme';
 
 export default function HelpCenterScreen() {
   const params = useParams<{ token?: string }>();
   const { locale } = useLocale();
   const { t } = useTranslation();
-  const { resolved } = useAppearance();
-  const isDark = resolved === 'dark';
+  const { isDark } = useGuestThemeVariant();
   const mutedText = isDark ? 'rgba(248, 250, 252, 0.7)' : 'rgba(15, 23, 42, 0.65)';
   const [articles, setArticles] = React.useState<HelpArticleSummary[]>([]);
   const [query, setQuery] = React.useState('');
@@ -27,6 +27,8 @@ export default function HelpCenterScreen() {
   const [servedFromCache, setServedFromCache] = React.useState(false);
   const [isOnline, setIsOnline] = React.useState(() => (typeof navigator !== 'undefined' ? navigator.onLine : true));
   const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
+  const brandName = 'Fotospiel';
+  const showStandaloneHeader = !params.token;
 
   const loadArticles = React.useCallback(async (forceRefresh = false) => {
     setState('loading');
@@ -73,12 +75,17 @@ export default function HelpCenterScreen() {
     >
       <YStack gap="$4">
         <SurfaceCard glow>
-          <Text fontSize="$5" fontWeight="$8">
-            {t('help.center.title')}
-          </Text>
-          <Text fontSize="$2" color={mutedText} marginTop="$2">
-            {t('help.center.subtitle')}
-          </Text>
+          <XStack alignItems="center" gap="$3">
+            {showStandaloneHeader ? <EventLogo name={brandName} size="s" /> : null}
+            <YStack gap="$1">
+              <Text fontSize="$5" fontWeight="$8">
+                {t('help.center.title')}
+              </Text>
+              <Text fontSize="$2" color={mutedText}>
+                {t('help.center.subtitle')}
+              </Text>
+            </YStack>
+          </XStack>
         </SurfaceCard>
 
         <SurfaceCard>