modals

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>
   );

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,
       }}
     >

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 (