Fix auth translations and admin PWA UI

resources/js/admin/mobile/ProfilePage.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { LogOut, User, Settings, Shield, Globe, Moon, Download } from 'lucide-react';
+import { User, Settings, Globe, Moon, Download, LogOut } from 'lucide-react';
+import { Avatar } from '@tamagui/avatar';
+import { Card } from '@tamagui/card';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
-import { Pressable } from '@tamagui/react-native-web-lite';
 import { YGroup } from '@tamagui/group';
 import { ListItem } from '@tamagui/list-item';
 import { MobileShell } from './components/MobileShell';
-import { MobileCard, CTAButton } from './components/Primitives';
+import { CTAButton } from './components/Primitives';
 import { MobileSelect } from './components/FormControls';
 import { useAuth } from '../auth/context';
 import { fetchTenantProfile } from '../api';
@@ -16,6 +17,7 @@ import { adminPath, ADMIN_DATA_EXPORTS_PATH, ADMIN_PROFILE_ACCOUNT_PATH } from '
 import i18n from '../i18n';
 import { useAppearance } from '@/hooks/use-appearance';
 import { useBackNavigation } from './hooks/useBackNavigation';
+import { withAlpha } from './components/colors';
 import { useAdminTheme } from './theme';
 
 export default function MobileProfilePage() {
@@ -23,7 +25,7 @@ export default function MobileProfilePage() {
   const navigate = useNavigate();
   const { t } = useTranslation('management');
   const { appearance, updateAppearance } = useAppearance();
-  const { textStrong, muted, border, accentSoft, primary, subtle } = useAdminTheme();
+  const { textStrong, muted, border, accentSoft, primary, subtle, surface, surfaceMuted, shadow, danger } = useAdminTheme();
   const textColor = textStrong;
   const mutedText = muted;
   const borderColor = border;
@@ -54,100 +56,155 @@ export default function MobileProfilePage() {
       title={t('mobileProfile.title', 'Profile')}
       onBack={back}
     >
-      <MobileCard space="$3" alignItems="center">
-        <XStack
-          width={64}
-          height={64}
-          borderRadius={20}
-          alignItems="center"
-          justifyContent="center"
-          backgroundColor={avatarBg}
-        >
-          <User size={28} color={primary} />
-        </XStack>
-        <Text fontSize="$md" fontWeight="800" color={textColor}>
-          {name}
-        </Text>
-        <Text fontSize="$sm" color={mutedText}>
-          {email}
-        </Text>
-        {role ? (
-          <Text fontSize="$xs" color={mutedText}>
-            {role}
-          </Text>
-        ) : null}
-      </MobileCard>
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={borderColor}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.16}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 10 }}
+      >
+        <YStack space="$2.5" alignItems="center">
+          <Avatar size="$7" borderRadius={20} backgroundColor={avatarBg}>
+            <Avatar.Fallback>
+              <User size={28} color={primary} />
+            </Avatar.Fallback>
+          </Avatar>
+          <YStack space="$0.5" alignItems="center">
+            <Text fontSize="$md" fontWeight="800" color={textColor}>
+              {name}
+            </Text>
+            <Text fontSize="$sm" color={mutedText}>
+              {email}
+            </Text>
+            {role ? (
+              <Text fontSize="$xs" color={mutedText}>
+                {role}
+              </Text>
+            ) : null}
+          </YStack>
+        </YStack>
+      </Card>
 
-      <MobileCard space="$3">
-        <Text fontSize="$md" fontWeight="800" color={textColor}>
-          {t('mobileProfile.settings', 'Settings')}
-        </Text>
-        <YStack space="$4">
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={borderColor}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.16}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 10 }}
+      >
+        <YStack space="$2.5">
+          <XStack
+            alignItems="center"
+            paddingHorizontal="$3"
+            paddingVertical="$1.5"
+            borderRadius={999}
+            borderWidth={1}
+            borderColor={borderColor}
+            backgroundColor={surfaceMuted}
+          >
+            <Text fontSize="$xs" fontWeight="800" color={textColor}>
+              {t('mobileProfile.settings', 'Settings')}
+            </Text>
+          </XStack>
           <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: borderColor, overflow: "hidden" } as any)}>
             <YGroup.Item>
-              <Pressable onPress={() => navigate(ADMIN_PROFILE_ACCOUNT_PATH)}>
-                <ListItem
-                  hoverTheme
-                  pressTheme
-                  paddingVertical="$2"
-                  paddingHorizontal="$3"
-                  title={
-                    <Text fontSize="$sm" color={textColor}>
-                      {t('mobileProfile.account', 'Account bearbeiten')}
-                    </Text>
-                  }
-                  iconAfter={<Settings size={18} color={subtle} />}
-                />
-              </Pressable>
+              <ListItem
+                hoverTheme
+                pressTheme
+                paddingVertical="$2"
+                paddingHorizontal="$3"
+                title={
+                  <Text fontSize="$sm" color={textColor}>
+                    {t('mobileProfile.account', 'Account bearbeiten')}
+                  </Text>
+                }
+                iconAfter={<Settings size={18} color={subtle} />}
+                onPress={() => navigate(ADMIN_PROFILE_ACCOUNT_PATH)}
+              />
             </YGroup.Item>
             <YGroup.Item>
-              <Pressable onPress={() => navigate(adminPath('/mobile/billing#packages'))}>
-                <ListItem
-                  hoverTheme
-                  pressTheme
-                  paddingVertical="$2"
-                  paddingHorizontal="$3"
-                  title={
-                    <Text fontSize="$sm" color={textColor}>
-                      {t('billing.sections.packages.title', 'Packages & Billing')}
-                    </Text>
-                  }
-                  iconAfter={<Settings size={18} color={subtle} />}
-                />
-              </Pressable>
+              <ListItem
+                hoverTheme
+                pressTheme
+                paddingVertical="$2"
+                paddingHorizontal="$3"
+                title={
+                  <Text fontSize="$sm" color={textColor}>
+                    {t('billing.sections.packages.title', 'Packages & Billing')}
+                  </Text>
+                }
+                iconAfter={<Settings size={18} color={subtle} />}
+                onPress={() => navigate(adminPath('/mobile/billing#packages'))}
+              />
             </YGroup.Item>
             <YGroup.Item>
-              <Pressable onPress={() => navigate(adminPath('/mobile/billing#invoices'))}>
-                <ListItem
-                  hoverTheme
-                  pressTheme
-                  paddingVertical="$2"
-                  paddingHorizontal="$3"
-                  title={
-                    <Text fontSize="$sm" color={textColor}>
-                      {t('billing.sections.invoices.title', 'Invoices & Payments')}
-                    </Text>
-                  }
-                  iconAfter={<Settings size={18} color={subtle} />}
-                />
-              </Pressable>
+              <ListItem
+                hoverTheme
+                pressTheme
+                paddingVertical="$2"
+                paddingHorizontal="$3"
+                title={
+                  <Text fontSize="$sm" color={textColor}>
+                    {t('billing.sections.invoices.title', 'Invoices & Payments')}
+                  </Text>
+                }
+                iconAfter={<Settings size={18} color={subtle} />}
+                onPress={() => navigate(adminPath('/mobile/billing#invoices'))}
+              />
             </YGroup.Item>
             <YGroup.Item>
-              <Pressable onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}>
-                <ListItem
-                  hoverTheme
-                  pressTheme
-                  paddingVertical="$2"
-                  paddingHorizontal="$3"
-                  title={
-                    <Text fontSize="$sm" color={textColor}>
-                      {t('dataExports.title', 'Data exports')}
-                    </Text>
-                  }
-                  iconAfter={<Download size={18} color={subtle} />}
-                />
-              </Pressable>
+              <ListItem
+                hoverTheme
+                pressTheme
+                paddingVertical="$2"
+                paddingHorizontal="$3"
+                title={
+                  <Text fontSize="$sm" color={textColor}>
+                    {t('dataExports.title', 'Data exports')}
+                  </Text>
+                }
+                iconAfter={<Download size={18} color={subtle} />}
+                onPress={() => navigate(ADMIN_DATA_EXPORTS_PATH)}
+              />
             </YGroup.Item>
+          </YGroup>
+        </YStack>
+      </Card>
+
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={borderColor}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.16}
+        shadowRadius={16}
+        shadowOffset={{ width: 0, height: 10 }}
+      >
+        <YStack space="$2.5">
+          <XStack
+            alignItems="center"
+            paddingHorizontal="$3"
+            paddingVertical="$1.5"
+            borderRadius={999}
+            borderWidth={1}
+            borderColor={borderColor}
+            backgroundColor={surfaceMuted}
+          >
+            <Text fontSize="$xs" fontWeight="800" color={textColor}>
+              {t('mobileProfile.preferences', 'Preferences')}
+            </Text>
+          </XStack>
+          <YGroup {...({ borderRadius: "$4", borderWidth: 1, borderColor: borderColor, overflow: "hidden" } as any)}>
             <YGroup.Item>
               <ListItem
                 paddingVertical="$2"
@@ -205,15 +262,48 @@ export default function MobileProfilePage() {
             </YGroup.Item>
           </YGroup>
         </YStack>
-      </MobileCard>
+      </Card>
 
-      <CTAButton
-        label={t('mobileProfile.logout', 'Log out')}
-        onPress={() => {
-          logout();
-          navigate(adminPath('/logout'));
-        }}
-      />
+      <Card
+        borderRadius={22}
+        borderWidth={2}
+        borderColor={withAlpha(danger, 0.4)}
+        backgroundColor={surface}
+        padding="$3"
+        shadowColor={shadow}
+        shadowOpacity={0.12}
+        shadowRadius={12}
+        shadowOffset={{ width: 0, height: 6 }}
+      >
+        <YStack space="$2">
+          <XStack alignItems="center" space="$2">
+            <XStack
+              width={36}
+              height={36}
+              borderRadius={12}
+              alignItems="center"
+              justifyContent="center"
+              backgroundColor={withAlpha(danger, 0.12)}
+            >
+              <LogOut size={16} color={danger} />
+            </XStack>
+            <Text fontSize="$sm" fontWeight="800" color={textColor}>
+              {t('mobileProfile.logoutTitle', 'Sign out')}
+            </Text>
+          </XStack>
+          <Text fontSize="$xs" color={mutedText}>
+            {t('mobileProfile.logoutHint', 'Sign out from this device.')}
+          </Text>
+          <CTAButton
+            label={t('mobileProfile.logout', 'Log out')}
+            tone="danger"
+            onPress={() => {
+              logout();
+              navigate(adminPath('/logout'));
+            }}
+          />
+        </YStack>
+      </Card>
     </MobileShell>
   );
 }