feat(mobile/ui): branded AppDialog replaces native Alert.alert

New AppDialog component and useAppDialog hook use a cream
card + Geist type + green / destructive buttons so the dialog
feels part of the Qibla design system instead of the platform
alert sheet. All eight Alert.alert call sites (submit, edit,
withdraw confirm, upload error, notifications-disabled x2,
delete-account stub) route through the new dialog. Button
gains a destructive variant for confirm-destructive flows.
Also drops a stray aws4fetch entry from the root package.json
that landed there during an earlier `bun add --filter` run.

Author: Aqib-Rime

apps/mobile/components/ui/button.tsx

@@ -19,6 +19,7 @@ const buttonVariants = cva(
         outline: "border border-line bg-white",
         ghost: "bg-white/10",
         subtle: "bg-green-tint",
+        destructive: "bg-[#b04a3a]",
       },
       size: {
         md: "py-s-4",
@@ -43,6 +44,7 @@ const labelVariants = cva("font-sans-semibold", {
       outline: "text-ink",
       ghost: "text-white",
       subtle: "text-green",
+      destructive: "text-white",
     },
     size: {
       md: "text-body",

apps/mobile/components/ui/dialog.tsx

@@ -0,0 +1,98 @@
+import { useCallback, useState } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { Button, type ButtonVariant } from "./button";
+import { Text } from "./text";
+
+export type DialogAction = {
+  label: string;
+  variant?: ButtonVariant;
+  onPress?: () => void | Promise<void>;
+};
+
+export type DialogConfig = {
+  title: string;
+  body?: string;
+  actions: DialogAction[];
+  dismissOnBackdrop?: boolean;
+};
+
+type AppDialogProps = DialogConfig & {
+  visible: boolean;
+  onClose: () => void;
+};
+
+/**
+ * Branded modal dialog matching the Qibla design system — cream card,
+ * muted body text, green/destructive buttons. Drop-in replacement for
+ * Alert.alert where we want the UI to feel part of the product.
+ */
+export function AppDialog({
+  visible,
+  onClose,
+  title,
+  body,
+  actions,
+  dismissOnBackdrop = true,
+}: AppDialogProps) {
+  return (
+    <Modal
+      visible={visible}
+      animationType="fade"
+      transparent
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <Pressable
+        onPress={dismissOnBackdrop ? onClose : undefined}
+        className="flex-1 items-center justify-center bg-black/50 px-s-6"
+      >
+        <Pressable
+          // Stop the tap from bubbling to the backdrop and dismissing the
+          // dialog when the user taps the card itself.
+          onPress={() => {}}
+          className="w-full rounded-md bg-cream p-s-5"
+          style={{ maxWidth: 420 }}
+        >
+          <Text variant="display-sm">{title}</Text>
+          {body ? (
+            <Text variant="body" tone="muted" className="mt-s-2">
+              {body}
+            </Text>
+          ) : null}
+          <View className="mt-s-5 gap-s-2">
+            {actions.map((a) => (
+              <Button
+                key={a.label}
+                label={a.label}
+                variant={a.variant ?? "primary"}
+                onPress={async () => {
+                  onClose();
+                  await a.onPress?.();
+                }}
+              />
+            ))}
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+/**
+ * Imperative-feeling API on top of <AppDialog>:
+ *   const dialog = useAppDialog();
+ *   dialog.show({ title, body, actions });
+ *   {dialog.element}
+ */
+export function useAppDialog() {
+  const [config, setConfig] = useState<DialogConfig | null>(null);
+
+  const show = useCallback((cfg: DialogConfig) => setConfig(cfg), []);
+  const hide = useCallback(() => setConfig(null), []);
+
+  const element = config ? (
+    <AppDialog visible onClose={hide} {...config} />
+  ) : null;
+
+  return { show, hide, element };
+}

apps/mobile/features/settings/components/account-screen.tsx

@@ -1,6 +1,7 @@
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
-import { Alert, Pressable, ScrollView, View } from "react-native";
+import { Pressable, ScrollView, View } from "react-native";
+import { useAppDialog } from "@/components/ui/dialog";
 import { Text } from "@/components/ui/text";
 import { signOut, useSession } from "@/lib/auth";
 import { SettingsHeader } from "./settings-header";
@@ -20,6 +21,7 @@ function formatJoinDate(input: Date | string | undefined) {
 export function AccountScreen() {
   const { data: session } = useSession();
   const user = session?.user;
+  const dialog = useAppDialog();
 
   const onSignOut = async () => {
     try {
@@ -30,11 +32,11 @@ export function AccountScreen() {
   };
 
   const onDeleteAccount = () => {
-    Alert.alert(
-      "Delete account",
-      "Account deletion is coming soon. For now, contact support via the repo's issue tracker and we'll remove your data.",
-      [{ text: "OK", style: "default" }],
-    );
+    dialog.show({
+      title: "Delete account",
+      body: "Account deletion is coming soon. For now, contact support via the repo's issue tracker and we'll remove your data.",
+      actions: [{ label: "OK" }],
+    });
   };
 
   return (
@@ -80,6 +82,8 @@ export function AccountScreen() {
           </Text>
         </Pressable>
       </ScrollView>
+
+      {dialog.element}
     </View>
   );
 }

apps/mobile/features/settings/components/email-preferences-screen.tsx

@@ -1,6 +1,7 @@
 import * as Linking from "expo-linking";
 import { StatusBar } from "expo-status-bar";
-import { Alert, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
+import { useAppDialog } from "@/components/ui/dialog";
 import { Text } from "@/components/ui/text";
 import {
   useHydrateSettings,
@@ -18,6 +19,7 @@ export function EmailPreferencesScreen() {
   useHydrateSettings();
   const prayerReminders = useSettingsStore((s) => s.prayerReminders);
   const setPrayerReminders = useSettingsStore((s) => s.setPrayerReminders);
+  const dialog = useAppDialog();
 
   const onTogglePrayerReminders = async (next: boolean) => {
     if (!next) {
@@ -27,14 +29,14 @@ export function EmailPreferencesScreen() {
     }
     const granted = await ensureNotificationPermission();
     if (!granted) {
-      Alert.alert(
-        "Notifications disabled",
-        "Enable notifications in Settings to get prayer reminders.",
-        [
-          { text: "Not now", style: "cancel" },
-          { text: "Open Settings", onPress: () => Linking.openSettings() },
+      dialog.show({
+        title: "Notifications disabled",
+        body: "Enable notifications in Settings to get prayer reminders.",
+        actions: [
+          { label: "Not now", variant: "outline" },
+          { label: "Open Settings", onPress: () => Linking.openSettings() },
         ],
-      );
+      });
       return;
     }
     setPrayerReminders(true);
@@ -71,6 +73,8 @@ export function EmailPreferencesScreen() {
           </Text>
         </View>
       </ScrollView>
+
+      {dialog.element}
     </View>
   );
 }

apps/mobile/features/settings/components/settings-screen.tsx

@@ -3,7 +3,8 @@ import * as Location from "expo-location";
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect, useState } from "react";
-import { Alert, Pressable, ScrollView, Share, View } from "react-native";
+import { Pressable, ScrollView, Share, View } from "react-native";
+import { useAppDialog } from "@/components/ui/dialog";
 import { Text } from "@/components/ui/text";
 import { signOut, useSession } from "@/lib/auth";
 import {
@@ -24,6 +25,7 @@ export function SettingsScreen() {
   const { data: session } = useSession();
   const prayerReminders = useSettingsStore((s) => s.prayerReminders);
   const setPrayerReminders = useSettingsStore((s) => s.setPrayerReminders);
+  const dialog = useAppDialog();
 
   const [locationStatus, setLocationStatus] = useState<
     "granted" | "denied" | "unknown"
@@ -45,14 +47,14 @@ export function SettingsScreen() {
     }
     const granted = await ensureNotificationPermission();
     if (!granted) {
-      Alert.alert(
-        "Notifications disabled",
-        "Enable notifications in Settings to get prayer reminders.",
-        [
-          { text: "Not now", style: "cancel" },
-          { text: "Open Settings", onPress: () => Linking.openSettings() },
+      dialog.show({
+        title: "Notifications disabled",
+        body: "Enable notifications in Settings to get prayer reminders.",
+        actions: [
+          { label: "Not now", variant: "outline" },
+          { label: "Open Settings", onPress: () => Linking.openSettings() },
         ],
-      );
+      });
       return;
     }
     setPrayerReminders(true);
@@ -163,6 +165,8 @@ export function SettingsScreen() {
           </Text>
         </View>
       </ScrollView>
+
+      {dialog.element}
     </View>
   );
 }

apps/mobile/features/submissions/components/photo-manager-modal.tsx

@@ -2,7 +2,6 @@ import { Image } from "expo-image";
 import { useState } from "react";
 import {
   ActivityIndicator,
-  Alert,
   Dimensions,
   Modal,
   Pressable,
@@ -11,6 +10,7 @@ import {
 } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Button } from "@/components/ui/button";
+import { useAppDialog } from "@/components/ui/dialog";
 import { Icon } from "@/components/ui/icon";
 import { IconButton } from "@/components/ui/icon-button";
 import { Text } from "@/components/ui/text";
@@ -39,6 +39,7 @@ export function PhotoManagerModal({
 }: Props) {
   const upload = usePickAndUploadPhotos();
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const dialog = useAppDialog();
   const remaining = maxPhotos - photos.length;
   const addDisabled = remaining <= 0 || upload.isPending;
 
@@ -53,10 +54,11 @@ export function PhotoManagerModal({
       const next = [...photos, ...urls].slice(0, maxPhotos);
       onChange(next);
     } catch (err) {
-      Alert.alert(
-        "Upload failed",
-        err instanceof Error ? err.message : "Try again.",
-      );
+      dialog.show({
+        title: "Upload failed",
+        body: err instanceof Error ? err.message : "Try again.",
+        actions: [{ label: "OK" }],
+      });
     }
   };
 
@@ -116,7 +118,7 @@ export function PhotoManagerModal({
             <View className="mt-s-4 flex-row items-center justify-center gap-s-2">
               <ActivityIndicator color="#2e5d45" />
               <Text variant="caption" tone="muted">
-                Uploading to R2…
+                Uploading photos…
               </Text>
             </View>
           ) : null}
@@ -161,6 +163,8 @@ export function PhotoManagerModal({
           url={previewUrl}
           onClose={() => setPreviewUrl(null)}
         />
+
+        {dialog.element}
       </View>
     </Modal>
   );

apps/mobile/features/submissions/components/submission-edit-screen.tsx

@@ -2,9 +2,10 @@ import { useForm, useStore } from "@tanstack/react-form";
 import { router, useLocalSearchParams } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { useEffect, useState } from "react";
-import { Alert, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Button } from "@/components/ui/button";
+import { useAppDialog } from "@/components/ui/dialog";
 import { IconButton } from "@/components/ui/icon-button";
 import { Text } from "@/components/ui/text";
 import {
@@ -25,6 +26,7 @@ export function SubmissionEditScreen() {
   const update = useUpdateMySubmission();
   const del = useDeleteMySubmission();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const dialog = useAppDialog();
 
   const form = useForm({
     defaultValues: EMPTY_SUBMISSION,
@@ -36,9 +38,11 @@ export function SubmissionEditScreen() {
           id,
           ...(value as MosqueSubmissionInput),
         });
-        Alert.alert("Saved", "Your changes are live.", [
-          { text: "OK", onPress: () => router.back() },
-        ]);
+        dialog.show({
+          title: "Saved",
+          body: "Your changes are live.",
+          actions: [{ label: "Done", onPress: () => router.back() }],
+        });
       } catch (err) {
         setErrorMessage(
           err instanceof Error ? err.message : "Could not save changes",
@@ -75,28 +79,29 @@ export function SubmissionEditScreen() {
 
   const handleDelete = () => {
     if (!id) return;
-    Alert.alert(
-      "Withdraw submission?",
-      "This removes the pending row. You can submit again later.",
-      [
-        { text: "Cancel", style: "cancel" },
+    dialog.show({
+      title: "Withdraw submission?",
+      body: "This removes the pending row. You can submit again later.",
+      actions: [
+        { label: "Cancel", variant: "outline" },
         {
-          text: "Withdraw",
-          style: "destructive",
+          label: "Withdraw",
+          variant: "destructive",
           onPress: async () => {
             try {
               await del.mutateAsync(id);
               router.back();
             } catch (err) {
-              Alert.alert(
-                "Could not withdraw",
-                err instanceof Error ? err.message : "Try again.",
-              );
+              dialog.show({
+                title: "Could not withdraw",
+                body: err instanceof Error ? err.message : "Try again.",
+                actions: [{ label: "OK" }],
+              });
             }
           },
         },
       ],
-    );
+    });
   };
 
   return (
@@ -174,6 +179,8 @@ export function SubmissionEditScreen() {
           ) : null}
         </ScrollView>
       )}
+
+      {dialog.element}
     </View>
   );
 }