Completed the full mobile app polish pass: navigation feel, safe‑area consistency, input styling, list rows, FAB

patterns, skeleton loading, photo selection/bulk actions with shared‑element transitions, notification detail sheet,
  offline banner, maskable manifest icons, and route prefetching.

  Key changes

  - Navigation/shell: press feedback on all header actions, glassy sticky header and tab bar, safer bottom spacing
    (resources/js/admin/mobile/components/MobileShell.tsx, resources/js/admin/mobile/components/BottomNav.tsx).
  - Forms + lists: shared mobile form controls, list‑style rows in settings/profile, consistent inputs across core
    flows (resources/js/admin/mobile/components/FormControls.tsx, resources/js/admin/mobile/SettingsPage.tsx,
    resources/js/admin/mobile/ProfilePage.tsx, resources/js/admin/mobile/EventFormPage.tsx, resources/js/admin/mobile/
    EventMembersPage.tsx, resources/js/admin/mobile/EventTasksPage.tsx, resources/js/admin/mobile/
    EventGuestNotificationsPage.tsx, resources/js/admin/mobile/NotificationsPage.tsx, resources/js/admin/mobile/
    EventPhotosPage.tsx, resources/js/admin/mobile/EventsPage.tsx).
  - Media workflows: shared‑element photo transitions, selection mode + bulk actions bar (resources/js/admin/mobile/
    EventPhotosPage.tsx).
  - Loading UX: shimmering skeletons (resources/css/app.css, resources/js/admin/mobile/components/Primitives.tsx).
  - PWA polish + perf: maskable icons, offline banner hook, and route prefetch (public/manifest.json, resources/js/
    admin/mobile/hooks/useOnlineStatus.tsx, resources/js/admin/mobile/prefetch.ts, resources/js/admin/main.tsx).

resources/js/admin/mobile/SettingsPage.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Shield, Bell, LogOut, User } from 'lucide-react';
+import { Shield, Bell, User } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
+import { YGroup } from '@tamagui/group';
+import { ListItem } from '@tamagui/list-item';
 import { SizableText as Text } from '@tamagui/text';
-import { Pressable } from '@tamagui/react-native-web-lite';
 import { Switch } from '@tamagui/switch';
+import { useTheme } from '@tamagui/core';
 import { MobileShell } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
 import { useAuth } from '../auth/context';
@@ -36,6 +38,10 @@ export default function MobileSettingsPage() {
   const { t } = useTranslation('management');
   const navigate = useNavigate();
   const { user, logout } = useAuth();
+  const theme = useTheme();
+  const text = String(theme.color?.val ?? '#0f172a');
+  const muted = String(theme.gray?.val ?? '#6b7280');
+  const border = String(theme.borderColor?.val ?? '#e5e7eb');
   const [preferences, setPreferences] = React.useState<NotificationPreferences>({});
   const [defaults, setDefaults] = React.useState<NotificationPreferences>({});
   const [loading, setLoading] = React.useState(true);
@@ -104,12 +110,12 @@ export default function MobileSettingsPage() {
 
       <MobileCard space="$3">
         <XStack alignItems="center" space="$2">
-          <Shield size={18} color="#0f172a" />
-          <Text fontSize="$md" fontWeight="800" color="#0f172a">
+          <Shield size={18} color={text} />
+          <Text fontSize="$md" fontWeight="800" color={text}>
             {t('mobileSettings.accountTitle', 'Account')}
           </Text>
         </XStack>
-        <Text fontSize="$sm" color="#4b5563">
+        <Text fontSize="$sm" color={muted}>
           {user?.name ?? user?.email ?? t('settings.session.unknown', 'Benutzer')}
         </Text>
         {user?.tenant_id ? (
@@ -123,47 +129,48 @@ export default function MobileSettingsPage() {
 
       <MobileCard space="$3">
         <XStack alignItems="center" space="$2">
-          <Bell size={18} color="#0f172a" />
-          <Text fontSize="$md" fontWeight="800" color="#0f172a">
+          <Bell size={18} color={text} />
+          <Text fontSize="$md" fontWeight="800" color={text}>
             {t('mobileSettings.notificationsTitle', 'Notifications')}
           </Text>
         </XStack>
         {loading ? (
-          <Text fontSize="$sm" color="#6b7280">
+          <Text fontSize="$sm" color={muted}>
             {t('mobileSettings.notificationsLoading', 'Loading settings ...')}
           </Text>
         ) : (
-          <YStack space="$2">
-            {AVAILABLE_PREFS.map((key) => (
-              <XStack
-                key={key}
-                alignItems="center"
-                justifyContent="space-between"
-                borderBottomWidth={1}
-                borderColor="#e5e7eb"
-                paddingBottom="$2"
-                paddingTop="$1.5"
-                space="$2"
-              >
-                <YStack flex={1} minWidth={0} space="$1">
-                  <Text fontSize="$sm" color="#0f172a" fontWeight="700">
-                    {t(`settings.notifications.keys.${key}.label`, key)}
-                  </Text>
-                  <Text fontSize="$xs" color="#6b7280">
-                    {t(`settings.notifications.keys.${key}.description`, '')}
-                  </Text>
-                </YStack>
-                <Switch
-                  size="$4"
-                  checked={Boolean(preferences[key])}
-                  onCheckedChange={() => togglePref(key)}
-                  aria-label={t(`settings.notifications.keys.${key}.label`, key)}
-                >
-                  <Switch.Thumb />
-                </Switch>
-              </XStack>
+          <YGroup borderRadius="$4" borderWidth={1} borderColor={border} overflow="hidden">
+            {AVAILABLE_PREFS.map((key, index) => (
+              <YGroup.Item key={key} bordered={index < AVAILABLE_PREFS.length - 1}>
+                <ListItem
+                  hoverTheme
+                  pressTheme
+                  paddingVertical="$2"
+                  paddingHorizontal="$3"
+                  title={
+                    <Text fontSize="$sm" color={text} fontWeight="700">
+                      {t(`settings.notifications.keys.${key}.label`, key)}
+                    </Text>
+                  }
+                  subTitle={
+                    <Text fontSize="$xs" color={muted}>
+                      {t(`settings.notifications.keys.${key}.description`, '')}
+                    </Text>
+                  }
+                  iconAfter={
+                    <Switch
+                      size="$4"
+                      checked={Boolean(preferences[key])}
+                      onCheckedChange={() => togglePref(key)}
+                      aria-label={t(`settings.notifications.keys.${key}.label`, key)}
+                    >
+                      <Switch.Thumb />
+                    </Switch>
+                  }
+                />
+              </YGroup.Item>
             ))}
-          </YStack>
+          </YGroup>
         )}
         <XStack space="$2">
           <CTAButton label={saving ? t('common.processing', '...') : t('settings.notifications.actions.save', 'Speichern')} onPress={() => handleSave()} />
@@ -173,12 +180,12 @@ export default function MobileSettingsPage() {
 
       <MobileCard space="$3">
         <XStack alignItems="center" space="$2">
-          <User size={18} color="#0f172a" />
-          <Text fontSize="$md" fontWeight="800" color="#0f172a">
+          <User size={18} color={text} />
+          <Text fontSize="$md" fontWeight="800" color={text}>
             {t('settings.appearance.title', 'Darstellung')}
           </Text>
         </XStack>
-        <Text fontSize="$sm" color="#4b5563">
+        <Text fontSize="$sm" color={muted}>
           {t('settings.appearance.description', 'Schalte Dark-Mode oder passe Branding im Admin an.')}
         </Text>
         <CTAButton label={t('settings.appearance.title', 'Darstellung & Branding')} tone="ghost" onPress={() => navigate(adminPath('/settings'))} />