From a8f4d7fe52449f8ddaa25c7272a1e7e81181ee7c Mon Sep 17 00:00:00 2001
From: Reza_ashrafi <ashrafimiireza98@gmail.com>
Date: Tue, 12 Apr 2022 17:22:55 +0430
Subject: [PATCH] reza fixed components berfore Address

---
 src/components/CustomTextInput.js      | 19 ++++++++-----------
 src/components/Pressable.js            |  6 ++++--
 src/redux/reducers/public.js           |  2 +-
 src/redux/reducers/userFactor.js       |  1 -
 src/redux/store.js                     |  2 +-
 src/screens/Activation/index.js        | 12 +++++-------
 src/screens/Home/components/Blogs.js   | 19 ++++++++++---------
 src/screens/Home/components/Header.js  | 12 ++++++------
 src/screens/Home/components/MyBooks.js | 22 +++++++++-------------
 src/screens/Home/components/Scroll.js  |  2 --
 src/screens/Home/components/Videos.js  | 13 ++++++-------
 src/screens/Login/index.js             | 23 +++++++++++------------
 src/screens/Otp/index.js               | 23 +++++++++++------------
 13 files changed, 72 insertions(+), 84 deletions(-)

diff --git a/src/components/CustomTextInput.js b/src/components/CustomTextInput.js
index 59583e0..93c9490 100644
--- a/src/components/CustomTextInput.js
+++ b/src/components/CustomTextInput.js
@@ -5,8 +5,6 @@ import {
   Text,
   Dimensions,
   StyleSheet,
-  useColorScheme,
-  Platform
 } from "react-native";
 import {connect} from 'react-redux';
 
@@ -14,8 +12,6 @@ import tw from "tailwind-rn";
 import Colors from "../constants/Colors";
 import fontSize from "../constants/fontSize";
 
-const width = Dimensions.get("window").width;
-
 const FloatingLabelInput = ({
   label,
   textAlign,
@@ -32,9 +28,9 @@ const FloatingLabelInput = ({
   mobile,
   keyboardType,
   multiline,
+  theme,
   ...props
 }) => {
-  const colorScheme = useColorScheme();
   const [isFocused, setIsFocused] = useState(false);
 
   const styles = StyleSheet.create({
@@ -52,16 +48,16 @@ const FloatingLabelInput = ({
         },
       ],
       color: !isFocused
-        ? Colors.theme1[colorScheme].gray2077
-        : Colors.theme1[colorScheme].green79,
+        ? Colors.theme1[theme].gray2077
+        : Colors.theme1[theme].green79,
     },
     inputStyle: {
       fontSize: fontSize.lg,
-      color: Colors.theme1[colorScheme].black,
+      color: Colors.theme1[theme].black,
       borderWidth: 1,
       borderColor: isFocused
-        ? Colors.theme1[colorScheme].greenC8
-        : Colors.theme1[colorScheme].gray2077 + "66",
+        ? Colors.theme1[theme].greenC8
+        : Colors.theme1[theme].gray2077 + "66",
       textAlign: textAlign,
       fontFamily: "regular",
       direction: direction ? direction : "rtl",
@@ -104,7 +100,8 @@ const FloatingLabelInput = ({
 };
 
 const mapStateToProps = (state) => ({
-  mobile: state.publicApi.mobile
+  mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 })
 
 export default connect(mapStateToProps)(FloatingLabelInput);
diff --git a/src/components/Pressable.js b/src/components/Pressable.js
index 2dd665f..8be1c4c 100644
--- a/src/components/Pressable.js
+++ b/src/components/Pressable.js
@@ -14,7 +14,8 @@ function Pressable1({
   width,
   onPress,
   loading,
-  mobile
+  mobile,
+  theme
 }) {
   return (
     <TouchableOpacity
@@ -43,7 +44,8 @@ function Pressable1({
 }
 
 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme : state.publicApi.theme
 })
 
 export default connect(mapStateToProps)(Pressable1);
\ No newline at end of file
diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js
index 1c8d3bf..2a0082f 100644
--- a/src/redux/reducers/public.js
+++ b/src/redux/reducers/public.js
@@ -4,7 +4,7 @@ import { Dimensions } from "react-native";
 const width = Dimensions.get("window").width;
 
 const initialState = {
-  // isDark: (await AsyncStorage.getItem("isDark")) || false,
+  theme: 'light',
   mobile : width < 720,
   homeData: [],
   newProducts: [],
diff --git a/src/redux/reducers/userFactor.js b/src/redux/reducers/userFactor.js
index f73c128..21c721e 100644
--- a/src/redux/reducers/userFactor.js
+++ b/src/redux/reducers/userFactor.js
@@ -28,7 +28,6 @@ export default function userFactor(state = initialState, action) {
         error: null,
       };
     case "userFactor/fullList":
-      console.log(data);
       return {
         ...state,
         loading: false,
diff --git a/src/redux/store.js b/src/redux/store.js
index aca9623..7ae86ed 100644
--- a/src/redux/store.js
+++ b/src/redux/store.js
@@ -68,7 +68,7 @@ const persistor = persistStore(store);
 const ReactNative = require("react-native");
 try {
   ReactNative.I18nManager.allowRTL(false);
-  //  enableScreens();
+   enableScreens();
 } catch (e) {
 }
 
diff --git a/src/screens/Activation/index.js b/src/screens/Activation/index.js
index 5f9c1d5..2c00184 100644
--- a/src/screens/Activation/index.js
+++ b/src/screens/Activation/index.js
@@ -1,13 +1,11 @@
 import React, { useState } from "react";
 import {
   View,
-  Text,
   TextInput,
   StatusBar,
   Platform,
   KeyboardAvoidingView,
   TouchableWithoutFeedback,
-  Appearance,
   SafeAreaView,
 } from "react-native";
 import { connect } from "react-redux";
@@ -29,8 +27,7 @@ import bgQr from "./assets/bgQr.png";
 
 const ios = Platform.OS === "ios";
 
-function Activation({ add, mobile }) {
-  const colorScheme = Appearance.getColorScheme();
+function Activation({ add, mobile, theme }) {
   const [value, setValue] = useState(null);
 
   return (
@@ -101,7 +98,7 @@ function Activation({ add, mobile }) {
               />
               <CustomPressable
                 title={"تایید کد"}
-                backgroundColor={Colors.theme1[colorScheme].greenCF}
+                backgroundColor={Colors.theme1[theme].greenCF}
                 color={"white"}
                 border={{ color: "#196EC0", width: 0 }}
                 width={"100%"}
@@ -110,7 +107,7 @@ function Activation({ add, mobile }) {
               <Or />
               <CustomPressable
                 title={"فعالسازی با کد QR"}
-                backgroundColor={Colors.theme1[colorScheme].greenD9}
+                backgroundColor={Colors.theme1[theme].greenD9}
                 color={"white"}
                 border={{ color: "#196EC0", width: 0 }}
                 width={"100%"}
@@ -129,7 +126,8 @@ Activation.defaultProps = {
 };
 
 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Home/components/Blogs.js b/src/screens/Home/components/Blogs.js
index 25f98de..8079fa2 100644
--- a/src/screens/Home/components/Blogs.js
+++ b/src/screens/Home/components/Blogs.js
@@ -11,7 +11,7 @@ import {
   Platform,
 } from "react-native";
 import { connect } from "react-redux";
-import { useNavigation} from '@react-navigation/native';
+import { useNavigation } from "@react-navigation/native";
 
 //components
 import Header from "../components/Header";
@@ -27,7 +27,7 @@ import userImage from "../assets/user.png";
 const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-function Blogs({ blogs, mobile }) {
+function Blogs({ blogs, mobile, theme }) {
   return (
     <View style={[tw("flex mb-5")]}>
       <View style={tw("w-full px-4")}>
@@ -39,7 +39,9 @@ function Blogs({ blogs, mobile }) {
         inverted={true}
         style={[tw("flex flex-row mt-3 pb-7")]}
         data={blogs}
-        renderItem={({ item }) => <Blog blog={item} mobile={mobile} />}
+        renderItem={({ item }) => (
+          <Blog blog={item} mobile={mobile} theme={theme} />
+        )}
         keyExtractor={(item) => item.id}
         initialNumToRender={5}
       />
@@ -47,8 +49,7 @@ function Blogs({ blogs, mobile }) {
   );
 }
 
-const Blog = ({ blog, mobile }) => {
-  const colorScheme = Appearance.getColorScheme();
+const Blog = ({ blog, mobile, theme }) => {
   const navigation = useNavigation();
 
   return (
@@ -88,7 +89,7 @@ const Blog = ({ blog, mobile }) => {
           style={[
             tw("mb-1"),
             {
-              color: Colors.theme1[colorScheme].gray20,
+              color: Colors.theme1[theme].gray20,
               fontFamily: "regular",
               fontSize: mobile ? fontSize.sm : fontSize.lg,
               textAlign: ios ? "right" : "auto",
@@ -109,7 +110,7 @@ const Blog = ({ blog, mobile }) => {
             <Text
               style={[
                 {
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },
@@ -123,7 +124,7 @@ const Blog = ({ blog, mobile }) => {
               style={[
                 tw("ml-1"),
                 {
-                  color: Colors.theme1[colorScheme].gray20,
+                  color: Colors.theme1[theme].gray20,
                   fontFamily: "regular",
                   fontSize: mobile ? fontSize.xs : fontSize.base,
                 },
@@ -139,7 +140,7 @@ const Blog = ({ blog, mobile }) => {
 };
 
 const mapStateToProps = (state) => ({
-  // features: state.publicApi.home?.features,
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
 });
 export default connect(mapStateToProps, {})(Blogs);
diff --git a/src/screens/Home/components/Header.js b/src/screens/Home/components/Header.js
index 843837d..dc56680 100644
--- a/src/screens/Home/components/Header.js
+++ b/src/screens/Home/components/Header.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, Pressable, Appearance } from "react-native";
+import { View, Text, Pressable } from "react-native";
 import { Entypo } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 import {connect} from 'react-redux';
@@ -10,15 +10,14 @@ import tw from "tailwind-rn";
 //Color
 import Color from "../../../constants/Colors";
 
-const Header = ({ title, route, mobile }) => {
-  const colorScheme = Appearance.getColorScheme();
+const Header = ({ title, route, mobile, theme }) => {
   const navigation = useNavigation();
   return (
     <View style={tw(`w-full flex flex-row-reverse justify-between ${mobile ? "" : "mb-2"}`)}>
       <Text
         style={[
           {
-            color: Color.theme1[colorScheme].green79,
+            color: Color.theme1[theme].green79,
             fontFamily: "demi",
             fontSize: mobile ? fontSize.lg : fontSize.xl2,
           },
@@ -28,7 +27,7 @@ const Header = ({ title, route, mobile }) => {
       </Text>
       {route ? (
         <Pressable onPress={() => navigation.navigate(route)} style={{transform: [{translateX : -fontSize.xl6 / 3}]}}>
-          <Entypo name="chevron-small-left" size={fontSize.xl6} color={Color.theme1[colorScheme].green79} />
+          <Entypo name="chevron-small-left" size={fontSize.xl6} color={Color.theme1[theme].green79} />
         </Pressable> 
       ) : null}
     </View>
@@ -36,7 +35,8 @@ const Header = ({ title, route, mobile }) => {
 };
 
 const mapStateToProps = (state) => ({
-  mobile : state.publicApi.mobile
+  mobile : state.publicApi.mobile,
+  theme : state.publicApi.theme
 })
 
 export default connect(mapStateToProps)(Header);
diff --git a/src/screens/Home/components/MyBooks.js b/src/screens/Home/components/MyBooks.js
index 6672009..b95efcd 100644
--- a/src/screens/Home/components/MyBooks.js
+++ b/src/screens/Home/components/MyBooks.js
@@ -4,10 +4,8 @@ import {
   Image,
   Pressable,
   FlatList,
-  Appearance,
   Platform,
 } from "react-native";
-import { useNavigation } from "@react-navigation/native";
 import { connect } from "react-redux";
 
 //components
@@ -20,16 +18,15 @@ import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 
-function MyBooks({ books, grades }) {
-  const colorScheme = Appearance.getColorScheme();
+function MyBooks({ books, grades, theme }) {
   return (
     <View style={[tw("flex w-full mb-5")]}>
       <View
         style={[
           tw(`w-full flex  rounded-md pt-3 overflow-hidden`),
           {
-            backgroundColor: Colors.theme1[colorScheme].greenCF + "0F",
-            borderColor: Colors.theme1[colorScheme].greenD9 + "",
+            backgroundColor: Colors.theme1[theme].greenCF + "0F",
+            borderColor: Colors.theme1[theme].greenD9 + "",
             borderWidth: 1,
           },
         ]}
@@ -38,7 +35,7 @@ function MyBooks({ books, grades }) {
           style={[
             tw(`pr-4 ${ios ? "text-right" : ""} w-full`),
             {
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[theme].green79,
               fontFamily: "demi",
               fontSize: fontSize.lg,
             },
@@ -52,7 +49,7 @@ function MyBooks({ books, grades }) {
           horizontal={true}
           inverted={true}
           data={books}
-          renderItem={({ item }) => <Book book={item} grades={grades} />}
+          renderItem={({ item }) => <Book book={item} grades={grades} theme={theme} />}
           keyExtractor={(book) => book?.id}
         />
       </View>
@@ -60,9 +57,7 @@ function MyBooks({ books, grades }) {
   );
 }
 
-const Book = ({ book, grades }) => {
-  const colorScheme = Appearance.getColorScheme();
-  const navigation = useNavigation();
+const Book = ({ book, grades, theme }) => {
   return (
     <Pressable
       style={tw(`flex mr-4 ${ios ? "items-end" : ""}`)}
@@ -86,7 +81,7 @@ const Book = ({ book, grades }) => {
         style={[
           tw("mt-2 pr-1"),
           {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
             fontFamily: "bold",
             fontSize: fontSize.sm,
           },
@@ -98,7 +93,7 @@ const Book = ({ book, grades }) => {
         style={[
           tw("pr-1"),
           {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
             fontFamily: "light",
             fontSize: fontSize.sm,
           },
@@ -113,6 +108,7 @@ const Book = ({ book, grades }) => {
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
+  theme: state.publicApi.theme
 });
 
 export default connect(mapStateToProps)(MyBooks);
diff --git a/src/screens/Home/components/Scroll.js b/src/screens/Home/components/Scroll.js
index 722be54..ca59597 100644
--- a/src/screens/Home/components/Scroll.js
+++ b/src/screens/Home/components/Scroll.js
@@ -5,13 +5,11 @@ import {
   Pressable,
   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";
 
diff --git a/src/screens/Home/components/Videos.js b/src/screens/Home/components/Videos.js
index 4853b48..903289f 100644
--- a/src/screens/Home/components/Videos.js
+++ b/src/screens/Home/components/Videos.js
@@ -4,7 +4,6 @@ import {
   Image,
   Pressable,
   FlatList,
-  Appearance,
   Platform,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
@@ -21,7 +20,7 @@ import fontSize from "../../../constants/fontSize";
 
 const ios = Platform.OS === "ios";
 
-function Videos({ videos, grades, mobile }) {
+function Videos({ videos, grades, mobile, theme }) {
   return (
     <View style={[tw("w-full mb-5")]}>
       <View style={[tw("w-full flex  rounded-md pt-2  overflow-hidden")]}>
@@ -35,7 +34,7 @@ function Videos({ videos, grades, mobile }) {
           inverted={true}
           data={videos}
           renderItem={({ item }) => (
-            <Video video={item} grades={grades} mobile={mobile} />
+            <Video video={item} grades={grades} mobile={mobile} theme={theme} />
           )}
           keyExtractor={(item) => item.id}
         />
@@ -44,9 +43,8 @@ function Videos({ videos, grades, mobile }) {
   );
 }
 
-const Video = ({ video, mobile, grades }) => {
+const Video = ({ video, mobile, grades, theme }) => {
   const navigation = useNavigation();
-  const colorScheme = Appearance.getColorScheme();
   return (
     <Pressable
       style={[
@@ -68,7 +66,7 @@ const Video = ({ video, mobile, grades }) => {
         style={[
           tw("mt-2 px-1"),
           {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
             fontFamily: "bold",
             fontSize: mobile ? fontSize.sm : fontSize.xl,
             textAlign: ios ? "right" : "auto",
@@ -81,7 +79,7 @@ const Video = ({ video, mobile, grades }) => {
         style={[
           tw("mt-1 pr-1"),
           {
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[theme].gray20,
             fontFamily: "regular",
             fontSize: mobile ? fontSize.xs : fontSize.base,
             textAlign: ios ? "right" : "auto",
@@ -100,6 +98,7 @@ const Video = ({ video, mobile, grades }) => {
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 export default connect(mapStateToProps, {})(Videos);
diff --git a/src/screens/Login/index.js b/src/screens/Login/index.js
index 67e3972..5adbf41 100644
--- a/src/screens/Login/index.js
+++ b/src/screens/Login/index.js
@@ -7,7 +7,6 @@ import {
   ActivityIndicator,
   Dimensions,
   TouchableHighlight,
-  Appearance,
   Platform,
   KeyboardAvoidingView,
 } from "react-native";
@@ -26,7 +25,6 @@ const ios = Platform.OS === "ios";
 const { height } = Dimensions.get("window");
 
 function Login(props) {
-  const colorScheme = Appearance.getColorScheme();
   const [phone, setPhone] = useState("");
   const [loading, setLoading] = useState(false);
 
@@ -52,12 +50,12 @@ function Login(props) {
   };
 
   return (
-    <KeyboardAvoidingView
-      behavior={ios ? "padding" : "height"}
+    <View
       style={[
-        tw(
-          `flex  flex-1 justify-center items-center bg-white px-4 relative`
-        ),
+        tw(`flex  flex-1 justify-center items-center bg-white px-4 relative`),
+        {
+          minHeight: height,
+        },
       ]}
     >
       <Svg
@@ -94,7 +92,7 @@ function Login(props) {
           {
             fontSize: fontSize.xl2,
             fontFamily: "bold",
-            color: Colors.theme1[colorScheme].black,
+            color: Colors.theme1[props.theme].black,
           },
         ]}
       >
@@ -110,7 +108,7 @@ function Login(props) {
           {
             fontSize: fontSize.xl2,
             fontFamily: "bold",
-            color: Colors.theme1[colorScheme].black,
+            color: Colors.theme1[props.theme].black,
           },
         ]}
       >
@@ -142,11 +140,11 @@ function Login(props) {
       {!props.mobile && <View style={tw("mt-10")}></View>}
       <TouchableHighlight
         disabled={loading}
-        underlayColor={Colors.theme1[colorScheme].greenC8}
+        underlayColor={Colors.theme1[props.theme].greenC8}
         style={[
           tw(`w-full py-3 rounded-sm ${props.mobile ? "" : "w-2/4"}`),
           {
-            backgroundColor: Colors.theme1[colorScheme].greenCF,
+            backgroundColor: Colors.theme1[props.theme].greenCF,
             alignItems: "center",
             justifyContent: "center",
             marginTop: 25,
@@ -181,12 +179,13 @@ function Login(props) {
         </Text>{" "}
         می‌باشد
       </Text>
-    </KeyboardAvoidingView>
+    </View>
   );
 }
 
 const mapStateToProps = (state) => ({
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme,
 });
 
 const mapDispatchToProps = {
diff --git a/src/screens/Otp/index.js b/src/screens/Otp/index.js
index e11a388..33b594a 100644
--- a/src/screens/Otp/index.js
+++ b/src/screens/Otp/index.js
@@ -6,7 +6,6 @@ import {
   Dimensions,
   TouchableOpacity,
   ActivityIndicator,
-  Appearance,
   Platform,
 } from "react-native";
 import tw from "tailwind-rn";
@@ -29,7 +28,6 @@ let ref4;
 let timer = 60;
 
 function Otp(props) {
-  const colorScheme = Appearance.getColorScheme();
   const [firstCode, setFirstCode] = useState("");
   const [secondCode, setSecondCode] = useState("");
   const [thirdCode, setThirdCode] = useState("");
@@ -128,7 +126,7 @@ function Otp(props) {
   };
 
   return (
-    <View style={[tw("px-4 flex-1 justify-center items-center bg-white")]}>
+    <View style={[tw("px-4 flex-1 justify-center items-center bg-white"), {minHeight: height}]}>
       <Svg
         xmlns="http://www.w3.org/2000/svg"
         xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -163,14 +161,14 @@ function Otp(props) {
           {
             fontSize: props.mobile ? fontSize.tiny : fontSize.base,
             fontFamily: "light",
-            color: Colors.theme1[colorScheme].gray20,
+            color: Colors.theme1[props.theme].gray20,
           },
         ]}
       >
         یک کد تائیدیه به شماره{" "}
         <Text
           style={{
-            color: Colors.theme1[colorScheme].greenCF,
+            color: Colors.theme1[props.theme].greenCF,
             fontSize: fontSize.base,
             fontFamily: "demi",
           }}
@@ -190,7 +188,7 @@ function Otp(props) {
             {
               fontSize: fontSize.xl5,
               fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
               width: fontSize.xl5 + 40,
             },
           ]}
@@ -209,7 +207,7 @@ function Otp(props) {
             {
               fontSize: fontSize.xl5,
               fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
               width: fontSize.xl5 + 40,
             },
           ]}
@@ -228,7 +226,7 @@ function Otp(props) {
             {
               fontSize: fontSize.xl5,
               fontFamily: "bold",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
               width: fontSize.xl5 + 40,
             },
           ]}
@@ -247,7 +245,7 @@ function Otp(props) {
             {
               fontSize: fontSize.xl5,
               fontFamily: "demi",
-              color: Colors.theme1[colorScheme].green79,
+              color: Colors.theme1[props.theme].green79,
               width: fontSize.xl5 + 40,
             },
           ]}
@@ -270,7 +268,7 @@ function Otp(props) {
             }`
           ),
           {
-            backgroundColor: Colors.theme1[colorScheme].greenCF,
+            backgroundColor: Colors.theme1[props.theme].greenCF,
           },
         ]}
         onPress={() => submit()}
@@ -297,7 +295,7 @@ function Otp(props) {
               {
                 fontFamily: "light",
                 fontSize: fontSize.base,
-                color: Colors.theme1[colorScheme].gray20,
+                color: Colors.theme1[props.theme].gray20,
               },
             ]}
           >
@@ -315,7 +313,7 @@ function Otp(props) {
                 textAlign: "center",
                 fontFamily: "light",
                 fontSize: fontSize.base,
-                color: Colors.theme1[colorScheme].greenBA,
+                color: Colors.theme1[props.theme].greenBA,
               }}
             >
               {"بازگشت به مرحله قبل و اصلاح شماره"}
@@ -330,6 +328,7 @@ function Otp(props) {
 const mapStateToProps = (state) => ({
   isLogin: state.user.status,
   mobile: state.publicApi.mobile,
+  theme: state.publicApi.theme
 });
 
 const mapDispatchToProps = {