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,121 +37,136 @@ 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(){
+  function onApiCancelPressed() {
-    globalApiAlert({ show: false })
+    globalApiAlert({ show: false });
 
-    apiAlert.onCancel()
+    apiAlert.onCancel();
   }
-  function onApiConfirmPressed(){
+  function onApiConfirmPressed() {
-    globalApiAlert({ show: false })
+    globalApiAlert({ show: false });
-    apiAlert.onConfirm()
+    apiAlert.onConfirm();
   }
-  function onCancelPressed(){
+  function onCancelPressed() {
-    hideAlert()
+    hideAlert();
-    alert.onCancel()
+    alert.onCancel();
   }
-  function onConfirmPressed(){
+  function onConfirmPressed() {
-    hideAlert()
+    hideAlert();
-    alert.onConfirm()
+    alert.onConfirm();
   }
-  return <>
+  return (
-  <AwesomeAlert
+    <>
-      show={alert.show}
+      <AwesomeAlert
-      progressColor="red"
+        show={alert.show}
-      showProgress={alert.showProgress}
+        progressColor="red"
-      title={alert.title}
+        showProgress={alert.showProgress}
-      titleStyle={{ fontFamily : 'bold' }}
+        title={alert.title}
-      message={alert.message}
+        titleStyle={{
-      messageStyle={{textAlign : 'right', fontFamily : 'regular'}}
+          fontFamily: "bold",
-      closeOnTouchOutside={alert.closeOnTouchOutside}
+          color:
-      closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
+            props.theme === "light"
-      showCancelButton={alert.showCancelButton}
+              ? Colors.theme1.gray20
-      showConfirmButton={alert.showConfirmButton}
+              : Colors.theme1.white,
-      cancelText={alert.cancelText}
+        }}
-      confirmText={alert.confirmText}
+        message={alert.message}
-      confirmButtonColor={alert.confirmButtonColor}
+        messageStyle={{
-      onCancelPressed={onCancelPressed}
+          textAlign: "right",
-      onConfirmPressed={(onConfirmPressed)}
+          fontFamily: "regular",
-      cancelButtonTextStyle={{
+          color:
-        color : '#777',
+            props.theme === "light"
-        fontFamily : 'regular',
+              ? Colors.theme1.gray20
-      }}
+              : Colors.theme1.white,
-      confirmButtonTextStyle={{
+        }}
-        fontFamily : 'regular',
+        closeOnTouchOutside={alert.closeOnTouchOutside}
-
+        closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
-      }}
+        showCancelButton={alert.showCancelButton}
-      contentStyle={{
+        showConfirmButton={alert.showConfirmButton}
-        width: ReactNative.Dimensions.get('window').width / 1.5,
+        cancelText={alert.cancelText}
-      }}
+        confirmText={alert.confirmText}
-      cancelButtonStyle={{
+        confirmButtonColor={alert.confirmButtonColor}
-        fontFamily : 'regular',
+        onCancelPressed={onCancelPressed}
-        borderColor : "#777",
+        onConfirmPressed={onConfirmPressed}
-        borderWidth : 1,
+        cancelButtonTextStyle={{
-        backgroundColor : 'white',
+          color: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
-      }}
+          fontFamily: "regular",
-      confirmButtonStyle={
+        }}
-        {
+        confirmButtonTextStyle={{
-          alignItems: 'center',
+          fontFamily: "regular",
-          justifyContent: 'center',
+        }}
-          fontFamily : 'regular',
+        contentStyle={{
-          borderColor : "#2980b9",
+          width: width / 1.5,
-          borderWidth : 1,
+        }}
-        }
+        cancelButtonStyle={{
-      }
+          fontFamily: "regular",
-      useNativeDriver={true}
+          borderColor: props.theme === "light" ? "#777" : Colors.theme1.grayE3,
-  />
+          borderWidth: 1,
-    <AwesomeAlert
+          backgroundColor:
-      show={apiAlert.show}
+            props.theme === "light" ? Colors.theme1.white : Colors.theme1.black,
-      progressColor="red"
+        }}
-      showProgress={apiAlert.showProgress}
+        confirmButtonStyle={{
-      title={apiAlert.title}
+          alignItems: "center",
-      message={apiAlert.message}
+          justifyContent: "center",
-      closeOnTouchOutside={apiAlert.closeOnTouchOutside}
+          fontFamily: "regular",
-      closeOnHardwareBackPress={apiAlert.closeOnHardwareBackPress}
+          borderColor: "#2980b9",
-      showCancelButton={apiAlert.showCancelButton}
+          borderWidth: 1,
-      showConfirmButton={apiAlert.showConfirmButton}
+        }}
-      cancelText={apiAlert.cancelText}
+        contentContainerStyle={{
-      confirmText={apiAlert.confirmText}
+          backgroundColor:
-      confirmButtonColor={apiAlert.confirmButtonColor}
+            props.theme === "light" ? "white" : Colors.theme1.black,
-      onCancelPressed={onApiCancelPressed}
+        }}
-      onConfirmPressed={(onApiConfirmPressed)}
+        useNativeDriver={true}
-      contentStyle={{
+      />
-        width: ReactNative.Dimensions.get('window').width / 1.5
+      <AwesomeAlert
-      }}
+        show={apiAlert.show}
-      confirmButtonStyle={
+        progressColor="red"
-        {
+        showProgress={apiAlert.showProgress}
-          width: ReactNative.Dimensions.get('window').width / 4,
+        title={apiAlert.title}
-          alignItems: 'center',
+        message={apiAlert.message}
-          justifyContent: 'center'
+        closeOnTouchOutside={apiAlert.closeOnTouchOutside}
-        }
+        closeOnHardwareBackPress={apiAlert.closeOnHardwareBackPress}
-      }
+        showCancelButton={apiAlert.showCancelButton}
-      useNativeDriver={true}
+        showConfirmButton={apiAlert.showConfirmButton}
-    />
+        cancelText={apiAlert.cancelText}
-  </>
+        confirmText={apiAlert.confirmText}
+        confirmButtonColor={apiAlert.confirmButtonColor}
+        onCancelPressed={onApiCancelPressed}
+        onConfirmPressed={onApiConfirmPressed}
+        contentStyle={{
+          width: width / 1.5,
+        }}
+        confirmButtonStyle={{
+          width: 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) => (