Fix auth translations and admin PWA UI

resources/js/admin/mobile/AuthCallbackPage.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
 import { 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 { useAuth } from '../auth/context';
 import { ADMIN_DEFAULT_AFTER_LOGIN_PATH } from '../constants';
 import { decodeReturnTo, resolveReturnTarget } from '../lib/returnTo';
+import { useAdminTheme } from './theme';
 
 export default function AuthCallbackPage(): React.ReactElement {
   const { status } = useAuth();
   const navigate = useNavigate();
   const { t } = useTranslation('auth');
   const [redirected, setRedirected] = React.useState(false);
+  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)',
@@ -40,12 +46,34 @@ export default function AuthCallbackPage(): React.ReactElement {
   }, [destination, navigate, redirected, status]);
 
   return (
-    <div
-      className="flex min-h-screen flex-col items-center justify-center gap-3 p-6 text-center text-sm text-muted-foreground"
-      style={safeAreaStyle}
+    <YStack
+      alignItems="center"
+      justifyContent="center"
+      padding="$4"
+      style={{ minHeight: '100vh', backgroundImage: appBackground, ...safeAreaStyle }}
+      backgroundColor={surface}
     >
-      <span className="text-base font-medium text-foreground">{t('processing.title', 'Signing you in …')}</span>
-      <p className="max-w-xs text-xs text-muted-foreground">{t('processing.copy', 'One moment please while we prepare your dashboard.')}</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="$md" fontWeight="800" color={textStrong}>
+            {t('processing.title', 'Signing you in …')}
+          </Text>
+          <Text fontSize="$xs" color={muted} textAlign="center">
+            {t('processing.copy', 'One moment please while we prepare your dashboard.')}
+          </Text>
+        </YStack>
+      </Card>
+    </YStack>
   );
 }