From 042b3d90198b0723c4147cf26dce00329a5c482d Mon Sep 17 00:00:00 2001
From: leon-morival <leon.morival@gmail.com>
Date: Mon, 6 Oct 2025 15:22:30 +0200
Subject: [PATCH] modals

---
 src/components/Alert.js                    | 55 +++++++++++++---------
 src/components/Button.js                   | 12 ++---
 src/components/ShareBtnWeb.js              |  7 +--
 src/screens/Home/Home.js                   | 15 +++++-
 src/screens/Home/HomeSave.js               |  5 +-
 src/screens/Playback/RecordPlayback.js     |  5 +-
 src/screens/Playback/RecordPlayback.web.js |  5 +-
 src/screens/Studio/Studio.js               |  5 +-
 src/screens/Writing/CreatingLyrics.js      |  5 +-
 src/screens/Writing/Lyrics.js              | 32 ++++---------
 src/screens/cover/PouchReady.js            | 36 +++++++-------
 11 files changed, 95 insertions(+), 87 deletions(-)

diff --git a/src/components/Alert.js b/src/components/Alert.js
index 0909e07..b46f1d3 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -1,12 +1,12 @@
-import React, { useState } from "react";
-import { Alert, Platform, View, Text } from "react-native";
 import { PortalProvider } from "@gorhom/portal";
+import React, { useState } from "react";
+import { Alert, Platform, Text } from "react-native";
 
-import { Fonts, Style, gutters } from "../styles";
-
+import { BlurView } from "expo-blur";
+import { View } from "react-native";
+import { Fonts, gutters } from "../styles";
+import GradientButton from "./GradientButton";
 import Overlay from "./Overlay";
-import Button from "./Button";
-
 const WebAlertModal = ({ title, description, options }) => {
   const [visible, setVisible] = useState(true);
 
@@ -26,19 +26,27 @@ const WebAlertModal = ({ title, description, options }) => {
   return (
     <PortalProvider>
       <Overlay isVisible={visible}>
-        <View
+        <BlurView
+          intensity={100}
+          tint="dark"
           style={{
-            ...Style.containerModal,
+            width: "60%",
+            maxWidth: 450,
+            minWidth: 300,
+            padding: "2.5%",
+            borderRadius: 12,
+            // ...Style.containerModal,
           }}
         >
           <Text
             style={{
               ...Fonts({
-                type: "mainTitle",
+                type: "default",
                 style: {
                   textAlign: "center",
                   marginBottom: gutters / 2,
                 },
+                fontSize: 3,
               }),
             }}
           >
@@ -58,19 +66,22 @@ const WebAlertModal = ({ title, description, options }) => {
             {description}
           </Text>
 
-          <Button
-            text={confirmOption?.text || "OK"}
-            onPress={onConfirm}
-            alternateAction={
-              cancelOption
-                ? {
-                    text: cancelOption.text,
-                    onPress: () => onCancel(),
-                  }
-                : null
-            }
-          />
-        </View>
+          <View style={{ flexDirection: "row", gap: 10 }}>
+            <GradientButton
+              title={confirmOption?.text || "OK"}
+              onPress={onConfirm}
+              containerStyle={{ flex: 1 }}
+            />
+            {cancelOption && (
+              <GradientButton
+                title={cancelOption.text}
+                onPress={onCancel}
+                colors={["#666666", "#333333"]}
+                containerStyle={{ flex: 1 }}
+              />
+            )}
+          </View>
+        </BlurView>
       </Overlay>
     </PortalProvider>
   );
diff --git a/src/components/Button.js b/src/components/Button.js
index 45e116d..d5478c2 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,14 +1,10 @@
 import { Motion } from "@legendapp/motion";
-import { Text, View } from "react-native";
 import * as Haptics from "expo-haptics";
+import { Text, View } from "react-native";
 
+import { isDesktop, isMobile, isNative } from "../hooks/useLayoutType";
 import { Fonts, Palette } from "../styles";
 import Style, { gutters, mainBorderRadius } from "../styles/Style";
-import useLayoutType, {
-  isDesktop,
-  isMobile,
-  isNative,
-} from "../hooks/useLayoutType";
 
 export default ({
   type = "primary",
@@ -130,8 +126,8 @@ export const BaseButton = ({
               backgroundColor: primaryTransparentColor,
             }
           : hasShadow
-          ? { ...Style.defaultShadows }
-          : {}),
+            ? { ...Style.defaultShadows }
+            : {}),
         ...containerStyle,
       }}
     >
diff --git a/src/components/ShareBtnWeb.js b/src/components/ShareBtnWeb.js
index d27ac27..b9a7e34 100644
--- a/src/components/ShareBtnWeb.js
+++ b/src/components/ShareBtnWeb.js
@@ -1,10 +1,11 @@
 import { BlurView } from "expo-blur";
 import { Image } from "expo-image";
 import React from "react";
-import { Alert, Platform, Pressable, Text } from "react-native";
+import { Platform, Pressable, Text } from "react-native";
 import { icons } from "../assets";
 import { Palette } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
+import alert from "./Alert";
 
 export default function ShareBtnWeb({ style }) {
   const handleShare = () => {
@@ -18,11 +19,11 @@ export default function ShareBtnWeb({ style }) {
           ...(shareUrl ? { url: shareUrl } : {}),
         })
         .catch(() => {
-          Alert.alert("Partage", "Le partage a été annulé.");
+          alert("Partage", "Le partage a été annulé.");
         });
       return;
     }
-    Alert.alert("Partage", "Fonctionnalité disponible prochainement.");
+    alert("Partage", "Fonctionnalité disponible prochainement.");
   };
 
   return (
diff --git a/src/screens/Home/Home.js b/src/screens/Home/Home.js
index fbc0960..37977c6 100644
--- a/src/screens/Home/Home.js
+++ b/src/screens/Home/Home.js
@@ -5,9 +5,10 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Alert, Platform, StyleSheet, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background } from "../../assets";
+import Alert from "../../components/Alert";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import FeatureCarousel from "../../components/FeatureCarousel/FeatureCarousel";
 import GradientButton from "../../components/GradientButton";
@@ -160,7 +161,7 @@ const Home = () => {
       {
         label: "Supprimer",
         onPress: () =>
-          Alert.alert(
+          Alert(
             "Confirmer la suppression",
             "Cette action supprimera définitivement ce projet.",
             [
@@ -303,6 +304,16 @@ const Home = () => {
             onPress={handleStageAction}
             disabled={continueDisabled}
           />
+          <BorderGradientButton
+            containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
+            title={"Test Alert"}
+            onPress={() =>
+              Alert("Test", "Ceci est un test d'alert", [
+                { text: "Annuler", style: "cancel" },
+                { text: "OK", onPress: () => console.log("OK pressé") },
+              ])
+            }
+          />
           {/* <BorderGradientButton
             containerStyle={{ width: Platform.OS === "web" ? 250 : "100%" }}
             title={"Continuer la création"}
diff --git a/src/screens/Home/HomeSave.js b/src/screens/Home/HomeSave.js
index 8917c25..d2e0980 100644
--- a/src/screens/Home/HomeSave.js
+++ b/src/screens/Home/HomeSave.js
@@ -1,11 +1,12 @@
 import { BlurView } from "expo-blur";
 import React, { useMemo, useState } from "react";
-import { Alert, FlatList, Image, Platform, Text, View } from "react-native";
+import { FlatList, Image, Platform, Text, View } from "react-native";
 import { responsiveHeight } from "react-native-responsive-dimensions";
 import { useGlobal } from "reactn";
 import { background, img } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import MoreMenu from "../../components/MoreMenu";
+import alert from "../../components/Alert";
 import { projectsRef } from "../../config/firebase";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
@@ -102,7 +103,7 @@ const HomeSave = () => {
                   {
                     label: "Supprimer",
                     onPress: () =>
-                      Alert.alert(
+                      alert(
                         "Confirmer la suppression",
                         "Cette action supprimera définitivement ce projet.",
                         [
diff --git a/src/screens/Playback/RecordPlayback.js b/src/screens/Playback/RecordPlayback.js
index 2af04ac..71b23e2 100644
--- a/src/screens/Playback/RecordPlayback.js
+++ b/src/screens/Playback/RecordPlayback.js
@@ -8,12 +8,13 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Alert, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle } from "react-native-svg";
 import GradientButton from "../../components/GradientButton";
 import KaraokeLyrics from "../../components/KaraokeLyrics";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import alert from "../../components/Alert";
 import { increment, projectsRef } from "../../config/firebase";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -358,7 +359,7 @@ const RecordPlayback = ({ route }) => {
       // Inform the user when using a simulator where recording isn't supported
       const msg = String(e?.message || e || "");
       if (/not supported on the simulator/i.test(msg)) {
-        Alert.alert(
+        alert(
           "Indisponible sur simulateur",
           "L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
           [
diff --git a/src/screens/Playback/RecordPlayback.web.js b/src/screens/Playback/RecordPlayback.web.js
index 99437be..f8881e1 100644
--- a/src/screens/Playback/RecordPlayback.web.js
+++ b/src/screens/Playback/RecordPlayback.web.js
@@ -8,12 +8,13 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Alert, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Svg, { Circle } from "react-native-svg";
 import GradientButton from "../../components/GradientButton";
 import KaraokeLyrics from "../../components/KaraokeLyrics";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import alert from "../../components/Alert";
 import { increment, projectsRef } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType";
 import Page from "../../layouts/Page";
@@ -641,7 +642,7 @@ const RecordPlayback = ({ route }) => {
       setIsPreparing(false);
       const msg = String(e?.message || e || "");
       if (/not supported on the simulator/i.test(msg)) {
-        Alert.alert(
+        alert(
           "Indisponible sur simulateur",
           "L’enregistrement vidéo n’est pas disponible sur le simulateur. Merci d’utiliser un appareil réel.",
           [
diff --git a/src/screens/Studio/Studio.js b/src/screens/Studio/Studio.js
index 6602cf8..d135990 100644
--- a/src/screens/Studio/Studio.js
+++ b/src/screens/Studio/Studio.js
@@ -1,8 +1,9 @@
-import { View, Text, ScrollView, Pressable, Alert } from "react-native";
+import { View, Text, ScrollView, Pressable } from "react-native";
 import React, { useState } from "react";
 import Page from "../../layouts/Page";
 import { background } from "../../assets";
 import GradientButton from "../../components/GradientButton";
+import alert from "../../components/Alert";
 import { navigate } from "../../navigation/NavigationService";
 import { Routes } from "../../navigation";
 import { gutters } from "../../styles";
@@ -102,7 +103,7 @@ const Studio = () => {
           disabled={!selected}
           onPress={() => {
             if (selected.musicStatus === "GENERATING") {
-              Alert.alert(
+              alert(
                 "Attention",
                 "La chanson est en cours de génération. Veuillez patienter.",
               );
diff --git a/src/screens/Writing/CreatingLyrics.js b/src/screens/Writing/CreatingLyrics.js
index 9003446..df36825 100644
--- a/src/screens/Writing/CreatingLyrics.js
+++ b/src/screens/Writing/CreatingLyrics.js
@@ -1,10 +1,11 @@
 import { BlurView } from "expo-blur";
 import React, { useEffect, useRef, useState } from "react";
-import { Alert, Image, Platform, Text, View } from "react-native";
+import { Image, Platform, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { ai } from "../../assets";
 import GradientButton from "../../components/GradientButton";
 import ProgressBar from "../../components/ProgressBar";
+import alert from "../../components/Alert";
 import firebase from "../../config/firebase";
 import { Routes } from "../../navigation";
 import { navigate } from "../../navigation/NavigationService";
@@ -145,7 +146,7 @@ const CreatingLyrics = ({ active, config, selections }) => {
         navigate(Routes.WritingLyrics);
       };
 
-      Alert.alert(
+      alert(
         "Brief à reformuler",
         error.message,
         [
diff --git a/src/screens/Writing/Lyrics.js b/src/screens/Writing/Lyrics.js
index b881827..0503cb3 100644
--- a/src/screens/Writing/Lyrics.js
+++ b/src/screens/Writing/Lyrics.js
@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { Alert, ScrollView, View } from "react-native";
+import { ScrollView, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
+import alert from "../../components/Alert";
 import MusicLandHeader from "../../components/MusicLandHeader";
 import firebase, { projectsRef } from "../../config/firebase";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -96,26 +97,14 @@ const Lyrics = ({ navigation }) => {
     return obj;
   };
 
-  const alertMessage = useCallback(
-    (title, message) => {
-      const text = [title, message].filter(Boolean).join("\n\n");
-      if (isWeb && typeof window !== "undefined") {
-        window.alert(text);
-        return;
-      }
-      Alert.alert(title, message);
-    },
-    [isWeb]
-  );
+  const alertMessage = useCallback((title, message) => {
+    alert(title, message);
+  }, []);
 
   const confirmSensitiveContent = useCallback(
-    async (title, message) => {
-      const text = [title, message].filter(Boolean).join("\n\n");
-      if (isWeb && typeof window !== "undefined") {
-        return window.confirm(text);
-      }
-      return new Promise((resolve) => {
-        Alert.alert(title, message, [
+    (title, message) =>
+      new Promise((resolve) => {
+        alert(title, message, [
           {
             text: "Annuler",
             style: "cancel",
@@ -127,9 +116,8 @@ const Lyrics = ({ navigation }) => {
             onPress: () => resolve(true),
           },
         ]);
-      });
-    },
-    [isWeb]
+      }),
+    []
   );
 
   const onValidate = useCallback(async () => {
diff --git a/src/screens/cover/PouchReady.js b/src/screens/cover/PouchReady.js
index ca73e53..e0d93e6 100644
--- a/src/screens/cover/PouchReady.js
+++ b/src/screens/cover/PouchReady.js
@@ -1,12 +1,13 @@
 import { useIsFocused } from "@react-navigation/native";
 import { Image as ExpoImage } from "expo-image";
 import React, { useCallback, useEffect } from "react";
-import { ActivityIndicator, Alert, Text, View } from "react-native";
+import { ActivityIndicator, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, icons } from "../../assets";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import alert from "../../components/Alert";
 import firebase, { tasksRef } from "../../config/firebase";
 import loaderMessages from "../../config/loaderMessages";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -66,25 +67,20 @@ const PouchReady = () => {
       !selectedProject?.cover?.generatedBackground &&
       selectedProject?.coverStatus !== "GENERATING"
     ) {
-      if (isWeb) {
-        if (typeof window !== "undefined") {
-          const shouldGenerate = window.confirm("Générer une pochette ?");
-          if (shouldGenerate) {
-            generateCover();
-          }
-        }
-        return;
-      }
-
-      Alert.alert("Attention", "Générer une pochette ?", [
-        {
-          text: "Oui",
-          onPress: generateCover,
-        },
-        {
-          text: "Non",
-        },
-      ]);
+      alert(
+        "Attention",
+        "Générer une pochette ?",
+        [
+          {
+            text: "Oui",
+            onPress: generateCover,
+          },
+          {
+            text: "Non",
+          },
+        ],
+        { cancelable: true }
+      );
     }
   }, [generateCover, isFocused, selectedProject]);