reza fixed alert modal theme

src/components/AlertModal.js

@@ -1,8 +1,15 @@
-import React, { useState } from "react"
+import React, { useState } from "react";
-import AwesomeAlert from 'react-native-awesome-alerts';
+import { Dimensions } from "react-native";
-const ReactNative = require('react-native');
+import { connect } from "react-redux";
+import AwesomeAlert from "react-native-awesome-alerts";
 
-const AlertModal = props => {
+//style
+import Colors from "../constants/Colors";
+
+//variables
+const { width } = Dimensions.get("window");
+
+const AlertModal = (props) => {
   const [alert, setAlert] = useState({
     show: false,
     showProgress: false,
@@ -15,12 +22,9 @@ const AlertModal = props => {
     cancelText: "بیخیال",
     confirmText: "باشه",
     confirmButtonColor: "#2980b9",
-    onCancel: () => {
+    onCancel: () => {},
-    },
+    onConfirm: () => {},
-    onConfirm: () => {
+  });
-
-    },
-  })
   const [apiAlert, setApiAlert] = useState({
     show: false,
     showProgress: false,
@@ -33,55 +37,66 @@ const AlertModal = props => {
     cancelText: "بیخیال",
     confirmText: "باشه",
     confirmButtonColor: "#2980b9",
-    onCancel: () => {
+    onCancel: () => {},
-    },
+    onConfirm: () => {},
-    onConfirm: () => {
+  });
-    },
-  })
 
   global.globalAlert = (params) => {
     setAlert({
       ...alert,
-      ...params
+      ...params,
-    })
+    });
-  }
+  };
   global.globalApiAlert = (params) => {
-
     setApiAlert({
       ...apiAlert,
-      ...params
+      ...params,
-    })
+    });
-  }
+  };
 
   function hideAlert() {
-    setAlert({ ...alert, show: false })
+    setAlert({ ...alert, show: false });
   }
   function onApiCancelPressed() {
-    globalApiAlert({ show: false })
+    globalApiAlert({ show: false });
 
-    apiAlert.onCancel()
+    apiAlert.onCancel();
   }
   function onApiConfirmPressed() {
-    globalApiAlert({ show: false })
+    globalApiAlert({ show: false });
-    apiAlert.onConfirm()
+    apiAlert.onConfirm();
   }
   function onCancelPressed() {
-    hideAlert()
+    hideAlert();
-    alert.onCancel()
+    alert.onCancel();
   }
   function onConfirmPressed() {
-    hideAlert()
+    hideAlert();
-    alert.onConfirm()
+    alert.onConfirm();
   }
-  return <>
+  return (
+    <>
       <AwesomeAlert
         show={alert.show}
         progressColor="red"
         showProgress={alert.showProgress}
         title={alert.title}
-      titleStyle={{ fontFamily : 'bold' }}
+        titleStyle={{
+          fontFamily: "bold",
+          color:
+            props.theme === "light"
+              ? Colors.theme1.gray20
+              : Colors.theme1.white,
+        }}
         message={alert.message}
-      messageStyle={{textAlign : 'right', fontFamily : 'regular'}}
+        messageStyle={{
+          textAlign: "right",
+          fontFamily: "regular",
+          color:
+            props.theme === "light"
+              ? Colors.theme1.gray20
+              : Colors.theme1.white,
+        }}
         closeOnTouchOutside={alert.closeOnTouchOutside}
         closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
         showCancelButton={alert.showCancelButton}
@@ -90,33 +105,35 @@ const AlertModal = props => {
         confirmText={alert.confirmText}
         confirmButtonColor={alert.confirmButtonColor}
         onCancelPressed={onCancelPressed}
-      onConfirmPressed={(onConfirmPressed)}
+        onConfirmPressed={onConfirmPressed}
         cancelButtonTextStyle={{
-        color : '#777',
+          color: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
-        fontFamily : 'regular',
+          fontFamily: "regular",
         }}
         confirmButtonTextStyle={{
-        fontFamily : 'regular',
+          fontFamily: "regular",
-
         }}
         contentStyle={{
-        width: ReactNative.Dimensions.get('window').width / 1.5,
+          width: width / 1.5,
         }}
         cancelButtonStyle={{
-        fontFamily : 'regular',
+          fontFamily: "regular",
-        borderColor : "#777",
+          borderColor: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
           borderWidth: 1,
-        backgroundColor : 'white',
+          backgroundColor:
+            props.theme === "light" ? Colors.theme1.white : Colors.theme1.black,
         }}
-      confirmButtonStyle={
+        confirmButtonStyle={{
-        {
+          alignItems: "center",
-          alignItems: 'center',
+          justifyContent: "center",
-          justifyContent: 'center',
+          fontFamily: "regular",
-          fontFamily : 'regular',
           borderColor: "#2980b9",
           borderWidth: 1,
-        }
+        }}
-      }
+        contentContainerStyle={{
+          backgroundColor:
+            props.theme === "light" ? "white" : Colors.theme1.black,
+        }}
         useNativeDriver={true}
       />
       <AwesomeAlert
@@ -133,21 +150,23 @@ const AlertModal = props => {
         confirmText={apiAlert.confirmText}
         confirmButtonColor={apiAlert.confirmButtonColor}
         onCancelPressed={onApiCancelPressed}
-      onConfirmPressed={(onApiConfirmPressed)}
+        onConfirmPressed={onApiConfirmPressed}
         contentStyle={{
-        width: ReactNative.Dimensions.get('window').width / 1.5
+          width: width / 1.5,
+        }}
+        confirmButtonStyle={{
+          width: width / 4,
+          alignItems: "center",
+          justifyContent: "center",
         }}
-      confirmButtonStyle={
-        {
-          width: ReactNative.Dimensions.get('window').width / 4,
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      }
         useNativeDriver={true}
       />
     </>
+  );
+};
 
-}
+const mapStateToProps = (state) => ({
+  theme: state.publicApi.theme,
+});
 
-export default AlertModal;
+export default connect(mapStateToProps)(AlertModal);

src/screens/Home/components/Scroll.js

@@ -25,8 +25,8 @@ function Scroll({ books, mobile }) {
           style={[
             tw("mr-1 overflow-hidden"),
             {
-              width: position === 0 ? mobile ? 163 : 240 : mobile ? 84 : 125,
+              width: position === 0 ? mobile ? 170 : 240 : mobile ? 84 : 125,
-              height: position === 0 ? mobile ? 245 : 350 : mobile ? 118 : 170,
+              height: position === 0 ? mobile ? 240 : 350 : mobile ? 118 : 170,
               marginLeft : position === 0 ? 16 : 4,
             },
           ]}
@@ -47,7 +47,7 @@ function Scroll({ books, mobile }) {
               ios ? "flex-wrap" : "flex-wrap-reverse"
             }`
           ),
-          { height: mobile ? 245 : 350, direction: "rtl" },
+          { height: mobile ? 242 : 350, direction: "rtl" },
         ]}
       >
         {books.slice(0,14).map((book, index) => (