Fix auth translations and admin PWA UI

resources/js/admin/mobile/QrPrintPage.tsx

@@ -7,6 +7,7 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { MobileShell, HeaderActionButton } from './components/MobileShell';
 import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
+import { MobileInput, MobileTextArea } from './components/FormControls';
 import {
   TenantEvent,
   EventQrInvite,
@@ -489,20 +490,20 @@ function TextStep({
         <Text fontSize="$sm" fontWeight="700" color={textStrong}>
           {t('events.qr.textFields', 'Texte')}
         </Text>
-        <StyledInput
+        <MobileInput
           placeholder={t('events.qr.headline', 'Headline')}
           value={textFields.headline}
-          onChangeText={(val) => updateField('headline', val)}
+          onChange={(event) => updateField('headline', event.target.value)}
         />
-        <StyledInput
+        <MobileInput
           placeholder={t('events.qr.subtitle', 'Subtitle')}
           value={textFields.subtitle}
-          onChangeText={(val) => updateField('subtitle', val)}
+          onChange={(event) => updateField('subtitle', event.target.value)}
         />
-        <StyledTextarea
+        <MobileTextArea
           placeholder={t('events.qr.description', 'Beschreibung')}
           value={textFields.description}
-          onChangeText={(val) => updateField('description', val)}
+          onChange={(event) => updateField('description', event.target.value)}
         />
       </YStack>
 
@@ -512,11 +513,11 @@ function TextStep({
         </Text>
         {textFields.instructions.map((item, idx) => (
           <XStack key={idx} alignItems="center" space="$2">
-            <StyledInput
-              flex={1}
+            <MobileInput
+              style={{ flex: 1 }}
               placeholder={t('events.qr.instructionsPlaceholder', 'Schritt hinzufügen')}
               value={item}
-              onChangeText={(val) => updateInstruction(idx, val)}
+              onChange={(event) => updateInstruction(idx, event.target.value)}
             />
             <CTAButton
               label="–"
@@ -651,60 +652,3 @@ function PreviewStep({
     </YStack>
   );
 }
-function StyledInput({
-  value,
-  onChangeText,
-  placeholder,
-  flex,
-}: {
-  value: string;
-  onChangeText: (value: string) => void;
-  placeholder?: string;
-  flex?: number;
-}) {
-  const { border } = useAdminTheme();
-  return (
-    <input
-      style={{
-        width: '100%',
-        padding: '10px 12px',
-        borderRadius: 12,
-        border: `1px solid ${border}`,
-        fontSize: 14,
-        outline: 'none',
-        flex: flex ?? undefined,
-      }}
-      value={value}
-      onChange={(e) => onChangeText(e.target.value)}
-      placeholder={placeholder}
-    />
-  );
-}
-
-function StyledTextarea({
-  value,
-  onChangeText,
-  placeholder,
-}: {
-  value: string;
-  onChangeText: (value: string) => void;
-  placeholder?: string;
-}) {
-  const { border } = useAdminTheme();
-  return (
-    <textarea
-      style={{
-        width: '100%',
-        padding: '10px 12px',
-        borderRadius: 12,
-        border: `1px solid ${border}`,
-        fontSize: 14,
-        outline: 'none',
-        minHeight: 96,
-      }}
-      value={value}
-      onChange={(e) => onChangeText(e.target.value)}
-      placeholder={placeholder}
-    />
-  );
-}