Fix auth translations and admin PWA UI

resources/js/admin/mobile/LoginStartPage.tsx

@@ -2,12 +2,18 @@ import React from 'react';
 import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Card } from '@tamagui/card';
+import { YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Spinner } from 'tamagui';
 import { ADMIN_LOGIN_PATH } from '../constants';
+import { useAdminTheme } from './theme';
 
 export default function LoginStartPage(): React.ReactElement {
   const location = useLocation();
   const navigate = useNavigate();
   const { t } = useTranslation('auth');
+  const { textStrong, muted, border, surface, shadow, appBackground } = useAdminTheme();
   const safeAreaStyle: React.CSSProperties = {
     paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
     paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
@@ -25,11 +31,34 @@ export default function LoginStartPage(): React.ReactElement {
   }, [location.search, navigate]);
 
   return (
-    <div
-      className="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-950 p-6 text-center text-white/70"
-      style={safeAreaStyle}
+    <YStack
+      alignItems="center"
+      justifyContent="center"
+      padding="$4"
+      style={{ minHeight: '100vh', backgroundImage: appBackground, ...safeAreaStyle }}
+      backgroundColor={surface}
     >
-      <p className="text-sm font-medium">{t('redirecting', 'Redirecting to login …')}</p>
-    </div>
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={border}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.16}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 10 }}
+      >
+        <YStack alignItems="center" space="$2">
+          <Spinner size="small" color={textStrong} />
+          <Text fontSize="$sm" fontWeight="700" color={textStrong}>
+            {t('redirecting', 'Redirecting to login …')}
+          </Text>
+          <Text fontSize="$xs" color={muted}>
+            {t('redirectingHint', 'One moment, preparing the login screen.')}
+          </Text>
+        </YStack>
+      </Card>
+    </YStack>
   );
 }