From e492530a05701fb1cef7c0407d682ab83ac9a267 Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Fri, 4 Mar 2022 20:16:42 +0330
Subject: [PATCH] reza added something

---
 src/components/Drawer.js               | 54 ++++++++++++++++++--------
 src/screens/Contact/Box.js             | 32 ++++++++++-----
 src/screens/Contact/index.js           |  9 +----
 src/screens/Faq/components/Instance.js | 32 +++++++++++----
 src/screens/Faq/index.js               |  2 +-
 5 files changed, 88 insertions(+), 41 deletions(-)

diff --git a/src/components/Drawer.js b/src/components/Drawer.js
index 91ccc34..1f2ce31 100644
--- a/src/components/Drawer.js
+++ b/src/components/Drawer.js
@@ -21,9 +21,6 @@ import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 import Colors from "../constants/Colors";
 
-const width = Dimensions.get("window").width;
-const height = Dimensions.get("window").height;
-
 if (
   Platform.OS === "android" &&
   UIManager.setLayoutAnimationEnabledExperimental
@@ -31,7 +28,10 @@ if (
   UIManager.setLayoutAnimationEnabledExperimental(true);
 }
 
-const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
+const Drawer = ({ position, setBoxPosition, user, mobile }) => {
+  const [height, setHeight] = useState(Dimensions.get("window").height);
+  const [width, setWidth] = useState(Dimensions.get("window").width);
+
   const colorScheme = Appearance.getColorScheme();
   const [routes, setRoutes] = useState([
     {
@@ -83,7 +83,11 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
     return (
       <TouchableOpacity
         style={[
-          tw("w-full flex flex-row-reverse justify-start items-end mt-6"),
+          tw(
+            `w-full flex flex-row-reverse justify-start items-end ${
+              mobile ? "mt-6" : "mt-10"
+            }`
+          ),
           {},
         ]}
         onPress={() => navigation.navigate(route.route)}
@@ -92,7 +96,10 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
         <Text
           style={[
             tw("mr-2"),
-            { fontFamily: "regular", fontSize: fontSize.base },
+            {
+              fontFamily: "regular",
+              fontSize: mobile ? fontSize.base : fontSize.lg,
+            },
           ]}
         >
           {route.name}
@@ -101,6 +108,11 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
     );
   };
 
+  const onLayout = () => {
+    setHeight(Dimensions.get("window").height);
+    setWidth(Dimensions.get("window").width);
+  };
+
   return (
     <View
       style={[
@@ -112,6 +124,7 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
           zIndex: 10000,
         },
       ]}
+      onLayout={() => onLayout()}
     >
       <Pressable
         onPress={() => setBoxPosition()}
@@ -124,43 +137,51 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
       <View style={[tw("w-4/5 bg-white h-full flex flex-col")]}>
         <View
           style={[
-            tw("flex flex-col items-end pt-3 pb-1 px-4"),
+            tw("flex flex-col items-end pt-12 pb-1 px-4"),
             { backgroundColor: Colors.theme1[colorScheme].greenCF },
           ]}
         >
-          {user?.picFileId ? (
+          {user?.picFileIds ? (
             <Image
-              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
-              style={[tw("rounded-full"), { width: 60, height: 60 }]}
+              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
+              style={[
+                tw("rounded-full"),
+                { width: mobile ? 60 : 100, height: mobile ? 60 : 100 },
+              ]}
             />
           ) : (
             <View
               style={[
                 tw("rounded-full bg-gray-200"),
-                { minWidth: 60, minHeight: 60, zIndex : 1 },
+                {
+                  width: mobile ? 60 : 100,
+                  height: mobile ? 60 : 100,
+                  zIndex: 1,
+                },
               ]}
             ></View>
           )}
           <View
             style={tw(
-              "flex flex-row-reverse w-full justify-between px-2 pb-3 mt-1"
+              "flex flex-row-reverse w-full justify-between px-2 pb-3 mt-2"
             )}
           >
             <View style={tw("flex flex-col")}>
               <Text
                 style={{
-                  fontSize: fontSize.lg,
+                  fontSize: mobile ? fontSize.lg : fontSize.xl,
                   color: "white",
-                  fontFamily: "bold",
+                  fontFamily: "demi",
                 }}
               >
                 {user?.firstName + " " + user?.lastName}
               </Text>
               <Text
                 style={{
-                  fontSize: fontSize.tiny,
-                  color: "white",                                              
+                  fontSize: mobile ? fontSize.tiny : fontSize.lg,
+                  color: "white",
                   fontFamily: "bold",
+                  marginTop: 5,
                 }}
               >
                 {user?.cellphone}
@@ -197,6 +218,7 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
 
 const mapStateToProps = (state) => ({
   user: state.user.status,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Contact/Box.js b/src/screens/Contact/Box.js
index e00e16f..693c341 100644
--- a/src/screens/Contact/Box.js
+++ b/src/screens/Contact/Box.js
@@ -1,15 +1,22 @@
 import { View, Text, Image, TouchableOpacity, Platform } from "react-native";
 import React from "react";
+import { connect } from "react-redux";
+
+//style
 import tw from "tailwind-rn";
 import fontSize from "../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 
-const Box = ({ info }) => {
+const Box = ({ info, mobile }) => {
   return (
     <TouchableOpacity
       style={[
-        tw("flex flex-row-reverse py-4 px-3 rounded-md mt-4"),
+        tw(
+          `flex flex-row-reverse rounded-md mt-4 ${
+            mobile ? "py-4 px-3" : "py-5 px-5"
+          }`
+        ),
         {
           backgroundColor: info.bg,
           borderColor: info.borderColor,
@@ -17,14 +24,17 @@ const Box = ({ info }) => {
         },
       ]}
     >
-      <Image source={info.icon} style={{ width: 40, height: 40 }} />
+      <Image
+        source={info.icon}
+        style={{ width: mobile ? 40 : 55, height: mobile ? 40 : 55 }}
+      />
       <View style={tw("flex flex-col flex-1 mr-3")}>
         <Text
           style={{
             fontFamily: "bold",
-            fontSize: fontSize.lg,
+            fontSize: mobile ? fontSize.lg : fontSize.xl3,
             color: info.title.color,
-            textAlign : ios ? "right" : "auto",
+            textAlign: ios ? "right" : "auto",
           }}
         >
           {info.title.text}
@@ -34,9 +44,9 @@ const Box = ({ info }) => {
             tw("mt-1"),
             {
               fontFamily: "light",
-              fontSize: fontSize.sm,
+              fontSize: mobile ? fontSize.sm : fontSize.lg,
               color: info.description.color,
-              textAlign : ios ? "right" : "auto",
+              textAlign: ios ? "right" : "auto",
             },
           ]}
         >
@@ -47,7 +57,7 @@ const Box = ({ info }) => {
             tw("self-start mt-2.5"),
             {
               fontFamily: "demi",
-              fontSize: fontSize.sm,
+              fontSize: mobile ? fontSize.sm : fontSize.lg,
               color: info?.link?.color,
             },
           ]}
@@ -59,4 +69,8 @@ const Box = ({ info }) => {
   );
 };
 
-export default Box;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Box);
diff --git a/src/screens/Contact/index.js b/src/screens/Contact/index.js
index 2057f5d..230ba39 100644
--- a/src/screens/Contact/index.js
+++ b/src/screens/Contact/index.js
@@ -13,7 +13,7 @@ import tw from "tailwind-rn";
 
 import Header from "../../components/Header";
 import Navbar from "../../components/Navbar";
-import Box from './Box';
+import Box from "./Box";
 
 //assets
 import onlineSupportIcon from "./assets/online-support.png";
@@ -49,12 +49,7 @@ function Contact({ info }) {
         title={"ارتباط با ما"}
         description={"تیم پشتیبانی ما اینجاست تا شما رو کمک کنه"}
       />
-      <ScrollView
-        style={[
-          tw("bg-white flex flex-col pb-20 px-4 mb-4"),
-          { width: width, height: height - height / 4.5 },
-        ]}
-      >
+      <ScrollView style={[tw("bg-white flex flex-col pb-20 px-4 mb-4")]}>
         {Object.keys(info).map((item, index) => (
           <Box info={info[item]} key={index} />
         ))}
diff --git a/src/screens/Faq/components/Instance.js b/src/screens/Faq/components/Instance.js
index 9cebe2b..95b59e6 100644
--- a/src/screens/Faq/components/Instance.js
+++ b/src/screens/Faq/components/Instance.js
@@ -6,7 +6,7 @@ import {
   Appearance,
 } from "react-native";
 import { Entypo } from "@expo/vector-icons";
-
+import { connect } from "react-redux";
 //style
 import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
@@ -14,13 +14,17 @@ import Colors from "../../../constants/Colors";
 
 const { width } = Dimensions.get("window");
 
-function Instance({ question, selectFaq }) {
+function Instance({ question, selectFaq, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   return (
     <TouchableOpacity
       onPress={() => selectFaq(question.id)}
       style={[
-        tw("w-full flex flex-col my-1.5 rounded-md px-4 py-2"),
+        tw(
+          `w-full flex flex-col my-1.5 rounded-md px-4 ${
+            mobile ? "py-2" : "py-3"
+          }`
+        ),
         {
           backgroundColor: !question.active
             ? "#F9F9F9"
@@ -39,7 +43,7 @@ function Instance({ question, selectFaq }) {
               width: "90%",
               textAlign: "right",
               color: Colors.theme1[colorScheme].green79,
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "bold",
             },
           ]}
@@ -47,9 +51,17 @@ function Instance({ question, selectFaq }) {
           {question.title}
         </Text>
         {question.active ? (
-          <Entypo name="minus" size={18} color={Colors.theme1[colorScheme].green79} />
+          <Entypo
+            name="minus"
+            size={18}
+            color={Colors.theme1[colorScheme].green79}
+          />
         ) : (
-          <Entypo name="plus" size={18} color={Colors.theme1[colorScheme].green79} />
+          <Entypo
+            name="plus"
+            size={18}
+            color={Colors.theme1[colorScheme].green79}
+          />
         )}
       </View>
       {question.active && (
@@ -58,7 +70,7 @@ function Instance({ question, selectFaq }) {
             style={[
               {
                 color: Colors.theme1[colorScheme].green79,
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 fontFamily: "light",
               },
               tw("text-right flex-1"),
@@ -72,4 +84,8 @@ function Instance({ question, selectFaq }) {
   );
 }
 
-export default Instance;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Instance);
diff --git a/src/screens/Faq/index.js b/src/screens/Faq/index.js
index d6ca68d..d06cf09 100644
--- a/src/screens/Faq/index.js
+++ b/src/screens/Faq/index.js
@@ -61,7 +61,7 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
         />
       </View>
       <ScrollView
-        style={[tw("bg-white flex flex-col pb-20 px-4 mb-4"), { width: width }]}
+        style={[tw("bg-white flex flex-col pb-20 px-4 mb-4")]}
       >
         {!search
           ? list.length > 0 &&