Refine admin PWA layout and tamagui usage

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

@@ -37,13 +37,32 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   const { t } = useTranslation('mobile');
   const { count: notificationCount } = useNotificationsBadge();
   const online = useOnlineStatus();
-  const { background, surface, border, text, muted, warningBg, warningText, primary, danger, shadow } = useAdminTheme();
+  const {
+    background,
+    surface,
+    border,
+    text,
+    muted,
+    warningBg,
+    warningText,
+    primary,
+    danger,
+    shadow,
+    glassSurfaceStrong,
+    glassBorder,
+    glassShadow,
+    appBackground,
+  } = useAdminTheme();
   const backgroundColor = background;
   const surfaceColor = surface;
   const borderColor = border;
   const textColor = text;
   const mutedText = muted;
-  const headerSurface = withAlpha(surfaceColor, 0.94);
+  const headerSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.94);
+  const headerBorder = glassBorder ?? borderColor;
+  const actionSurface = glassSurfaceStrong ?? surfaceColor;
+  const actionBorder = glassBorder ?? borderColor;
+  const actionShadow = glassShadow ?? shadow;
   const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
   const [loadingEvents, setLoadingEvents] = React.useState(false);
   const [attemptedFetch, setAttemptedFetch] = React.useState(false);
@@ -152,10 +171,17 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
           width={34}
           height={34}
           borderRadius={12}
-          backgroundColor={surfaceColor}
+          backgroundColor={actionSurface}
+          borderWidth={1}
+          borderColor={actionBorder}
           alignItems="center"
           justifyContent="center"
           position="relative"
+          style={{
+            boxShadow: `0 10px 18px ${actionShadow}`,
+            backdropFilter: 'blur(12px)',
+            WebkitBackdropFilter: 'blur(12px)',
+          }}
         >
           <Bell size={16} color={textColor} />
           {notificationCount > 0 ? (
@@ -190,6 +216,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
             backgroundColor={primary}
             alignItems="center"
             justifyContent="center"
+            style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
           >
             <QrCode size={16} color="white" />
           </XStack>
@@ -200,18 +227,23 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
   );
 
   return (
-    <YStack backgroundColor={backgroundColor} minHeight="100vh" alignItems="center">
+    <YStack
+      backgroundColor={backgroundColor}
+      minHeight="100vh"
+      alignItems="center"
+      style={{ background: appBackground }}
+    >
       <YStack
         backgroundColor={headerSurface}
         borderBottomWidth={1}
-        borderColor={borderColor}
+        borderColor={headerBorder}
         paddingHorizontal="$4"
         paddingTop="$4"
         paddingBottom="$3"
-        shadowColor={shadow}
-        shadowOpacity={0.06}
-        shadowRadius={10}
-        shadowOffset={{ width: 0, height: 4 }}
+        shadowColor={actionShadow}
+        shadowOpacity={0.08}
+        shadowRadius={14}
+        shadowOffset={{ width: 0, height: 8 }}
         width="100%"
         maxWidth={800}
         position="sticky"