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