neues Admin UI Layout eingeführt. Alle Tests auf den neusten Stand gebracht.

resources/js/admin/mobile/EventFormPage.tsx

@@ -16,6 +16,7 @@ import { isAuthError } from '../auth/tokens';
 import { getApiValidationMessage, isApiError } from '../lib/apiError';
 import toast from 'react-hot-toast';
 import { useBackNavigation } from './hooks/useBackNavigation';
+import { useAdminTheme } from './theme';
 
 type FormState = {
   name: string;
@@ -34,6 +35,7 @@ export default function MobileEventFormPage() {
   const isEdit = Boolean(slug);
   const navigate = useNavigate();
   const { t } = useTranslation(['management', 'common']);
+  const { text, muted, subtle, danger, border, surfaceMuted } = useAdminTheme();
 
   const [form, setForm] = React.useState<FormState>({
     name: '',
@@ -204,7 +206,7 @@ export default function MobileEventFormPage() {
     >
       {error ? (
         <MobileCard>
-          <Text fontWeight="700" color="#b91c1c">
+          <Text fontWeight="700" color={danger}>
             {error}
           </Text>
         </MobileCard>
@@ -228,15 +230,15 @@ export default function MobileEventFormPage() {
               onChange={(e) => setForm((prev) => ({ ...prev, date: e.target.value }))}
               style={{ flex: 1 }}
             />
-            <CalendarDays size={16} color="#9ca3af" />
+            <CalendarDays size={16} color={subtle} />
           </XStack>
         </MobileField>
 
         <MobileField label={t('eventForm.fields.type.label', 'Event type')}>
           {typesLoading ? (
-            <Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.loading', 'Loading event types…')}</Text>
+            <Text fontSize="$sm" color={muted}>{t('eventForm.fields.type.loading', 'Loading event types…')}</Text>
           ) : eventTypes.length === 0 ? (
-            <Text fontSize="$sm" color="#6b7280">{t('eventForm.fields.type.empty', 'No event types available yet. Please add one in the admin area.')}</Text>
+            <Text fontSize="$sm" color={muted}>{t('eventForm.fields.type.empty', 'No event types available yet. Please add one in the admin area.')}</Text>
           ) : (
             <MobileSelect
               value={form.eventTypeId ?? ''}
@@ -269,7 +271,7 @@ export default function MobileEventFormPage() {
               placeholder={t('eventForm.fields.location.placeholder', 'Location')}
               style={{ flex: 1 }}
             />
-            <MapPin size={16} color="#9ca3af" />
+            <MapPin size={16} color={subtle} />
           </XStack>
         </MobileField>
 
@@ -285,11 +287,11 @@ export default function MobileEventFormPage() {
             >
               <Switch.Thumb />
             </Switch>
-            <Text fontSize="$sm" color="#111827">
+            <Text fontSize="$sm" color={text}>
               {form.published ? t('common:states.enabled', 'Enabled') : t('common:states.disabled', 'Disabled')}
             </Text>
           </XStack>
-          <Text fontSize="$xs" color="#6b7280">{t('eventForm.fields.publish.help', 'Enable if guests should see the event right away. You can change the status later.')}</Text>
+          <Text fontSize="$xs" color={muted}>{t('eventForm.fields.publish.help', 'Enable if guests should see the event right away. You can change the status later.')}</Text>
         </MobileField>
 
         <MobileField label={t('eventForm.fields.tasksMode.label', 'Tasks & challenges')}>
@@ -304,13 +306,13 @@ export default function MobileEventFormPage() {
             >
               <Switch.Thumb />
             </Switch>
-            <Text fontSize="$sm" color="#111827">
+            <Text fontSize="$sm" color={text}>
               {form.tasksEnabled
                 ? t('common:states.enabled', 'Enabled')
                 : t('common:states.disabled', 'Disabled')}
             </Text>
           </XStack>
-          <Text fontSize="$xs" color="#6b7280">
+          <Text fontSize="$xs" color={muted}>
             {form.tasksEnabled
               ? t(
                   'eventForm.fields.tasksMode.helpOn',
@@ -335,13 +337,13 @@ export default function MobileEventFormPage() {
             >
               <Switch.Thumb />
             </Switch>
-            <Text fontSize="$sm" color="#111827">
+            <Text fontSize="$sm" color={text}>
               {form.autoApproveUploads
                 ? t('common:states.enabled', 'Enabled')
                 : t('common:states.disabled', 'Disabled')}
             </Text>
           </XStack>
-          <Text fontSize="$xs" color="#6b7280">
+          <Text fontSize="$xs" color={muted}>
             {form.autoApproveUploads
               ? t(
                   'eventForm.fields.uploadVisibility.helpOn',
@@ -364,8 +366,8 @@ export default function MobileEventFormPage() {
               ...inputStyle,
               height: 48,
               borderRadius: 12,
-              border: '1px solid #e5e7eb',
-              background: '#f1f5f9',
+              border: `1px solid ${border}`,
+              background: surfaceMuted,
               fontWeight: 700,
             }}
           >