Fix auth translations and admin PWA UI

resources/js/admin/mobile/components/LegalConsentSheet.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
-import { YStack } from '@tamagui/stacks';
+import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
+import { Checkbox } from '@tamagui/checkbox';
+import { Check } from 'lucide-react';
 import { MobileSheet } from './Sheet';
 import { CTAButton } from './Primitives';
 import { useAdminTheme } from '../theme';
@@ -41,17 +43,6 @@ export function LegalConsentSheet({
   const [acceptedTerms, setAcceptedTerms] = React.useState(false);
   const [acceptedWaiver, setAcceptedWaiver] = React.useState(false);
   const [error, setError] = React.useState<string | null>(null);
-  const checkboxStyle = {
-    marginTop: 4,
-    width: 18,
-    height: 18,
-    accentColor: primary,
-    backgroundColor: surface,
-    border: `1px solid ${border}`,
-    borderRadius: 4,
-    appearance: 'auto',
-    WebkitAppearance: 'auto',
-  } as any;
 
   React.useEffect(() => {
     if (open) {
@@ -111,36 +102,60 @@ export function LegalConsentSheet({
           {copy?.description ?? t('events.legalConsent.description', 'Please confirm the legal notes before buying an add-on.')}
         </Text>
         {requireTerms ? (
-          <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-            <input
-              type="checkbox"
+          <XStack space="$3" alignItems="flex-start">
+            <Checkbox
+              id="legal-terms"
+              size="$4"
               checked={acceptedTerms}
-              onChange={(event) => setAcceptedTerms(event.target.checked)}
-              style={checkboxStyle}
-            />
-            <Text fontSize="$sm" color={text}>
+              onCheckedChange={(checked) => setAcceptedTerms(Boolean(checked))}
+              borderWidth={1}
+              borderColor={border}
+              backgroundColor={surface}
+            >
+              <Checkbox.Indicator>
+                <Check size={14} color={primary} />
+              </Checkbox.Indicator>
+            </Checkbox>
+            <Text
+              fontSize="$sm"
+              color={text}
+              onPress={() => setAcceptedTerms((prev) => !prev)}
+              flex={1}
+            >
               {copy?.checkboxTerms ?? t(
                 'events.legalConsent.checkboxTerms',
                 'I have read and accept the Terms & Conditions, Privacy Policy, and Right of Withdrawal.',
               )}
             </Text>
-          </label>
+          </XStack>
         ) : null}
         {requireWaiver ? (
-          <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
-            <input
-              type="checkbox"
+          <XStack space="$3" alignItems="flex-start">
+            <Checkbox
+              id="legal-waiver"
+              size="$4"
               checked={acceptedWaiver}
-              onChange={(event) => setAcceptedWaiver(event.target.checked)}
-              style={checkboxStyle}
-            />
-            <Text fontSize="$sm" color={text}>
+              onCheckedChange={(checked) => setAcceptedWaiver(Boolean(checked))}
+              borderWidth={1}
+              borderColor={border}
+              backgroundColor={surface}
+            >
+              <Checkbox.Indicator>
+                <Check size={14} color={primary} />
+              </Checkbox.Indicator>
+            </Checkbox>
+            <Text
+              fontSize="$sm"
+              color={text}
+              onPress={() => setAcceptedWaiver((prev) => !prev)}
+              flex={1}
+            >
               {copy?.checkboxWaiver ?? t(
                 'events.legalConsent.checkboxWaiver',
                 'I expressly request immediate provision of the digital service and understand my right of withdrawal expires once fulfilled.',
               )}
             </Text>
-          </label>
+          </XStack>
         ) : null}
       </YStack>
     </MobileSheet>