Completed the full mobile app polish pass: navigation feel, safe‑area consistency, input styling, list rows, FAB

patterns, skeleton loading, photo selection/bulk actions with shared‑element transitions, notification detail sheet,
  offline banner, maskable manifest icons, and route prefetching.

  Key changes

  - Navigation/shell: press feedback on all header actions, glassy sticky header and tab bar, safer bottom spacing
    (resources/js/admin/mobile/components/MobileShell.tsx, resources/js/admin/mobile/components/BottomNav.tsx).
  - Forms + lists: shared mobile form controls, list‑style rows in settings/profile, consistent inputs across core
    flows (resources/js/admin/mobile/components/FormControls.tsx, resources/js/admin/mobile/SettingsPage.tsx,
    resources/js/admin/mobile/ProfilePage.tsx, resources/js/admin/mobile/EventFormPage.tsx, resources/js/admin/mobile/
    EventMembersPage.tsx, resources/js/admin/mobile/EventTasksPage.tsx, resources/js/admin/mobile/
    EventGuestNotificationsPage.tsx, resources/js/admin/mobile/NotificationsPage.tsx, resources/js/admin/mobile/
    EventPhotosPage.tsx, resources/js/admin/mobile/EventsPage.tsx).
  - Media workflows: shared‑element photo transitions, selection mode + bulk actions bar (resources/js/admin/mobile/
    EventPhotosPage.tsx).
  - Loading UX: shimmering skeletons (resources/css/app.css, resources/js/admin/mobile/components/Primitives.tsx).
  - PWA polish + perf: maskable icons, offline banner hook, and route prefetch (public/manifest.json, resources/js/
    admin/mobile/hooks/useOnlineStatus.tsx, resources/js/admin/mobile/prefetch.ts, resources/js/admin/main.tsx).

resources/js/admin/mobile/EventMembersPage.tsx

@@ -5,8 +5,9 @@ import { UserPlus, Trash2, Copy, RefreshCcw } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
-import { MobileShell } from './components/MobileShell';
-import { MobileCard, CTAButton, PillBadge } from './components/Primitives';
+import { MobileShell, HeaderActionButton } from './components/MobileShell';
+import { MobileCard, CTAButton, PillBadge, SkeletonCard } from './components/Primitives';
+import { MobileField, MobileInput, MobileSelect } from './components/FormControls';
 import { EventMember, getEventMembers, inviteEventMember, removeEventMember } from '../api';
 import { isAuthError } from '../auth/tokens';
 import { getApiErrorMessage } from '../lib/apiError';
@@ -97,9 +98,9 @@ export default function MobileEventMembersPage() {
       title={t('events.members.title', 'Guest Management')}
       onBack={() => navigate(-1)}
       headerActions={
-        <Pressable onPress={() => load()}>
+        <HeaderActionButton onPress={() => load()} ariaLabel={t('common.refresh', 'Refresh')}>
           <RefreshCcw size={18} color="#0f172a" />
-        </Pressable>
+        </HeaderActionButton>
       }
     >
       {error ? (
@@ -115,34 +116,31 @@ export default function MobileEventMembersPage() {
           {t('events.members.inviteTitle', 'Invite Member')}
         </Text>
         <YStack space="$2">
-          <Field label={t('events.members.name', 'Name')}>
-            <input
+          <MobileField label={t('events.members.name', 'Name')}>
+            <MobileInput
               type="text"
               value={invite.name}
               onChange={(e) => setInvite((prev) => ({ ...prev, name: e.target.value }))}
               placeholder="Alex Example"
-              style={inputStyle}
             />
-          </Field>
-          <Field label={t('events.members.email', 'Email')}>
-            <input
+          </MobileField>
+          <MobileField label={t('events.members.email', 'Email')}>
+            <MobileInput
               type="email"
               value={invite.email}
               onChange={(e) => setInvite((prev) => ({ ...prev, email: e.target.value }))}
               placeholder="alex@example.com"
-              style={inputStyle}
             />
-          </Field>
-          <Field label={t('events.members.role', 'Role')}>
-            <select
+          </MobileField>
+          <MobileField label={t('events.members.role', 'Role')}>
+            <MobileSelect
               value={invite.role}
               onChange={(e) => setInvite((prev) => ({ ...prev, role: e.target.value as EventMember['role'] }))}
-              style={{ ...inputStyle, height: 44 }}
             >
               <option value="member">{t('events.members.roleMember', 'Member')}</option>
               <option value="tenant_admin">{t('events.members.roleAdmin', 'Admin')}</option>
-            </select>
-          </Field>
+            </MobileSelect>
+          </MobileField>
           <CTAButton label={saving ? t('common.saving', 'Saving...') : t('events.members.invite', 'Send Invite')} onPress={() => handleInvite()} />
           {saving ? (
             <Text fontSize="$xs" color="#4b5563">
@@ -152,20 +150,12 @@ export default function MobileEventMembersPage() {
         </YStack>
       </MobileCard>
 
-      <input
+      <MobileInput
         type="search"
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         placeholder={t('events.members.search', 'Search members')}
-        style={{
-          width: '100%',
-          height: 38,
-          borderRadius: 10,
-          border: '1px solid #e5e7eb',
-          padding: '0 12px',
-          fontSize: 13,
-          background: 'white',
-        }}
+        compact
       />
 
       <MobileCard space="$3">
@@ -194,7 +184,7 @@ export default function MobileEventMembersPage() {
         {loading ? (
           <YStack space="$2">
             {Array.from({ length: 4 }).map((_, idx) => (
-              <MobileCard key={`m-${idx}`} height={70} opacity={0.6} />
+              <SkeletonCard key={`m-${idx}`} height={70} />
             ))}
           </YStack>
         ) : members.length === 0 ? (
@@ -286,24 +276,3 @@ export default function MobileEventMembersPage() {
     </MobileShell>
   );
 }
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <YStack space="$1.5">
-      <Text fontSize="$sm" fontWeight="800" color="#111827">
-        {label}
-      </Text>
-      {children}
-    </YStack>
-  );
-}
-
-const inputStyle: React.CSSProperties = {
-  width: '100%',
-  height: 42,
-  borderRadius: 10,
-  border: '1px solid #e5e7eb',
-  padding: '0 12px',
-  fontSize: 14,
-  background: 'white',
-};