Update guest v2 branding and theming

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

@@ -11,19 +11,21 @@ import PullToRefresh from '@/guest/components/PullToRefresh';
 import { getHelpArticle, type HelpArticleDetail } 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 HelpArticleScreen() {
   const params = useParams<{ token?: string; slug: string }>();
   const slug = params.slug;
   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 [article, setArticle] = React.useState<HelpArticleDetail | null>(null);
   const [state, setState] = React.useState<'loading' | 'ready' | 'error'>('loading');
   const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
+  const brandName = 'Fotospiel';
+  const showStandaloneHeader = !params.token;
 
   const loadArticle = React.useCallback(async () => {
     if (!slug) {
@@ -78,14 +80,19 @@ export default function HelpArticleScreen() {
         </SurfaceCard>
 
         <SurfaceCard glow>
-          <Text fontSize="$5" fontWeight="$8">
-            {title}
-          </Text>
-          {article?.updated_at ? (
-            <Text fontSize="$2" color={mutedText} marginTop="$2">
-              {t('help.article.updated', { date: formatDate(article.updated_at, locale) })}
-            </Text>
-          ) : null}
+          <XStack alignItems="center" gap="$3">
+            {showStandaloneHeader ? <EventLogo name={brandName} size="s" /> : null}
+            <YStack gap="$1">
+              <Text fontSize="$5" fontWeight="$8">
+                {title}
+              </Text>
+              {article?.updated_at ? (
+                <Text fontSize="$2" color={mutedText}>
+                  {t('help.article.updated', { date: formatDate(article.updated_at, locale) })}
+                </Text>
+              ) : null}
+            </YStack>
+          </XStack>
         </SurfaceCard>
 
         {state === 'loading' ? (