further improvements for the mobile admin

resources/js/admin/DevTenantSwitcher.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Loader2, PanelLeftClose, PanelRightOpen } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
+import { XStack, YStack } from '@tamagui/stacks';
+import { SizableText as Text } from '@tamagui/text';
+import { Button } from '@tamagui/button';
+import { useTheme } from '@tamagui/core';
 
 const DEV_TENANT_KEYS = [
   { key: 'cust-standard-empty', label: 'Endkunde – Standard (kein Event)' },
@@ -26,6 +28,7 @@ type DevTenantSwitcherProps = {
 
 export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: DevTenantSwitcherProps) {
   const helper = window.fotospielDemoAuth;
+  const theme = useTheme();
   const [loggingIn, setLoggingIn] = React.useState<string | null>(null);
   const [collapsed, setCollapsed] = React.useState<boolean>(() => {
     if (typeof window === 'undefined') {
@@ -59,72 +62,86 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
   if (variant === 'inline') {
     if (collapsed) {
       return (
-        <button
-          type="button"
-          className="inline-flex items-center gap-2 rounded-full border border-amber-200 bg-white/95 px-3 py-1.5 text-xs font-semibold text-amber-700 shadow-sm shadow-amber-200/60 transition hover:bg-amber-50"
-          onClick={() => setCollapsed(false)}
+        <Button
+          size="$2"
+          theme="yellow"
+          onPress={() => setCollapsed(false)}
+          borderRadius={999}
+          icon={<PanelRightOpen size={16} />}
         >
-          <PanelRightOpen className="h-4 w-4" />
           Demo tenants
-        </button>
+        </Button>
       );
     }
 
     return (
-      <div className="relative">
-        <div className="pointer-events-auto flex max-w-xs flex-col gap-2 rounded-xl border border-amber-200 bg-white/95 p-3 text-xs shadow-xl shadow-amber-200/60">
-          <div className="flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <strong className="text-amber-800">Demo tenants</strong>
-              <span className="text-[10px] uppercase tracking-wide text-amber-600">Dev mode</span>
-            </div>
-            <button
-              type="button"
-              onClick={() => setCollapsed(true)}
-              className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-amber-200 bg-white text-amber-600 transition hover:bg-amber-50"
-              aria-label="Switcher minimieren"
+      <YStack
+        borderWidth={1}
+        borderColor="rgba(234,179,8,0.5)"
+        backgroundColor="rgba(255,255,255,0.95)"
+        padding="$3"
+        space="$2"
+        borderRadius="$4"
+        shadowColor="#f59e0b"
+        shadowOpacity={0.25}
+        shadowRadius={14}
+        shadowOffset={{ width: 0, height: 8 }}
+        maxWidth={320}
+      >
+        <XStack alignItems="center" justifyContent="space-between">
+          <XStack alignItems="center" space="$2">
+            <Text fontSize={13} fontWeight="800" color="#92400e">
+              Demo tenants
+            </Text>
+            <Text fontSize={10} color="#a16207" textTransform="uppercase" letterSpacing={1}>
+              Dev mode
+            </Text>
+          </XStack>
+          <Button
+            size="$2"
+            theme="yellow"
+            circular
+            icon={<PanelLeftClose size={14} />}
+            onPress={() => setCollapsed(true)}
+            aria-label="Switcher minimieren"
+          />
+        </XStack>
+        <YStack space="$1">
+          {DEV_TENANT_KEYS.map(({ key, label }) => (
+            <Button
+              key={key}
+              size="$3"
+              variant="outlined"
+              theme="yellow"
+              disabled={Boolean(loggingIn)}
+              onPress={() => void handleLogin(key)}
+              icon={loggingIn === key ? <Loader2 size={14} className="animate-spin" /> : undefined}
             >
-              <PanelLeftClose className="h-4 w-4" />
-            </button>
-          </div>
-          <div className="space-y-1">
-            {DEV_TENANT_KEYS.map(({ key, label }) => (
-              <Button
-                key={key}
-                variant="outline"
-                className="w-full border-amber-200 text-amber-800 hover:bg-amber-50"
-                disabled={Boolean(loggingIn)}
-                onClick={() => void handleLogin(key)}
-              >
-                {loggingIn === key ? (
-                  <>
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    Verbinde...
-                  </>
-                ) : (
-                  label
-                )}
-              </Button>
-            ))}
-          </div>
-        </div>
-      </div>
+              {loggingIn === key ? 'Verbinde...' : label}
+            </Button>
+          ))}
+        </YStack>
+      </YStack>
     );
   }
 
   if (collapsed) {
     return (
-      <button
-        type="button"
-        className="pointer-events-auto fixed right-4 z-[1000] flex items-center gap-2 rounded-full border border-amber-200 bg-white/95 px-4 py-2 text-sm font-medium text-amber-700 shadow-lg shadow-amber-200/60 transition hover:bg-amber-50"
-        style={{ bottom: bottomOffset }}
-        onClick={() => setCollapsed(false)}
-      >
-        <PanelRightOpen className="h-4 w-4" />
-        Demo tenants
-      </button>
-    );
-  }
+      <Button
+        size="$3"
+        theme="yellow"
+        icon={<PanelRightOpen size={16} />}
+        borderRadius={999}
+        position="fixed"
+      right="$4"
+      zIndex={1000}
+      onPress={() => setCollapsed(false)}
+      style={{ bottom: bottomOffset + 70 }}
+    >
+      Demo tenants
+    </Button>
+  );
+}
 
   async function handleLogin(key: string) {
     if (!helper) return;
@@ -138,51 +155,64 @@ export function DevTenantSwitcher({ bottomOffset = 16, variant = 'floating' }: D
   }
 
   return (
-    <div
-      className="pointer-events-auto fixed right-4 z-[1000] flex max-w-xs flex-col gap-2 rounded-xl border border-amber-200 bg-white/95 p-3 text-sm shadow-xl shadow-amber-200/60"
-      style={{ bottom: bottomOffset }}
+    <YStack
+      position="fixed"
+      right="$4"
+      zIndex={1000}
+      maxWidth={320}
+      space="$2"
+      borderWidth={1}
+      borderColor="rgba(234,179,8,0.5)"
+      backgroundColor="rgba(255,255,255,0.95)"
+      padding="$3"
+      borderRadius="$4"
+      shadowColor="#f59e0b"
+      shadowOpacity={0.25}
+      shadowRadius={14}
+      shadowOffset={{ width: 0, height: 8 }}
+      pointerEvents="auto"
+      style={{ bottom: bottomOffset + 70 }}
     >
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex items-center gap-2">
-          <strong className="text-amber-800">Demo tenants</strong>
-          <span className="text-xs uppercase tracking-wide text-amber-600">Dev mode</span>
-        </div>
-        <button
-          type="button"
-          onClick={() => setCollapsed(true)}
-          className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-amber-200 bg-white text-amber-600 transition hover:bg-amber-50"
+      <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center" space="$2">
+          <Text fontSize={13} fontWeight="800" color="#92400e">
+            Demo tenants
+          </Text>
+          <Text fontSize={10} color="#a16207" textTransform="uppercase" letterSpacing={1}>
+            Dev mode
+          </Text>
+        </XStack>
+        <Button
+          size="$2"
+          theme="yellow"
+          circular
+          icon={<PanelLeftClose size={14} />}
+          onPress={() => setCollapsed(true)}
           aria-label="Switcher minimieren"
-        >
-          <PanelLeftClose className="h-4 w-4" />
-        </button>
-      </div>
-      <p className="text-xs text-amber-700">
+        />
+      </XStack>
+      <Text fontSize={11} color="#a16207">
         Select a seeded tenant to mint Sanctum PATs and jump straight into their admin space. Available only in development builds.
-      </p>
-      <div className="space-y-1">
+      </Text>
+      <YStack space="$1">
         {DEV_TENANT_KEYS.map(({ key, label }) => (
           <Button
             key={key}
-            variant="outline"
-            className="w-full border-amber-200 text-amber-800 hover:bg-amber-50"
+            size="$3"
+            variant="outlined"
+            theme="yellow"
             disabled={Boolean(loggingIn)}
-            onClick={() => void handleLogin(key)}
+            onPress={() => void handleLogin(key)}
+            icon={loggingIn === key ? <Loader2 size={14} className="animate-spin" /> : undefined}
           >
-            {loggingIn === key ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                Verbinde...
-              </>
-            ) : (
-              label
-            )}
+            {loggingIn === key ? 'Verbinde...' : label}
           </Button>
         ))}
-      </div>
-      <p className="text-[10px] text-amber-600">
-        Console: <code>fotospielDemoAuth.loginAs('lumen')</code>
-      </p>
-    </div>
+      </YStack>
+      <Text fontSize={10} color="#a16207">
+        Console: <Text as="span" fontFamily="$mono">fotospielDemoAuth.loginAs('lumen')</Text>
+      </Text>
+    </YStack>
   );
 }