reza fixed home tablet mode

App.js

@@ -12,6 +12,7 @@ const App = () => {
     light : require("./assets/fonts/Farsi/Light.ttf"),
     regular: require("./assets/fonts/Farsi/Regular.ttf"),
     bold: require("./assets/fonts/Farsi/Medium.ttf"),
+    demi: require("./assets/fonts/Farsi/DemiBold.ttf"),
   });
 
   if (!fontsLoaded) {

eas.json

@@ -0,0 +1,18 @@
+{
+  "cli": {
+    "version": ">= 0.47.0"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {}
+  },
+  "submit": {
+    "production": {}
+  }
+}

src/components/CustomTextInput.js

@@ -36,7 +36,7 @@ const FloatingLabelInput = ({
       fontFamily: "regular",
       top: !isFocused ? "50%" : 1,
       fontSize: !isFocused ? fontSize.tiny : fontSize.sm,
-      transform: [{ translateY: -width / 35 }],
+      transform: [{ translateY: -fontSize.lg }],
       color: !isFocused
         ? Colors.theme1[colorScheme].gray2077
         : Colors.theme1[colorScheme].green79,

src/components/Drawer.js

@@ -48,13 +48,6 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
       toast: "",
       message: "",
     },
-    {
-      name: "پروفایل",
-      route: "Profile",
-      icon: <AntDesign name="profile" size={23} color={"#555555"} />,
-      toast: "",
-      message: "",
-    },
     {
       name: "واقعیت افزوده",
       route: "AR",
@@ -69,13 +62,6 @@ const Drawer = ({ position, setBoxPosition, user = JSON.parse(user) }) => {
       toast: "",
       message: "",
     },
-    {
-      name: "سبد خرید",
-      route: "ShoppingCart",
-      icon: <Ionicons name="cart" size={23} color={"#555555"} />,
-      toast: "",
-      message: "",
-    },
     {
       name: "سوالات متداول",
       route: "Faq",

src/components/Header.js

@@ -26,7 +26,7 @@ export default function Header({ title, description, background }) {
       </Text>
       <Text
         style={[
-          { color: "#86A0B9", fontSize: fontSize.sm, fontFamily: "light" },
+          { color: "#86A0B9", fontSize: fontSize.tiny, fontFamily: "regular" },
         ]}
       >
         {description}

src/components/Progress.js

@@ -1,35 +1,41 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from "react";
-import {View, Appearance } from 'react-native';
+import { View, Appearance } from "react-native";
-import tw from 'tailwind-rn';
+import tw from "tailwind-rn";
 
 import Colors from "../constants/Colors";
 
 //Color
-import Color from '../constants/Colors';
+import Color from "../constants/Colors";
 
-function Progress({percent, alignItems}) {
+function Progress({ percent, alignItems }) {
   const colorScheme = Appearance.getColorScheme();
   const [delayPercent, setDelayPercent] = useState(0);
   useEffect(() => {
+    if (percent) {
       setTimeout(() => {
         setDelayPercent(() => percent);
       }, 1000);
+    }
   }, [percent]);
   return (
     <View
       style={[
-        tw(`w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`),
+        tw(
-        {backgroundColor: Colors.theme1[colorScheme].green79 + '22'},
+          `w-full h-1.5 rounded-full  overflow-hidden my-3 flex ${alignItems}`
-      ]}>
+        ),
+        { backgroundColor: Colors.theme1[colorScheme].green79 + "22" },
+      ]}
+    >
       <View
         style={[
-          tw('h-full rounded-full'),
+          tw("h-full rounded-full"),
           {
             backgroundColor: Color.theme1[colorScheme].greenCF,
-            width: percent + '%',
+            width: percent + "%",
             // backgroundColor: Color.theme1.light.blue4,
           },
-        ]}></View>
+        ]}
+      ></View>
     </View>
   );
 }

src/redux/reducers/public.js

@@ -5,6 +5,7 @@ const width = Dimensions.get("window").width;
 
 const initialState = {
   // isDark: (await AsyncStorage.getItem("isDark")) || false,
+  mobile : width < 720,
   homeData: [],
   newProducts: [],
   levels: [],

src/screens/Activation/index.js

@@ -7,11 +7,12 @@ import {
   Platform,
   KeyboardAvoidingView,
   TouchableWithoutFeedback,
-  Appearance
+  Appearance,
+  SafeAreaView,
 } from "react-native";
 import { connect } from "react-redux";
 import Svg, { Image as Imagee } from "react-native-svg";
-import {activation} from "../../redux/actions";
+import { activation } from "../../redux/actions";
 
 import TopHeader from "../../components/Header";
 import Navbar from "../../components/Navbar";
@@ -26,11 +27,16 @@ import Colors from "../../constants/Colors";
 //assets
 import bgQr from "./assets/bgQr.png";
 
-function Activation({add}) {
+const ios = Platform.OS === "ios";
+
+function Activation({ add, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const [value, setValue] = useState(null);
 
   return (
+    <SafeAreaView
+      style={{ paddingTop: ios ? 0 : StatusBar.currentHeight, flex: 1 }}
+    >
       <KeyboardAvoidingView
         behavior={Platform.OS === "ios" ? "padding" : "height"}
         style={{ flex: 1, backgroundColor: "white" }}
@@ -99,7 +105,7 @@ function Activation({add}) {
                 color={"white"}
                 border={{ color: "#196EC0", width: 0 }}
                 width={"100%"}
-              onPress={() => add({code : value})}
+                onPress={() => add({ code: value })}
               />
               <Or />
               <CustomPressable
@@ -114,6 +120,7 @@ function Activation({add}) {
           </View>
         </TouchableWithoutFeedback>
       </KeyboardAvoidingView>
+    </SafeAreaView>
   );
 }
 
@@ -122,10 +129,11 @@ Activation.defaultProps = {
 };
 
 const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
 });
 
 const mapDispatchToProps = {
-  add : activation.add,
+  add: activation.add,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activation);

src/screens/Address/index.js

@@ -47,7 +47,7 @@ const Address = ({
   setPhase,
   cityLoading,
 }) => {
-  const profilePage = route.params.type === "profile";
+  const profilePage = route.params?.type === "profile";
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const [addressFields, setAddressFields] = useState({});

src/screens/Blogs/layouts/Target.js

@@ -152,7 +152,7 @@ const Target = ({ blogs }) => {
   return (
     <View style={tw("flex flex-col")}>
       <Large blog={blogs[0]} />
-      <View style={tw("flex flex-row justify-between mt-3")}>
+      <View style={tw("flex flex-row justify-between mt-4")}>
         {blogs?.slice(1, 3).map((blog, index) => (
           <Small blog={blog} key={index} />
         ))}

src/screens/Contact/Box.js

@@ -1,8 +1,10 @@
-import { View, Text, Image, TouchableOpacity } from "react-native";
+import { View, Text, Image, TouchableOpacity, Platform } from "react-native";
 import React from "react";
 import tw from "tailwind-rn";
 import fontSize from "../../constants/fontSize";
 
+const ios = Platform.OS === "ios";
+
 const Box = ({ info }) => {
   return (
     <TouchableOpacity
@@ -22,6 +24,7 @@ const Box = ({ info }) => {
             fontFamily: "bold",
             fontSize: fontSize.lg,
             color: info.title.color,
+            textAlign : ios ? "right" : "auto",
           }}
         >
           {info.title.text}
@@ -33,6 +36,7 @@ const Box = ({ info }) => {
               fontFamily: "light",
               fontSize: fontSize.sm,
               color: info.description.color,
+              textAlign : ios ? "right" : "auto",
             },
           ]}
         >
@@ -40,9 +44,9 @@ const Box = ({ info }) => {
         </Text>
         <Text
           style={[
-            tw("self-start mt-2"),
+            tw("self-start mt-2.5"),
             {
-              fontFamily: "bold",
+              fontFamily: "demi",
               fontSize: fontSize.sm,
               color: info?.link?.color,
             },

src/screens/Home/components/Blogs.js

@@ -8,7 +8,7 @@ import {
   FlatList,
   Pressable,
   Appearance,
-  Platform
+  Platform,
 } from "react-native";
 import { connect } from "react-redux";
 import Svg, { G, Path } from "react-native-svg";
@@ -27,14 +27,14 @@ import userImage from "../assets/user.png";
 const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-function Blogs({ blogs }) {
+function Blogs({ blogs, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const Blog = ({ blog }) => {
     return (
       <Pressable
         style={[
           tw("rounded-md ml-3 rounded-md relative"),
-          { width: width / 1.5 },
+          { width: mobile ? width / 1.5 : width / 2.2 },
         ]}
         // onPress={() => navigation.navigate('Product')}
       >
@@ -42,7 +42,10 @@ function Blogs({ blogs }) {
           source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
           style={[
             tw("rounded-md"),
-            { width: "100%", height: ((width / 1.5) * 9) / 16 },
+            {
+              width: "100%",
+              height: ((mobile ? width / 1.5 : width / 2.2) * 9) / 16,
+            },
           ]}
         />
         <View
@@ -55,7 +58,7 @@ function Blogs({ blogs }) {
               shadowOpacity: 0.8,
               shadowRadius: 2,
               elevation: 5,
-              minHeight : 70
+              minHeight: 70,
             },
           ]}
         >
@@ -65,7 +68,7 @@ function Blogs({ blogs }) {
               {
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "bold",
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 textAlign: ios ? "right" : "auto",
               },
             ]}
@@ -83,7 +86,7 @@ function Blogs({ blogs }) {
                   {
                     color: Colors.theme1[colorScheme].gray20,
                     fontFamily: "regular",
-                    fontSize: fontSize.sm,
+                    fontSize: mobile ? fontSize.sm : fontSize.base,
                   },
                 ]}
               >
@@ -97,7 +100,7 @@ function Blogs({ blogs }) {
                   {
                     color: Colors.theme1[colorScheme].gray20,
                     fontFamily: "regular",
-                    fontSize: fontSize.sm,
+                    fontSize: mobile ? fontSize.sm : fontSize.base,
                   },
                 ]}
               >
@@ -150,5 +153,6 @@ function Blogs({ blogs }) {
 
 const mapStateToProps = (state) => ({
   // features: state.publicApi.home?.features,
+  mobile: state.publicApi.mobile,
 });
 export default connect(mapStateToProps, {})(Blogs);

src/screens/Home/components/Header.js

@@ -2,23 +2,25 @@ import React from "react";
 import { View, Text, Pressable, Appearance } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import {connect} from 'react-redux';
+
 import fontSize from "../../../constants/fontSize";
 import tw from "tailwind-rn";
 
 //Color
 import Color from "../../../constants/Colors";
 
-const Header = ({ title, route }) => {
+const Header = ({ title, route, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   return (
-    <View style={tw("w-full flex flex-row-reverse justify-between mb-0")}>
+    <View style={tw(`w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`)}>
       <Text
         style={[
           {
             color: Color.theme1[colorScheme].green79,
-            fontFamily: "bold",
+            fontFamily: "demi",
-            fontSize: fontSize.xl,
+            fontSize: mobile ? fontSize.lg : fontSize.xl2,
           },
         ]}
       >
@@ -33,4 +35,8 @@ const Header = ({ title, route }) => {
   );
 };
 
-export default Header;
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(Header);

src/screens/Home/components/Scroll.js

@@ -5,15 +5,17 @@ import {
   TouchableOpacity,
   FlatList,
   Platform,
+  Dimensions
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import tw from "tailwind-rn";
 
 const ios = Platform.OS === "ios";
+const {height} = Dimensions.get("window");
 
 import { connect } from "react-redux";
 
-function Scroll({ books }) {
+function Scroll({ books, mobile }) {
   const Box = ({ books }) => {
     const Product = ({ book, position }) => {
       const navigation = useNavigation();
@@ -25,8 +27,8 @@ function Scroll({ books }) {
           style={[
             tw("rounded-md mx-1 overflow-hidden rounded-md"),
             {
-              width: position === 0 ? 163 : 79,
+              width: position === 0 ? mobile ? 163 : 240 : mobile ? 79 : 125,
-              height: position === 0 ? 245 : 118,
+              height: position === 0 ? mobile ? 245 : 350 : mobile ? 118 : 170,
             },
           ]}
           onPress={() =>
@@ -48,7 +50,7 @@ function Scroll({ books }) {
               ios ? "flex-wrap" : "flex-wrap-reverse"
             }`
           ),
-          { height: 245, direction: "rtl" },
+          { height: mobile ? 245 : 350, direction: "rtl" },
         ]}
       >
         {books.map((book, index) => (
@@ -72,6 +74,8 @@ function Scroll({ books }) {
   );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+});
 
 export default connect(mapStateToProps, {})(Scroll);

src/screens/Home/components/Videos.js

@@ -21,13 +21,13 @@ import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 
-function Videos({ videos, grades }) {
+function Videos({ videos, grades, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const Video = ({ video }) => {
     const navigation = useNavigation();
     return (
       <TouchableOpacity
-        style={tw("flex flex-col ml-3")}
+        style={tw(`flex flex-col ${mobile ? "ml-3" : "ml-5"}`)}
         onPress={() => navigation.navigate("Video", { id: video.id })}
       >
         <Image
@@ -35,8 +35,8 @@ function Videos({ videos, grades }) {
           style={[
             tw("rounded-md"),
             {
-              height: 160,
+              height: mobile ? 160 : 280,
-              width: 110,
+              width: mobile ? 110 : 200,
             },
           ]}
         />
@@ -46,12 +46,12 @@ function Videos({ videos, grades }) {
             {
               color: Colors.theme1[colorScheme].gray20,
               fontFamily: "bold",
-              fontSize: fontSize.base,
+              fontSize: mobile ? fontSize.base : fontSize.xl,
               textAlign: ios ? "right" : "auto",
             },
           ]}
         >
-          {video.name}
+          {'دوره ویدئویی' + ' ' + video.name}
         </Text>
         <Text
           style={[
@@ -59,7 +59,7 @@ function Videos({ videos, grades }) {
             {
               color: Colors.theme1[colorScheme].gray20,
               fontFamily: "regular",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.base,
               textAlign: ios ? "right" : "auto",
             },
           ]}
@@ -94,6 +94,7 @@ function Videos({ videos, grades }) {
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
+  mobile : state.publicApi.mobile
 });
 
 export default connect(mapStateToProps, {})(Videos);

src/screens/Home/index.js

@@ -32,7 +32,9 @@ const Home = ({
   getBooks,
   userProducts,
   getUserProducts,
+  mobile,
 }) => {
+  const [width, setWidth] = useState(Dimensions.get("window").width);
   const [position, setPosition] = useState("100%");
 
   useEffect(() => {
@@ -69,15 +71,17 @@ const Home = ({
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={[styles.container]}
+        style={[styles.container, { width }]}
+        onLayout={() => setWidth(Dimensions.get("window").width)}
       >
+        {!mobile && <View style={tw("mt-5")}></View>}
         {userProduct?.length > 0 && <MyBooks books={userProducts} />}
         <View style={tw("px-4 w-full")}>
           <Header title={"فروشگاه"} route={"Products"} />
         </View>
         {books?.length > 0 && <Scroll books={books} />}
         {books?.length > 0 && <Videos videos={books} />}
-        {/* {blogs?.length > 0 && <Blogs blogs={blogs} />}   */}
+        {blogs?.length > 0 && <Blogs blogs={blogs} />}
       </ScrollView>
     </SafeAreaView>
   );
@@ -90,7 +94,6 @@ const styles = StyleSheet.create({
     // alignItems: "",
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
@@ -102,6 +105,7 @@ const mapStateToProps = (state) => ({
   blogs: state.blog.list,
   books: state.book.list,
   userProducts: state.userProduct.list,
+  mobile: state.publicApi.isMobile,
 });
 
 const mapDispatchToProps = {

src/screens/Login/index.js

@@ -56,7 +56,9 @@ function Login(props) {
     <KeyboardAvoidingView
       behavior={ios ? "padding" : "height"}
       style={[
-        tw("flex flex-col flex-1 justify-center items-center bg-white px-4"),
+        tw(
+          `flex flex-col flex-1 justify-center items-center bg-white mx-auto px-4`
+        ),
       ]}
     >
       {/* <TouchableWithoutFeedback> */}
@@ -69,7 +71,11 @@ function Login(props) {
       />
       <Text
         style={[
-            tw(`w-full mt-5 ${ios ? "text-right" : ""}`),
+          tw(
+            `w-full mt-5 ${ios ? "text-right" : ""} ${
+              props.mobile ? "" : "w-3/4"
+            }`
+          ),
           {
             fontSize: fontSize.xl2,
             fontFamily: "bold",
@@ -81,7 +87,11 @@ function Login(props) {
       </Text>
       <Text
         style={[
-            tw(`w-full mb-5 ${ios ? "text-right" : ""}`),
+          tw(
+            `w-full ${ios ? "text-right" : ""} ${
+              props.mobile ? "mb-5" : "mb-10 w-3/4"
+            }`
+          ),
           {
             fontSize: fontSize.xl2,
             fontFamily: "bold",
@@ -91,7 +101,16 @@ function Login(props) {
       >
         {"خوش برگشتی!"}
       </Text>
-        <View style={[tw("w-full rounded-md overflow-hidden relative"), {}]}>
+      <View
+        style={[
+          tw(
+            `w-full rounded-md overflow-hidden relative ${
+              props.mobile ? "" : "w-3/4"
+            }`
+          ),
+          {},
+        ]}
+      >
         <CustomTextInput
           label="شماره موبایل"
           textAlign="left"
@@ -104,10 +123,13 @@ function Login(props) {
           regex={onInput.phonenumber}
         />
       </View>
+      {
+        !props.mobile && <View style={tw('mt-10')}></View>
+      }
       <TouchableHighlight
         disabled={loading}
         style={[
-            tw("w-full py-2.5 rounded-md"),
+          tw(`w-full py-2.5 rounded-md ${props.mobile ? "" : "w-2/4"}`),
           {
             backgroundColor: Colors.theme1[colorScheme].greenCF,
             alignItems: "center",
@@ -137,7 +159,9 @@ function Login(props) {
   );
 }
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
 
 const mapDispatchToProps = {
   sendPhoneNumber: user.otp,

src/screens/Otp/index.js

@@ -132,11 +132,11 @@ function Otp(props) {
       />
       <Text
         style={[
-          tw(`w-full mt-2.5 ${ios ? 'text-right' : ""}`),
+          tw(`w-full mt-2.5 ${ios ? 'text-right' : ""} ${props.mobile ? "" : "w-3/4"}`),
           {
-            fontSize: fontSize.sm,
+            fontSize: props.mobile ? fontSize.sm : fontSize.base,
             fontFamily: "regular",
-            color: "#6f7074",
+            color: Colors.theme1[colorScheme].gray20,
           },
         ]}
       >{`یک کد تائیدیه به شماره ${props.route.params?.phone} ارسال شد. آن را در قسمت زیر وارد کنید`}</Text>
@@ -152,7 +152,7 @@ function Otp(props) {
               fontSize: fontSize.xl3,
               fontFamily: "bold",
               color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
             },
           ]}
           underlineColorAndroid={"transparent"}
@@ -170,7 +170,7 @@ function Otp(props) {
               fontSize: fontSize.xl3,
               fontFamily: "bold",
               color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
             },
           ]}
           underlineColorAndroid={"transparent"}
@@ -188,7 +188,7 @@ function Otp(props) {
               fontSize: fontSize.xl3,
               fontFamily: "bold",
               color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
             },
           ]}
           underlineColorAndroid={"transparent"}
@@ -206,7 +206,7 @@ function Otp(props) {
               fontSize: fontSize.xl3,
               fontFamily: "bold",
               color: Colors.theme1[colorScheme].green79,
-              // width : ios ? fontSize.xl3 + 40 : ""
+              width : ios ? fontSize.xl3 + 40 : ""
             },
           ]}
           underlineColorAndroid={"transparent"}
@@ -221,7 +221,7 @@ function Otp(props) {
       <TouchableOpacity
         disabled={loading}
         style={[
-          tw("w-full rounded-md py-2 mt-6 items-center justify-center"),
+          tw(`w-full rounded-md py-2 mt-6 items-center justify-center ${props.mobile ? "" : "w-3/4"}`),
           {
             backgroundColor: Colors.theme1[colorScheme].greenCF,
           },
@@ -246,7 +246,7 @@ function Otp(props) {
         <Text
           style={[
             tw("mt-7 text-center"),
-            { fontFamily: "light", fontSize: fontSize.base },
+            { fontFamily: "light", fontSize: fontSize.base, color : Colors.theme1[colorScheme].gray20 },
           ]}
         >
           {"زمان باقی مانده تا انقضای کد: " + time}
@@ -275,6 +275,7 @@ function Otp(props) {
 
 const mapStateToProps = (state) => ({
   isLogin: state.user.status,
+  mobile : state.publicApi.mobile
 });
 
 const mapDispatchToProps = {

src/screens/Profile/components/User.js

@@ -1,4 +1,11 @@
-import { View, Text, Image, Appearance, Platform, Pressable } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  Appearance,
+  Platform,
+  Pressable,
+} from "react-native";
 import React from "react";
 import { connect } from "react-redux";
 import Svg, { Path } from "react-native-svg";
@@ -21,30 +28,26 @@ const User = ({ user }) => {
         )}
         onPress={() => setDropdown(!dropdown)}
       >
-        <View
+        <View style={tw(`flex items-center flex-row-reverse`)}>
-          style={tw(
+          {user?.picFileIds ? (
-            `flex items-center flex-row-reverse`
-          )}
-        >
-          {user?.picFileId ? (
             <Image
-              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
+              source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
               style={[tw("rounded-full"), { width: 70, height: 70 }]}
             />
           ) : (
             <View
               style={[
-                tw("rounded-full bg-gray-400"),
+                tw("rounded-full"),
-                { minWidth: 60, minHeight: 60, zIndex: 1 },
+                { width: 60, height: 60, zIndex: 1, backgroundColor: "#ddd" },
               ]}
             ></View>
           )}
-          <View style={tw(`flex flex-col ${ios ? "items-end" : ""}`)}>
+          <View style={tw(`flex flex-col mr-1 ${ios ? "items-end" : ""}`)}>
             <Text
               style={{
-                fontSize: fontSize.xl,
+                fontSize: fontSize.lg,
                 color: Colors.theme1[colorScheme].gray20,
-                fontFamily: "regular",
+                fontFamily: "bold",
               }}
             >
               {user?.firstName + " " + user?.lastName}
@@ -54,6 +57,7 @@ const User = ({ user }) => {
                 fontSize: fontSize.tiny,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "light",
+                marginTop: 3,
               }}
             >
               {user?.cellphone}
@@ -79,25 +83,28 @@ const User = ({ user }) => {
         >
           <View
             style={[
-              tw(
+              tw(`flex items-center w-full pb-3 mb-4 flex-row-reverse`),
-                `flex items-center w-full pb-3 mb-4 flex-row-reverse`
-              ),
               {
                 borderBottomWidth: 1,
                 borderColor: Colors.theme1[colorScheme].grayE3,
               },
             ]}
           >
-            {user?.picFileId ? (
+            {user?.picFileIds ? (
               <Image
-                source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileId }}
+                source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
                 style={[tw("rounded-full"), { width: 30, height: 30 }]}
               />
             ) : (
               <View
                 style={[
-                  tw("rounded-full bg-gray-400"),
+                  tw("rounded-full"),
-                  { minWidth: 30, minHeight: 30, zIndex: 1 },
+                  {
+                    minWidth: 30,
+                    minHeight: 30,
+                    zIndex: 1,
+                    backgroundColor: "#ddd",
+                  },
                 ]}
               ></View>
             )}
@@ -105,7 +112,8 @@ const User = ({ user }) => {
               style={{
                 fontSize: fontSize.base,
                 color: Colors.theme1[colorScheme].gray20,
-                fontFamily: "regular",
+                fontFamily: "bold",
+                marginRight: 5,
               }}
             >
               {user?.firstName + " " + user?.lastName}
@@ -113,9 +121,7 @@ const User = ({ user }) => {
           </View>
           <View
             style={[
-              tw(
+              tw(`flex items-center w-full pb-3 mb-3 flex-row-reverse`),
-                `flex items-center w-full pb-3 mb-3 flex-row-reverse`
-              ),
               {
                 borderBottomWidth: 1,
                 borderColor: Colors.theme1[colorScheme].grayE3,