feat: modal & payments

src/components/Alert.js

@@ -1,17 +1,21 @@
 import { PortalProvider } from "@gorhom/portal";
 import React, { useState } from "react";
-import { Alert, Platform, Text } from "react-native";
+import { Alert, Platform, StyleSheet, Text, View } from "react-native";
 
 import { BlurView } from "expo-blur";
-import { View } from "react-native";
-import { Fonts, gutters } from "../styles";
+import { Fonts, Palette, gutters } from "../styles";
 import GradientButton from "./GradientButton";
+import { LinearGradient } from "./LinearGradient/LinearGradient";
 import Overlay from "./Overlay";
 const WebAlertModal = ({ title, description, options }) => {
   const [visible, setVisible] = useState(true);
 
   const confirmOption = options?.find(({ style }) => style !== "cancel");
   const cancelOption = options?.find(({ style }) => style === "cancel");
+  const hasSecondaryAction = Boolean(cancelOption);
+  const buttonContainerStyle = hasSecondaryAction
+    ? styles.actionButton
+    : styles.singleActionButton;
 
   const onConfirm = () => {
     setVisible(false);
@@ -25,63 +29,46 @@ const WebAlertModal = ({ title, description, options }) => {
 
   return (
     <PortalProvider>
-      <Overlay isVisible={visible}>
-        <BlurView
-          intensity={100}
-          tint="dark"
-          style={{
-            width: "60%",
-            maxWidth: 450,
-            minWidth: 300,
-            padding: "2.5%",
-            borderRadius: 12,
-            // ...Style.containerModal,
-          }}
-        >
-          <Text
-            style={{
-              ...Fonts({
-                type: "default",
-                style: {
-                  textAlign: "center",
-                  marginBottom: gutters / 2,
-                },
-                fontSize: 3,
-              }),
-            }}
+      <Overlay
+        isVisible={visible}
+        contentContainerStyle={styles.overlayContent}
+      >
+        <View style={styles.modalWrapper}>
+          <LinearGradient
+            colors={["rgba(255,255,255,0.18)", "rgba(255,255,255,0.04)"]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.modalBorder}
           >
-            {title}
-          </Text>
-          <Text
-            style={{
-              ...Fonts({
-                type: "default",
-                style: {
-                  textAlign: "center",
-                  marginBottom: gutters / 2,
-                },
-              }),
-            }}
-          >
-            {description}
-          </Text>
-
-          <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>
+            <BlurView intensity={100} tint="dark" style={styles.modalContainer}>
+              <Text style={styles.title}>{title}</Text>
+              <Text style={styles.description}>{description}</Text>
+              <View style={styles.divider} />
+              <View
+                style={hasSecondaryAction ? styles.actionsRow : styles.actions}
+              >
+                {cancelOption && (
+                  <GradientButton
+                    title={cancelOption.text}
+                    onPress={onCancel}
+                    colors={[
+                      "rgba(255,255,255,0.16)",
+                      "rgba(255,255,255,0.08)",
+                    ]}
+                    textStyle={styles.secondaryButtonText}
+                    gradientStyle={styles.secondaryButtonGradient}
+                    containerStyle={buttonContainerStyle}
+                  />
+                )}
+                <GradientButton
+                  title={confirmOption?.text || "OK"}
+                  onPress={onConfirm}
+                  containerStyle={buttonContainerStyle}
+                />
+              </View>
+            </BlurView>
+          </LinearGradient>
+        </View>
       </Overlay>
     </PortalProvider>
   );
@@ -126,3 +113,65 @@ export const showPremiumRequiredAlert = () =>
   );
 
 export default alert;
+
+const styles = StyleSheet.create({
+  overlayContent: {
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalWrapper: {
+    width: "90%",
+    maxWidth: 460,
+    paddingHorizontal: 12,
+  },
+  modalBorder: {
+    borderRadius: 24,
+    padding: 1,
+  },
+  modalContainer: {
+    borderRadius: 23,
+    paddingHorizontal: gutters * 1.8,
+    paddingVertical: gutters,
+    backgroundColor: "rgba(15, 12, 20, 0.9)",
+    overflow: "hidden",
+    gap: gutters * 0.75,
+  },
+  title: Fonts({
+    type: "mainTitle",
+    fontSize: 3,
+    style: { textAlign: "center" },
+  }),
+  description: Fonts({
+    type: "default",
+    color: Palette.gray,
+    fontSize: 2,
+    style: { lineHeight: 22, textAlign: "center" },
+  }),
+  divider: {
+    height: 1,
+    backgroundColor: "rgba(255,255,255,0.08)",
+    marginVertical: 0,
+  },
+  actionsRow: {
+    flexDirection: "row",
+    gap: gutters,
+    width: "100%",
+  },
+  actions: {
+    width: "100%",
+    gap: gutters,
+  },
+  actionButton: {
+    flex: 1,
+  },
+  singleActionButton: {
+    width: "100%",
+  },
+  secondaryButtonGradient: {
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.2)",
+  },
+  secondaryButtonText: {
+    color: Palette.gray,
+  },
+});