reza fixed tablet mode at many page

navigation/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react";
 import Svg, { G, Path } from "react-native-svg";
-import { Appearance, Platform } from "react-native";
+import { Appearance, Platform, Dimensions } from "react-native";
-import { NavigationContainer } from "@react-navigation/native";
+import { NavigationContainer, DefaultTheme } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { connect } from "react-redux";
@@ -38,14 +38,13 @@ import Blog from "../src/screens/Blog";
 //style
 import fontSize from "../src/constants/fontSize";
 import Colors from "../src/constants/Colors";
-import tw from "tailwind-react-native-classnames";
 
 const ios = Platform.OS === "ios";
+const colorScheme = Appearance.getColorScheme();
 
 const Tab = createBottomTabNavigator();
 const BottomTabNavigator = () => {
   const [height, setHeight] = React.useState(88);
-  const colorScheme = Appearance.getColorScheme();
   React.useEffect(() => {
     setTimeout(() => {
       setHeight(89);
@@ -57,12 +56,15 @@ const BottomTabNavigator = () => {
       screenOptions={{
         tabBarHideOnKeyboard: true,
         headerShown: false,
+        contentStyle: {
+          backgroundColor: "white",
+        },
         tabBarLabelPosition: "below-icon",
         tabBarActiveTintColor: Colors.theme1[colorScheme].green79,
         tabBarInactiveTintColor: "grey",
         tabBarStyle: {
           backgroundColor: Colors.theme1[colorScheme].greenFF1,
-          height
+          height,
         },
         tabBarLabelStyle: {
           fontSize: fontSize.sm,
@@ -112,6 +114,9 @@ const BottomTabNavigator = () => {
                 </G>
               </Svg>
             ),
+          contentStyle: {
+            backgroundColor: "white",
+          },
         }}
       />
       <Tab.Screen
@@ -343,7 +348,10 @@ const HomeStack = createNativeStackNavigator();
 const HomeStackScreen = () => {
   return (
     <HomeStack.Navigator
-      screenOptions={{ headerShown: false }}
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
+      }}
       initialRouteName="Home"
     >
       <HomeStack.Screen name="Home" component={Home} />
@@ -364,7 +372,7 @@ const ProductsStackScreen = () => {
     <ProductsStack.Navigator
       screenOptions={{
         headerShown: false,
-        contentStyle: { backgroundColor: "white" },
+        contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
       }}
       initialRouteName="Products"
     >
@@ -377,7 +385,12 @@ const ProductsStackScreen = () => {
 const VODStack = createNativeStackNavigator();
 const VODStackScreen = () => {
   return (
-    <VODStack.Navigator screenOptions={{ headerShown: false }}>
+    <VODStack.Navigator
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
+      }}
+    >
       <VODStack.Screen name="VOD" component={Videos} />
       <VODStack.Screen name="Video" component={Video} unmountOnExit={true} />
       <VODStack.Screen name="VideoDisplay" component={VideoDisplay} />
@@ -388,7 +401,12 @@ const VODStackScreen = () => {
 const CARTStack = createNativeStackNavigator();
 const CARTStackScreen = () => {
   return (
-    <CARTStack.Navigator screenOptions={{ headerShown: false }}>
+    <CARTStack.Navigator
+      screenOptions={{
+        headerShown: false,
+        contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
+      }}
+    >
       <CARTStack.Screen name="ShoppingCart" component={ShoppingCart} />
       <CARTStack.Screen name="DeliveryForm" component={DeliveryForm} />
     </CARTStack.Navigator>
@@ -399,8 +417,10 @@ const PROFILEStack = createNativeStackNavigator();
 const PROFILEStackScreen = () => {
   return (
     <PROFILEStack.Navigator
-      screenOptions={{ headerShown: false }}
+      screenOptions={{
-      // initialRouteName="Splash"
+        headerShown: false,
+        contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
+      }}
     >
       <PROFILEStack.Screen name="Profile" component={Profile} />
     </PROFILEStack.Navigator>
@@ -418,7 +438,7 @@ const Navigation = ({ getStatus, isLogin }) => {
         // initialRouteName="Root"
         screenOptions={{
           headerShown: false,
-          contentStyle: { backgroundColor: "white" },
+          contentStyle: { backgroundColor: Colors.theme1[colorScheme].white },
         }}
       >
         <Stack.Screen name="Splash" component={Splash} />

package.json

@@ -53,7 +53,6 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.1",
-    "tailwind-react-native-classnames": "^1.5.1",
     "tailwind-rn": "^3.0.1"
   },
   "devDependencies": {

src/components/BottomSheetComponents/ProductQuestion.js

@@ -1,6 +1,13 @@
-import { View, Text, ScrollView, Dimensions, Appearance } from "react-native";
+import {
+  View,
+  Text,
+  ScrollView,
+  Dimensions,
+  Appearance,
+  Platform,
+} from "react-native";
 import Divider from "../Divider";
-
+import { connect } from "react-redux";
 import React from "react";
 
 //style
@@ -9,26 +16,29 @@ import tw from "tailwind-rn";
 import Colors from "../../constants/Colors";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
-const ProductQuestion = ({ list }) => {
+const ProductQuestion = ({ list, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const Question = ({ question }) => {
     return (
       <View style={[tw("flex flex-col mb-3")]}>
         <Text
           style={{
-            fontFamily: "regular",
+            fontFamily: "bold",
             color: Colors.theme1[colorScheme].green79,
-            fontSize: fontSize.lg,
+            fontSize: mobile ? fontSize.lg : fontSize.xl3,
+            textAlign: ios ? "right" : "auto",
           }}
         >
           سوال
         </Text>
         <Text
           style={{
-            fontFamily: "regular",
+            fontFamily: "bold",
             color: "#323232",
-            fontSize: fontSize.tiny,
+            fontSize: mobile ? fontSize.tiny : fontSize.base,
+            textAlign: ios ? "right" : "auto",
           }}
         >
           {question.question}
@@ -37,19 +47,22 @@ const ProductQuestion = ({ list }) => {
           <>
             <Text
               style={{
-                fontFamily: "regular",
+                fontFamily: "bold",
                 color: Colors.theme1[colorScheme].green79,
                 fontSize: fontSize.lg,
                 marginTop: 10,
+                textAlign: ios ? "right" : "auto",
               }}
             >
               پاسخ
             </Text>
             <Text
               style={{
-                fontFamily: "light",
+                fontFamily: "bold",
-                color: Colors.theme1[colorScheme].grayCC,
+                color: Colors.theme1[colorScheme].gray2077,
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.base,
+                textAlign: ios ? "right" : "auto",
+                marginTop: mobile ? "" : 10,
               }}
             >
               {question.question}
@@ -67,7 +80,9 @@ const ProductQuestion = ({ list }) => {
         onPress={() => refRBSheet.current.open()}
         style={[
           tw(
-            "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4"
+            `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 ${
+              mobile ? "py-3" : "py-4"
+            } mb-4`
           ),
           {
             backgroundColor: Colors.theme1[colorScheme].greenFF1,
@@ -77,9 +92,9 @@ const ProductQuestion = ({ list }) => {
         <Text
           style={[
             {
-              fontSize: fontSize.lg,
+              fontSize: mobile ? fontSize.lg : fontSize.xl3,
               color: Colors.theme1[colorScheme].green79,
-              fontFamily: "bold",
+              fontFamily: "demi",
             },
           ]}
         >
@@ -95,7 +110,11 @@ const ProductQuestion = ({ list }) => {
   );
 };
 
-export default ProductQuestion;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(ProductQuestion);
 
 ProductQuestion.defaultProps = {
   list: [

src/components/BottomSheetComponents/ProductReview.js

@@ -1,6 +1,6 @@
-import { View, Text, ScrollView, Dimensions, Appearance } from "react-native";
+import { View, Text, ScrollView, Dimensions, Appearance, Platform } from "react-native";
-
 import React from "react";
+import {connect} from 'react-redux';
 
 //style
 import fontSize from "../../constants/fontSize";
@@ -8,8 +8,9 @@ import Colors from "../../constants/Colors";
 import tw from "tailwind-rn";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
-const ProductReviews = ({ list }) => {
+const ProductReviews = ({ list, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const Property = ({ question }) => {
     return (
@@ -18,7 +19,7 @@ const ProductReviews = ({ list }) => {
           onPress={() => refRBSheet.current.open()}
           style={[
             tw(
-              "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4"
+              `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 ${mobile ? "py-3" : "py-4"} mb-4`
             ),
             {
               backgroundColor: Colors.theme1[colorScheme].greenFF1 + '66',
@@ -28,7 +29,7 @@ const ProductReviews = ({ list }) => {
           <Text
             style={[
               {
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 color: Colors.theme1[colorScheme].green79,
                 fontFamily: "bold",
               },
@@ -39,10 +40,11 @@ const ProductReviews = ({ list }) => {
         </View>
         <Text
           style={{
-            fontSize: fontSize.tiny,
+            fontSize: mobile ? fontSize.tiny : fontSize.base,
             fontFamily: "light",
             color: "#275077",
-            lineHeight: 25
+            lineHeight: 25,
+            textAlign : ios ? "right" : "auto",
           }}
         >
           {question.text}
@@ -85,7 +87,7 @@ const ProductReviews = ({ list }) => {
             {
               fontSize: fontSize.lg,
               color: Colors.theme1[colorScheme].green79,
-              fontFamily: "regular",
+              fontFamily: "demi",
             },
           ]}
         >
@@ -101,7 +103,11 @@ const ProductReviews = ({ list }) => {
   );
 };
 
-export default ProductReviews;
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(ProductReviews);
 
 ProductReviews.defaultProps = {
   list: [

src/components/BottomSheetComponents/ProductSpecifications.js

@@ -1,6 +1,6 @@
-import { View, Text, ScrollView, Dimensions, Appearance } from "react-native";
+import { View, Text, ScrollView, Dimensions, Appearance, Platform } from "react-native";
-
 import React from "react";
+import {connect} from 'react-redux';
 
 //style
 import fontSize from "../../constants/fontSize";
@@ -8,8 +8,9 @@ import Colors from "../../constants/Colors";
 import tw from "tailwind-rn";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
-const ProductSpecifications = ({ list }) => {
+const ProductSpecifications = ({ list, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const Property = ({ prop }) => {
     return (
@@ -22,11 +23,12 @@ const ProductSpecifications = ({ list }) => {
         >
           <Text
             style={[
-              tw("py-3 pr-2"),
+              tw(`pr-2 ${mobile ? "py-3" : "py-4"}`),
               {
                 fontFamily: "regular",
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 color: "#07AFAF",
+                textAlign: ios ? "right" : "auto"
               },
             ]}
           >
@@ -35,7 +37,7 @@ const ProductSpecifications = ({ list }) => {
         </View>
         <View
           style={[
-            tw("flex-1 mr-2 rounded-md px-2 py-3"),
+            tw(`flex-1 mr-2 rounded-md px-2 ${mobile ? " py-3" : "py-4"}`),
             { backgroundColor: "#f8f8f8" },
           ]}
         >
@@ -44,7 +46,7 @@ const ProductSpecifications = ({ list }) => {
               tw("text-right"),
               {
                 fontFamily: "regular",
-                fontSize: fontSize.sm,
+                fontSize: mobile ? fontSize.tiny : fontSize.base,
                 color: "#646464",
               },
             ]}
@@ -61,7 +63,7 @@ const ProductSpecifications = ({ list }) => {
         onPress={() => refRBSheet.current.open()}
         style={[
           tw(
-            "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-2 py-3 mb-4"
+            "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-3 py-3 mb-4"
           ),
           {
             backgroundColor: Colors.theme1[colorScheme].greenFF1 ,
@@ -73,7 +75,7 @@ const ProductSpecifications = ({ list }) => {
             {
               fontSize: fontSize.lg,
               color: Colors.theme1[colorScheme].green79 ,
-              fontFamily: "regular",
+              fontFamily: "demi",
             },
           ]}
         >
@@ -89,7 +91,11 @@ const ProductSpecifications = ({ list }) => {
   );
 };
 
-export default ProductSpecifications;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile
+});
+
+export default connect(mapStateToProps)(ProductSpecifications);
 
 ProductSpecifications.defaultProps = {
   list: {

src/components/CustomTextInput.js

@@ -6,9 +6,11 @@ import {
   Dimensions,
   StyleSheet,
   useColorScheme,
+  Platform
 } from "react-native";
-import tw from "tailwind-rn";
+import {connect} from 'react-redux';
 
+import tw from "tailwind-rn";
 import Colors from "../constants/Colors";
 import fontSize from "../constants/fontSize";
 
@@ -27,16 +29,26 @@ const FloatingLabelInput = ({
   maxLength,
   autoFocus,
   regex,
+  mobile,
   ...props
 }) => {
   const colorScheme = useColorScheme();
   const [isFocused, setIsFocused] = useState(false);
+
   const styles = StyleSheet.create({
     labelStyle: {
       fontFamily: "regular",
       top: !isFocused ? "50%" : 1,
-      fontSize: !isFocused ? fontSize.tiny : fontSize.sm,
+      fontSize: !isFocused
-      transform: [{ translateY: -fontSize.lg }],
+        ? Math.floor(fontSize.base)
+        : Math.floor(fontSize.sm),
+      transform: [
+        {
+          translateY: !isFocused
+            ? -Math.floor(fontSize.base - 2)
+            : -Math.floor(fontSize.sm),
+        },
+      ],
       color: !isFocused
         ? Colors.theme1[colorScheme].gray2077
         : Colors.theme1[colorScheme].green79,
@@ -51,7 +63,7 @@ const FloatingLabelInput = ({
       textAlign: textAlign,
       fontFamily: "regular",
       fontWeight: "900",
-      direction: direction ? direction : "rtl"
+      direction: direction ? direction : "rtl",
     },
   });
 
@@ -74,7 +86,7 @@ const FloatingLabelInput = ({
         {label}
       </Text>
       <TextInput
-        style={[styles.inputStyle, tw("rounded-md py-2 px-4")]}
+        style={[styles.inputStyle, tw(`rounded-md ${mobile ? "py-2" : "py-3"} px-4`)]}
         onChangeText={(text) => onChange(name, (text = regex(text)))}
         placeholder={placeholder}
         onFocus={() => setIsFocused(true)}
@@ -88,4 +100,8 @@ const FloatingLabelInput = ({
   );
 };
 
-export default FloatingLabelInput;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(FloatingLabelInput);

src/components/Header.js

@@ -1,14 +1,15 @@
 import { View, Text, Dimensions, ImageBackground } from "react-native";
+import { connect } from "react-redux";
 import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 
 const height = Dimensions.get("window").height;
 
-export default function Header({ title, description, background }) {
+function Header({ title, description, background }) {
   return (
     <View
       style={[
-        tw("w-full flex flex-col items-center pb-7"),
+        tw(`w-full flex flex-col items-center pb-7 ${mobile ? "" : "mt-3"}`),
         { height: height / 4.5, backgroundColor: "#E9F0F7" },
       ]}
     >
@@ -34,3 +35,9 @@ export default function Header({ title, description, background }) {
     </View>
   );
 }
+
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(Header);

src/components/Or.js

@@ -1,13 +1,13 @@
 import React, {useState} from 'react';
 import {View, Text, Dimensions} from 'react-native';
-import tw from 'tailwind-react-native-classnames';
+import tw from 'tailwind-rn';
 
 const width = Dimensions.get('window').width;
 
 function Or(props) {
   return (
     <View
-      style={[tw.style('w-full flex flex-row justify-between items-center my-3')]}>
+      style={[tw('w-full flex flex-row justify-between items-center my-3')]}>
       <View
         style={{width: '43%', height: 1, backgroundColor: '#EFEFEF'}}></View>
       <Text style={{fontSize: width / 27, color: '#C2C2C2'}}>یا</Text>

src/components/Pressable.js

@@ -1,9 +1,12 @@
 import React from "react";
 import { TouchableOpacity, Text, ActivityIndicator } from "react-native";
+import {connect} from 'react-redux';
+
+//style
 import tw from "tailwind-rn";
 import fontSize from "../constants/fontSize";
 
-export default function Pressable1({
+function Pressable1({
   title,
   backgroundColor,
   color,
@@ -11,6 +14,7 @@ export default function Pressable1({
   width,
   onPress,
   loading,
+  mobile
 }) {
   return (
     <TouchableOpacity
@@ -29,7 +33,7 @@ export default function Pressable1({
         <ActivityIndicator size="small" color={color} />
       ) : (
         <Text
-          style={{ fontSize: fontSize.lg, color: color, fontFamily: "bold" }}
+          style={{ fontSize: mobile ? fontSize.lg : fontSize.xl, color: color, fontFamily: "bold" }}
         >
           {title}
         </Text>
@@ -37,3 +41,9 @@ export default function Pressable1({
     </TouchableOpacity>
   );
 }
+
+const mapStateToProps = (state) => ({
+  mobile : state.publicApi.mobile
+})
+
+export default connect(mapStateToProps)(Pressable1);

src/components/Redirect.js

@@ -1,28 +1,30 @@
-import React from 'react';
+import React from "react";
-import {View, Text, Dimensions, Image} from 'react-native';
+import { View, Text, Dimensions, Image } from "react-native";
-import tw from 'tailwind-react-native-classnames';
+import tw from "tailwind-rn";
-import leftIcon from '../assets/icons/leftWhite.png';
+import leftIcon from "../assets/icons/leftWhite.png";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
-const height = Dimensions.get('window').height;
+const height = Dimensions.get("window").height;
 
 export default function Redirect({ text }) {
   return (
     <View
       style={[
-        tw.style('w-full flex flex-row-reverse items-center p-4 rounded-md mb-5'),
+        tw("w-full flex flex-row-reverse items-center p-4 rounded-md mb-5"),
-        {backgroundColor: '#196EC0'},
+        { backgroundColor: "#196EC0" },
-      ]}>
+      ]}
-      <View style={tw.style('flex-1 flex flex-col')}>
+    >
+      <View style={tw("flex-1 flex flex-col")}>
         <Text
           style={[
-            tw.style('font-medium text-right'),
+            tw("font-medium text-right"),
-            {fontSize: width / 30, color: 'white'},
+            { fontSize: width / 30, color: "white" },
-          ]}>
+          ]}
+        >
           {text}
         </Text>
       </View>
-      <View style={tw.style('p-0')}>
+      <View style={tw("p-0")}>
         <Image source={leftIcon} style={{ width: 24, height: 24 }} />
       </View>
     </View>

src/screens/AR/components/Book.js

@@ -1,27 +1,31 @@
 import { View, Text, Image, Dimensions, Appearance } from "react-native";
 import React from "react";
+import { connect } from "react-redux";
 
 //style
 import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-const { width } = Dimensions.get("window");
+const { width, height } = Dimensions.get("window");
 
-const Book = ({ book }) => {
+const Book = ({ book, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   return (
     <View
       style={[
         tw("flex flex-col items-end rounded-md p-2 my-2"),
-        { width: "48%" },
+        { width: mobile ? "48%" : width / 4.2 },
       ]}
     >
       <Image
         source={{ uri: `https://dnvn.ir/api/v1/file/${book.fileId}` }}
         style={[
           tw("rounded-md"),
-          { width: width / 2 - 36, height: ((width / 2 - 36) * 4) / 3 },
+          {
+            width: "100%",
+            height: ((mobile ? width / 2 - 36 : width / 4.2) * 4) / 3,
+          },
         ]}
       />
       <Text
@@ -40,4 +44,8 @@ const Book = ({ book }) => {
   );
 };
 
-export default Book;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Book);

src/screens/AR/index.js

@@ -6,7 +6,7 @@ import {
   LayoutAnimation,
   Platform,
   Dimensions,
-  View
+  View,
 } from "react-native";
 import { connect } from "react-redux";
 import { publicApi } from "../../redux/actions";
@@ -18,8 +18,9 @@ import Book from "./components/Book";
 import tw from "tailwind-rn";
 
 const { height } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
-function AR({ getArList, arList }) {
+function AR({ getArList, arList, mobile }) {
   const [position, setPosition] = useState("100%");
 
   useEffect(() => {
@@ -60,7 +61,13 @@ function AR({ getArList, arList }) {
         }}
         contentContainerStyle={{ paddingBottom: 100 }}
       >
-        <View style={tw("flex flex-row justify-between flex-wrap")}>
+        <View
+          style={tw(
+            `flex justify-between flex-wrap ${
+              ios ? "flex-row-reverse" : "flex-row"
+            }`
+          )}
+        >
           {arList.length > 0 &&
             arList.map((book, index) => <Book book={book} key={index} />)}
         </View>
@@ -71,6 +78,7 @@ function AR({ getArList, arList }) {
 
 const mapStateToProps = (state) => ({
   arList: state.publicApi.arList,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {

src/screens/Address/index.js

@@ -46,6 +46,7 @@ const Address = ({
   loading,
   setPhase,
   cityLoading,
+  mobile,
 }) => {
   const profilePage = route.params?.type === "profile";
   const colorScheme = Appearance.getColorScheme();
@@ -209,16 +210,17 @@ const Address = ({
     };
     setProfile(data);
     navigation.goBack();
-  }
+  };
 
   const Header = ({ title, text }) => {
     return (
-      <View style={tw("flex flex-col mt-2")}>
+      <View style={tw(`flex flex-col ${mobile ? "mt-2" : "mt-8"}`)}>
         <Text
           style={{
             fontFamily: "bold",
-            fontSize: fontSize.lg,
+            fontSize: mobile ? fontSize.lg : fontSize.xl2,
             color: Colors.theme1[colorScheme].gray20,
+            textAlign: ios ? "right" : "auto",
           }}
         >
           {title}
@@ -226,8 +228,9 @@ const Address = ({
         <Text
           style={{
             fontFamily: "regular",
-            fontSize: fontSize.sm,
+            fontSize: mobile ? fontSize.sm : fontSize.base,
             color: Colors.theme1[colorScheme].gray20 + "aa",
+            textAlign: ios ? "right" : "auto",
           }}
         >
           {text}
@@ -246,10 +249,10 @@ const Address = ({
       <Navbar
         headerOptions={{
           logo: false,
-          menu: profilePage ? false : true,
+          menu: profilePage ? false : false,
           hamburgerMenu: false,
           title: profilePage ? "اطلاعات کاربری" : "",
-          bookmark: profilePage ? false : true,
+          bookmark: profilePage ? false : false,
           qr: false,
           back: true,
         }}
@@ -412,12 +415,14 @@ const Address = ({
           </View>
 
           <CustomPressable
-            title={profilePage ? "ذخیره اطلاعات و بازگشت به صفحه قبل" : "ثبت آدرس"}
+            title={
+              profilePage ? "ذخیره اطلاعات و بازگشت به صفحه قبل" : "ثبت آدرس"
+            }
             backgroundColor={Colors.theme1[colorScheme].greenCF}
             color={"white"}
             border={{ color: "#196EC0", width: 0 }}
             width={"100%"}
-            onPress={() => profilePage ? submitProfile() : submit()}
+            onPress={() => (profilePage ? submitProfile() : submit())}
           />
         </View>
       </ScrollView>
@@ -430,7 +435,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
@@ -447,6 +451,7 @@ const mapStateToProps = (state) => ({
   cityLoading: state.publicApi.loading,
   user: state.user.status,
   profileFields: state.user.profileFields,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {
@@ -454,7 +459,7 @@ const mapDispatchToProps = {
   getCity: publicApi.getCity,
   createAddress: userAddress.add,
   setProfileFields: user.setProfileFields,
-  setProfile: user.setProfile
+  setProfile: user.setProfile,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Address);

src/screens/DeliveryForm/Address/index.js

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   Appearance,
   ActivityIndicator,
+  Platform
 } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
@@ -16,7 +17,9 @@ import tw from "tailwind-rn";
 import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
-const Address = ({ addresses, update, userId, userAddressId, loading }) => {
+const ios = Platform.OS === "ios";
+
+const Address = ({ addresses, update, userId, userAddressId, loading, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
 
@@ -36,7 +39,7 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => {
                 : Colors.theme1[colorScheme].grayE3,
           },
           tw(
-            `flex flex-row-reverse items-center w-full px-3 py-2 rounded-md mt-2`
+            `flex flex-row-reverse items-center w-full px-3 rounded-md mt-2 ${mobile ? "py-2" : "py-4"}`
           ),
         ]}
         onPress={() =>
@@ -67,13 +70,14 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => {
             ]}
           ></View>
         )}
-        <View style={tw("flex flex-1 flex-col mr-2")}>
+        <View style={tw(`flex flex-1 flex-col ${mobile ? "mr-2" : "mr-5"}`)}>
           <Text
             style={[
               {
                 fontFamily: "bold",
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
                 lineHeight: 22,
+                textAlign: ios ? "right" : "auto",
               },
             ]}
           >
@@ -111,7 +115,7 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => {
         <Text
           style={{
             fontFamily: "regular",
-            fontSize: fontSize.tiny,
+            fontSize: mobile ? fontSize.tiny : fontSize.lg,
             color: Colors.theme1[colorScheme].gray2077,
           }}
         >
@@ -119,8 +123,8 @@ const Address = ({ addresses, update, userId, userAddressId, loading }) => {
         </Text>
         <Text
           style={{
-            marginRight: 2,
+            marginRight: 5,
-            fontSize: fontSize.xl,
+            fontSize: mobile ? fontSize.xl : fontSize.xl4,
             color: Colors.theme1[colorScheme].gray20,
           }}
         >
@@ -135,6 +139,7 @@ const mapStateToProps = (state) => ({
   userId: state.user.status?.id,
   userAddressId: state.userFactor.info?.userAddressId,
   loading: state.userFactor.loading,
+  mobile: state.publicApi.mobile
 });
 
 const mapDispatchToProps = {

src/screens/DeliveryForm/TransportDate/index.js

@@ -1,4 +1,4 @@
-import { View, Text, Pressable, Appearance } from "react-native";
+import { View, Text, Pressable, Appearance, Platform } from "react-native";
 import React, { useCallback, useState } from "react";
 import { connect } from "react-redux";
 
@@ -7,7 +7,9 @@ import tw from "tailwind-rn";
 import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
-const TransportDate = ({ transportDate }) => {
+const ios = Platform.OS === "ios";
+
+const TransportDate = ({ transportDate, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const [activeDate, setActiveDate] = useState(transportDate?.times[0]);
 
@@ -15,7 +17,7 @@ const TransportDate = ({ transportDate }) => {
     return (
       <Pressable
         style={[
-          tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
+          tw(`flex flex-col items-center w-full px-2 ${mobile ? "py-1.5" : "py-2"} rounded-md mt-3`),
           {
             backgroundColor: active
               ? Colors.theme1[colorScheme].greenCF + "15"
@@ -31,7 +33,7 @@ const TransportDate = ({ transportDate }) => {
         <Text
           style={{
             fontFamily: "bold",
-            fontSize: fontSize.lg,
+            fontSize: mobile ? fontSize.lg : fontSize.xl,
             color: active
               ? Colors.theme1[colorScheme].gray20
               : Colors.theme1[colorScheme].gray20,
@@ -54,15 +56,16 @@ const TransportDate = ({ transportDate }) => {
     );
   }, []);
   return (
-    <View style={tw("mt-0 w-full")}>
+    <View style={tw(`w-full ${mobile ? "mt-0" : "mt-4"}`)}>
       <Text
         style={{
-          fontSize: fontSize.lg,
+          fontSize: mobile ? fontSize.lg : fontSize.xl2,
-          fontFamily: "bold",
+          fontFamily: "demi",
           color: Colors.theme1[colorScheme].green79,
+          textAlign : ios ? "right" : "auto",
         }}
       >
-        زمان ارسال را انتخاب کنید
+        زمان ارسال را انتخاب کنید.
       </Text>
       <View style={tw("p-0 m-0 flex flex-col w-full")}>
         {transportDate?.times?.map((time, index) => (
@@ -73,7 +76,9 @@ const TransportDate = ({ transportDate }) => {
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile
+});
 
 const mapDispatchToProps = {};
 

src/screens/DeliveryForm/TransportMethod/index.js

@@ -5,6 +5,7 @@ import {
   TouchableOpacity,
   Appearance,
   ActivityIndicator,
+  Platform
 } from "react-native";
 import React, { useEffect, useCallback } from "react";
 import { connect } from "react-redux";
@@ -17,6 +18,9 @@ import tw from "tailwind-rn";
 import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
+
+const ios = Platform.OS === "ios";
+
 const TransportMethod = ({
   list,
   getList,
@@ -24,6 +28,7 @@ const TransportMethod = ({
   factorInfo,
   userId,
   loading,
+  mobile
 }) => {
   const colorScheme = Appearance.getColorScheme();
 
@@ -36,7 +41,7 @@ const TransportMethod = ({
       return (
         <Pressable
           style={[
-            tw(`flex flex-col items-center w-full px-2 py-1.5 rounded-md mt-3`),
+            tw(`flex flex-col items-center w-full px-2 rounded-md mt-3 ${mobile ? "py-1.5" : "py-2"}`),
             {
               backgroundColor: active
                 ? Colors.theme1[colorScheme].greenCF + "15"
@@ -70,7 +75,7 @@ const TransportMethod = ({
             <Text
               style={{
                 fontFamily: "bold",
-                fontSize: fontSize.lg,
+                fontSize: mobile ? fontSize.lg : fontSize.xl2,
                 color: active
                   ? Colors.theme1[colorScheme].gray20
                   : Colors.theme1[colorScheme].gray20,
@@ -82,7 +87,7 @@ const TransportMethod = ({
           <Text
             style={{
               fontFamily: "bold",
-              fontSize: fontSize.sm,
+              fontSize: mobile ? fontSize.sm : fontSize.base,
               color: active
                 ? Colors.theme1[colorScheme].green20
                 : Colors.theme1[colorScheme].gray20,
@@ -96,15 +101,16 @@ const TransportMethod = ({
     [factorInfo, loading]
   );
   return (
-    <View style={tw("mt-0 w-full")}>
+    <View style={tw(`w-full ${mobile ? "mt-0" : "mt-4"}`)}>
       <Text
         style={{
-          fontSize: fontSize.lg,
+          fontSize: mobile ? fontSize.lg : fontSize.xl,
-          fontFamily: "bold",
+          fontFamily: "demi",
           color: Colors.theme1[colorScheme].green79,
+          textAlign : ios ? "right" : "auto",
         }}
       >
-        لطفا یک روش ارسال انتخاب کنید
+        لطفا یک روش ارسال انتخاب کنید.
       </Text>
       <View style={tw("p-0 m-0 flex flex-col w-full")}>
         {list?.map((method, index) => (
@@ -124,6 +130,7 @@ const mapStateToProps = (state) => ({
   factorInfo: state.userFactor.info,
   userId: state.user.status?.id,
   loading: state.userFactor.loading,
+  mobile: state.publicApi.mobile
 });
 
 const mapDispatchToProps = {

src/screens/DeliveryForm/index.js

@@ -87,7 +87,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,

src/screens/Home/index.js

@@ -34,7 +34,6 @@ const Home = ({
   getUserProducts,
   mobile,
 }) => {
-  const [width, setWidth] = useState(Dimensions.get("window").width);
   const [position, setPosition] = useState("100%");
 
   useEffect(() => {
@@ -71,8 +70,7 @@ const Home = ({
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={[styles.container, { width }]}
+        style={[styles.container]}
-        onLayout={() => setWidth(Dimensions.get("window").width)}
       >
         {!mobile && <View style={tw("mt-5")}></View>}
         {userProduct?.length > 0 && <MyBooks books={userProducts} />}
@@ -91,6 +89,7 @@ const Home = ({
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 100,
+    // flex : 1,
     // alignItems: "",
   },
   container: {

src/screens/OrderDetails/index.js

@@ -453,7 +453,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    width: width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,

src/screens/OrdersFollowUp/components/Order.js

@@ -9,7 +9,8 @@ import {
   Appearance,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
-import Svg, { Path } from "react-native-svg"
+import { connect } from "react-redux";
+import Svg, { Path } from "react-native-svg";
 import _ from "lodash";
 
 //style
@@ -33,7 +34,7 @@ const status = {
   2: "ارسال شده",
 };
 
-function Order({ order }) {
+function Order({ order, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   return (
@@ -48,7 +49,11 @@ function Order({ order }) {
     >
       <View
         style={[
-          tw("flex flex-row-reverse w-full justify-between items-center p-3"),
+          tw(
+            `flex flex-row-reverse w-full justify-between items-center ${
+              mobile ? "p-3" : "p-4"
+            }`
+          ),
           { backgroundColor: Colors.theme1[colorScheme].greenCF + "1a" },
         ]}
       >
@@ -56,9 +61,9 @@ function Order({ order }) {
           style={[
             tw("font-medium"),
             {
-              fontSize: fontSize.base,
+              fontSize: mobile ? fontSize.base : fontSize.xl,
               color: Colors.theme1[colorScheme].green79,
-              fontFamily: "regular",
+              fontFamily: mobile ? "regular" : "demi",
             },
           ]}
         >
@@ -70,8 +75,8 @@ function Order({ order }) {
               tw("font-light"),
               {
                 color: Colors.theme1[colorScheme].green79,
-                fontSize: fontSize.sm,
+                fontSize: mobile ? fontSize.sm : fontSize.lg,
-                fontFamily: "bold",
+                fontFamily: mobile ? "bold" : "demi",
               },
             ]}
           >
@@ -95,7 +100,10 @@ function Order({ order }) {
                     source={item}
                     style={[
                       tw("rounded-md ml-1.5"),
-                      { width: width / 5, height: (width / 5) * (4 / 3) },
+                      {
+                        width: mobile ? width / 5 : width / 7,
+                        height: (mobile ? width / 5 : width / 7) * (4 / 3),
+                      },
                     ]}
                   />
                 ))
@@ -107,7 +115,10 @@ function Order({ order }) {
                       source={item}
                       style={[
                         tw("rounded-md ml-1.5"),
-                        { width: width / 5, height: (width / 5) * (4 / 3) },
+                        {
+                          width: mobile ? width / 5 : width / 7,
+                          height: (mobile ? width / 5 : width / 7) * (4 / 3),
+                        },
                       ]}
                     />
                   ))}
@@ -117,7 +128,7 @@ function Order({ order }) {
               style={[
                 tw("p-2 rounded-md text-center"),
                 {
-                  fontSize: fontSize.sm,
+                  fontSize: mobile ? fontSize.sm : fontSize.lg,
                   fontFamily: "bold",
                   backgroundColor: "#F0FFF1",
                   color: Colors.theme1[colorScheme].green79,
@@ -133,7 +144,7 @@ function Order({ order }) {
             style={[
               tw("my-3"),
               {
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.xl,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "bold",
               },
@@ -144,7 +155,9 @@ function Order({ order }) {
           <TouchableOpacity
             onPress={() => navigation.navigate("Order")}
             style={[
-              tw("rounded-md flex flex-row-reverse justify-center px-5 py-2"),
+              tw(
+                "rounded-md flex flex-row-reverse justify-center items-center px-5 py-2"
+              ),
               {
                 borderWidth: 1,
                 borderColor: Colors.theme1[colorScheme].greenCF,
@@ -153,7 +166,7 @@ function Order({ order }) {
           >
             <Text
               style={{
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
                 color: Colors.theme1[colorScheme].greenCF,
                 fontFamily: "regular",
               }}
@@ -165,6 +178,7 @@ function Order({ order }) {
               width={14.381}
               height={14.381}
               style={{ marginTop: 3, marginRight: 5 }}
+              strokeWidth={mobile ? 1 : 2}
             >
               <Path
                 d="M8.988 11.936 5.081 8.03a1.19 1.19 0 0 1 0-1.678l3.907-3.907"
@@ -180,7 +194,7 @@ function Order({ order }) {
             style={[
               tw("my-5"),
               {
-                fontSize: fontSize.sm,
+                fontSize: mobile ? fontSize.sm : fontSize.lg,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "light",
               },
@@ -194,6 +208,12 @@ function Order({ order }) {
   );
 }
 
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Order);
+
 const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 50,
@@ -207,5 +227,3 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
   },
 });
-
-export default Order;

src/screens/OrdersFollowUp/index.js

@@ -60,7 +60,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    width: width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,

src/screens/OrdersFollowUp/left.svg

@@ -1,8 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14.381" height="14.381" viewBox="0 0 14.381 14.381">
-  <g id="vuesax_linear_arrow-left" data-name="vuesax/linear/arrow-left" transform="translate(-364 -252)">
-    <g id="arrow-left" transform="translate(364 252)">
-      <path id="Vector" d="M4.253,9.491.346,5.585a1.19,1.19,0,0,1,0-1.678L4.253,0" transform="translate(4.735 2.445)" fill="none" stroke="#1999c0" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
-      <path id="Vector-2" data-name="Vector" d="M0,0H14.381V14.381H0Z" transform="translate(14.381 14.381) rotate(180)" fill="none" opacity="0"/>
-    </g>
-  </g>
-</svg>

src/screens/Product/components/Book.js

@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
   Dimensions,
   Appearance,
-  Pressable
+  Pressable,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { product, userProduct } from "../../../redux/actions";
@@ -31,7 +31,7 @@ import Colors from "../../../constants/Colors";
 
 const { height } = Dimensions.get("window");
 
-function Book({ book, grades, pushToCart, userId, loading }) {
+function Book({ book, grades, pushToCart, userId, loading, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const [type, setType] = useState(1);
@@ -46,6 +46,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
   }, [type]);
   return (
     <ScrollView style={[tw("flex flex-col flex-1 relative")]}>
+      {!mobile && <View style={tw("mt-5")}></View>}
       {pageLoading && (
         <Pressable
           style={[
@@ -64,7 +65,10 @@ function Book({ book, grades, pushToCart, userId, loading }) {
       {imageSlider && <ImageSlider />}
       <View style={tw("flex flex-row-reverse")}>
         <Pressable
-          style={[tw("rounded-md"), { height: 160, width: 110 }]}
+          style={[
+            tw("rounded-md"),
+            { height: mobile ? 160 : 300, width: mobile ? 110 : 210 },
+          ]}
           // onPress={() => setImageSlider(true)}
         >
           <Image
@@ -85,9 +89,9 @@ function Book({ book, grades, pushToCart, userId, loading }) {
             <Text
               style={{
                 color: Colors.theme1[colorScheme].green79,
-                fontSize: fontSize.xl,
+                fontSize: mobile ? fontSize.xl : fontSize.xl3,
                 marginBottom: 5,
-                fontFamily: "bold",
+                fontFamily: "demi",
               }}
             >
               {book.product[type].name}
@@ -95,7 +99,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
             <Text
               style={{
                 color: Colors.theme1[colorScheme].green79,
-                fontSize: fontSize.lg,
+                fontSize: mobile ? fontSize.lg : fontSize.xl,
                 fontFamily: "regular",
               }}
             >
@@ -118,9 +122,9 @@ function Book({ book, grades, pushToCart, userId, loading }) {
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].greenCF,
+              color: Colors.theme1[colorScheme].green79,
               textAlign: "center",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
             }}
           >
@@ -130,7 +134,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[colorScheme].greenCF + "55",
+            backgroundColor: Colors.theme1[colorScheme].green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -138,9 +142,9 @@ function Book({ book, grades, pushToCart, userId, loading }) {
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].greenCF,
+              color: Colors.theme1[colorScheme].green79,
               textAlign: "center",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
             }}
           >
@@ -150,7 +154,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
         </View>
         <View
           style={{
-            backgroundColor: Colors.theme1[colorScheme].greenCF + "55",
+            backgroundColor: Colors.theme1[colorScheme].green79 + "55",
             height: 20,
             width: 2,
           }}
@@ -158,9 +162,9 @@ function Book({ book, grades, pushToCart, userId, loading }) {
         <View>
           <Text
             style={{
-              color: Colors.theme1[colorScheme].greenCF,
+              color: Colors.theme1[colorScheme].green79,
               textAlign: "center",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               fontFamily: "regular",
             }}
           >
@@ -175,8 +179,8 @@ function Book({ book, grades, pushToCart, userId, loading }) {
             tw("w-full text-right"),
             {
               color: Colors.theme1[colorScheme].green79,
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
-              fontFamily: "bold",
+              fontFamily: "demi",
             },
           ]}
         >
@@ -251,7 +255,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
               tw(""),
               {
                 color: Colors.theme1[colorScheme].green79,
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.lg,
                 fontFamily: "bold",
               },
             ]}
@@ -310,6 +314,7 @@ function Book({ book, grades, pushToCart, userId, loading }) {
 const mapStateToProps = (state) => ({
   userId: state.user.status?.id,
   loading: state.userProduct.loading,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {

src/screens/Product/components/Description.js

@@ -1,31 +1,44 @@
-import React from 'react';
+import React from "react";
-import {View, Text, Dimensions, Image} from 'react-native';
+import { View, Text, Dimensions } from "react-native";
-import tw from 'tailwind-react-native-classnames';
+import tw from "tailwind-rn";
-import fontSize from '../../../constants/fontSize';
+import fontSize from "../../../constants/fontSize";
-import {Entypo} from '@expo/vector-icons';
+import { Entypo } from "@expo/vector-icons";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
-const height = Dimensions.get('window').height;
+const height = Dimensions.get("window").height;
 
 export default function Description({ description }) {
   return (
-    <View style={[tw.style('w-full flex flex-col pt-6 mt-2 mb-3'), {borderTopWidth : 1, borderColor : '#86A0B944'}]}>
     <View
-        style={tw.style('flex flex-row-reverse justify-between items-center mb-2')}>
+      style={[
+        tw("w-full flex flex-col pt-6 mt-2 mb-3"),
+        { borderTopWidth: 1, borderColor: "#86A0B944" },
+      ]}
+    >
+      <View
+        style={tw("flex flex-row-reverse justify-between items-center mb-2")}
+      >
         <Text
           style={[
-            {fontSize: fontSize.sm, color: '#275077', fontFamily: 'regular'},
+            { fontSize: fontSize.sm, color: "#275077", fontFamily: "regular" },
-            tw.style(''),
+            tw(""),
-          ]}>
+          ]}
+        >
           توضیحات
         </Text>
         <Entypo name="chevron-small-left" size={20} color="#196EC0" />
       </View>
       <Text
         style={[
-          tw.style('w-full text-right mt-2'),
+          tw("w-full text-right mt-2"),
-          {fontSize: fontSize.sm, color: '#323232bb', lineHeight: 20, fontFamily : 'light'},
+          {
-        ]}>
+            fontSize: fontSize.sm,
+            color: "#323232bb",
+            lineHeight: 20,
+            fontFamily: "light",
+          },
+        ]}
+      >
         {description}
       </Text>
     </View>

src/screens/Product/components/LinkBox.js

@@ -1,14 +1,15 @@
 import React, { useRef } from "react";
 import { Text, TouchableOpacity, Appearance } from "react-native";
+import { connect } from "react-redux";
 import RBSheet from "react-native-raw-bottom-sheet";
 import { Entypo } from "@expo/vector-icons";
 
 //style
-import tw from "tailwind-react-native-classnames";
+import tw from "tailwind-rn";
 import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
-export default function Description({ title, component, height }) {
+function Description({ title, component, height, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const refRBSheet = useRef();
   return (
@@ -16,8 +17,8 @@ export default function Description({ title, component, height }) {
       <TouchableOpacity
         onPress={() => refRBSheet.current.open()}
         style={[
-          tw.style(
+          tw(
-            "flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 py-3"
+            `flex flex-row-reverse justify-between items-center mt-3 rounded-md px-5 ${mobile ? "py-3" : "py-4"}`
           ),
           {
             backgroundColor: Colors.theme1[colorScheme].greenCF,
@@ -28,11 +29,11 @@ export default function Description({ title, component, height }) {
         <Text
           style={[
             {
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               color: "white",
-              fontFamily: "bold",
+              fontFamily: "demi",
             },
-            tw.style(""),
+            tw(""),
           ]}
         >
           {title}
@@ -64,3 +65,9 @@ export default function Description({ title, component, height }) {
     </>
   );
 }
+
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(Description);

src/screens/Product/components/Rates.js

@@ -1,29 +1,37 @@
-import React from 'react';
+import React from "react";
-import {View, Text, Dimensions} from 'react-native';
+import { View, Text, Dimensions } from "react-native";
-import tw from 'tailwind-react-native-classnames';
+import tw from "tailwind-rn";
-import fontSize from '../../../constants/fontSize';
+import fontSize from "../../../constants/fontSize";
 
-const width = Dimensions.get('window').width;
+const width = Dimensions.get("window").width;
 
 export default function Rates({ rates }) {
   return (
-    <View style={tw.style('flex flex-row-reverse')}>
+    <View style={tw("flex flex-row-reverse")}>
       <View
         style={[
-          tw.style('flex flex-col items-center justify-center'),
+          tw("flex flex-col items-center justify-center"),
-          {width: '25%'},
+          { width: "25%" },
-        ]}>
+        ]}
+      >
         <Text
           style={[
-            {fontSize: fontSize.xl6, color: '#05335F', fontFamily: 'bold'},
+            { fontSize: fontSize.xl6, color: "#05335F", fontFamily: "bold" },
-          ]}>
+          ]}
+        >
           {rates.mid}
         </Text>
-        <Text style={{fontSize: fontSize.sm, color: '#707070', fontFamily: 'light'}}>
+        <Text
-          {'از' + ' ' + rates.allRates + ' ' + 'نفر'}
+          style={{
+            fontSize: fontSize.sm,
+            color: "#707070",
+            fontFamily: "light",
+          }}
+        >
+          {"از" + " " + rates.allRates + " " + "نفر"}
         </Text>
       </View>
-      <View style={[tw.style('flex flex-col flex-1'), {width: '60%'}]}>
+      <View style={[tw("flex flex-col flex-1"), { width: "60%" }]}>
         {rates.fields.map((field, index) => (
           <Progress key={index} data={field} />
         ))}
@@ -34,28 +42,39 @@ export default function Rates({rates}) {
 
 const Progress = ({ data }) => {
   return (
-    <View style={[tw.style('flex flex-1 flex-row items-center py-0.5')]}>
+    <View style={[tw("flex flex-1 flex-row items-center py-0.5")]}>
-      <Text style={{fontSize: fontSize.sm, color: '#05335F', fontFamily: 'regular'}}>{data.name}</Text>
+      <Text
+        style={{
+          fontSize: fontSize.sm,
+          color: "#05335F",
+          fontFamily: "regular",
+        }}
+      >
+        {data.name}
+      </Text>
       <View
         style={[
-          tw.style('rounded-md ml-2 flex-1'),
+          tw("rounded-md ml-2 flex-1"),
-          {height: 6, backgroundColor: '#D3E9FF'},
+          { height: 6, backgroundColor: "#D3E9FF" },
-        ]}>
+        ]}
+      >
         <View
           style={[
-            tw.style('h-full rounded-md my-auto'),
+            tw("h-full rounded-md my-auto"),
-            {width: data.value + '%', backgroundColor: '#2B8DEB'},
+            { width: data.value + "%", backgroundColor: "#2B8DEB" },
-          ]}></View>
+          ]}
+        ></View>
       </View>
       <Text
         style={{
           fontSize: fontSize.xs,
-          fontFamily: 'light',
+          fontFamily: "light",
           width: width / 7.5,
-          textAlign: 'center',
+          textAlign: "center",
-          color: '#05335F',
+          color: "#05335F",
-        }}>
+        }}
-        {data.value + '%'}
+      >
+        {data.value + "%"}
       </Text>
     </View>
   );

src/screens/Product/index.js

@@ -61,7 +61,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,

src/screens/Products/components/Main.js

@@ -17,10 +17,10 @@ import tw from "tailwind-rn";
 import Colors from "../../../constants/Colors";
 import fontSize from "../../../constants/fontSize";
 
-const width = Dimensions.get("window").width;
 const ios = Platform.OS === "ios";
 
-const Main = ({ books, filterOptions, grades }) => {
+const Main = ({ books, filterOptions, grades, mobile }) => {
+  const [width, setWidth] = React.useState(Dimensions.get("window").width);
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const [filterLoading, setFilterLoading] = React.useState(false);
@@ -73,9 +73,16 @@ const Main = ({ books, filterOptions, grades }) => {
     return filterOptions.productType === "دوره ویدئویی"
       ? bySearchFilter?.map((product, index) => (
           <Pressable
-            style={[tw(`w-full flex flex-col mb-5`)]}
+            style={[
+              {
+                width: mobile ? "auto" : width / 2.2,
+                borderWidth: 1,
+                borderColor: Colors.theme1[colorScheme].grayE3,
+              },
+              tw(`flex flex-col mb-5 p-2 rounded-md ${mobile ? "w-full" : ""}`),
+            ]}
             key={index}
-            onPress={() => navigation.navigate("Product")}
+            onPress={() => navigation.navigate("Video", { id: product.id })}
           >
             <View style={[tw("relative w-full mb-1")]}>
               <Image
@@ -84,7 +91,7 @@ const Main = ({ books, filterOptions, grades }) => {
                 }}
                 style={[
                   tw("w-full rounded-md"),
-                  { height: ((width - 25) * 9) / 16 },
+                  { height: ((mobile ? width - 25 : width / 2.2) * 9) / 16 },
                 ]}
               />
             </View>
@@ -134,7 +141,7 @@ const Main = ({ books, filterOptions, grades }) => {
                 key={product?.product[0]?.id}
                 style={[
                   {
-                    width: width / 2 - 25,
+                    width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
                     borderColor: Colors.theme1[colorScheme].grayE3,
@@ -155,7 +162,10 @@ const Main = ({ books, filterOptions, grades }) => {
                     }}
                     style={[
                       tw("w-full rounded-md"),
-                      { height: ((width / 2 - 25) * 16) / 14 },
+                      {
+                        height:
+                          ((mobile ? width / 2 - 25 : width / 3.2) * 16) / 14,
+                      },
                     ]}
                   />
                   <Text
@@ -219,7 +229,7 @@ const Main = ({ books, filterOptions, grades }) => {
                 key={product?.product[1]?.id}
                 style={[
                   {
-                    width: width / 2 - 25,
+                    width: mobile ? width / 2 - 25 : width / 3.2,
                     marginBottom: 15,
                     borderWidth: 1,
                     borderColor: Colors.theme1[colorScheme].grayE3,
@@ -240,7 +250,10 @@ const Main = ({ books, filterOptions, grades }) => {
                     }}
                     style={[
                       tw("w-full rounded-md"),
-                      { height: ((width / 2 - 25) * 16) / 14 },
+                      {
+                        height:
+                          ((mobile ? width / 2 - 25 : width / 3.2) * 16) / 14,
+                      },
                     ]}
                   />
                   <Text
@@ -303,9 +316,12 @@ const Main = ({ books, filterOptions, grades }) => {
 
   return (
     <View
+      onLayout={() => setWidth(Dimensions.get("window").width)}
       style={[
         tw(
-          "flex w-full px-4 flex-row flex-wrap justify-between bg-white pb-20"
+          `flex w-full px-4 flex-wrap  justify-between bg-white pb-20 ${
+            ios ? "flex-row-reverse" : "flex-row"
+          }`
         ),
       ]}
     >
@@ -324,6 +340,7 @@ const Main = ({ books, filterOptions, grades }) => {
 
 const mapStateToProps = (state) => ({
   filterOptions: state.book.filterOptions,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {};

src/screens/Profile/components/List.js

@@ -5,7 +5,7 @@ import {
   Appearance,
   Platform,
   TouchableOpacity,
-  Dimensions
+  Dimensions,
 } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
@@ -22,7 +22,7 @@ import Colors from "../../../constants/Colors";
 const ios = Platform.OS === "ios";
 const { height } = Dimensions.get("window");
 
-const List = ({}) => {
+const List = ({ mobile }) => {
   const navigation = useNavigation();
   const colorScheme = Appearance.getColorScheme();
 
@@ -162,7 +162,7 @@ const List = ({}) => {
         </Svg>
       ),
       name: "لیست علاقه‌مندی‌ها",
-      onPress: () => navigation.push('ProfileBookmark'),
+      onPress: () => navigation.push("ProfileBookmark"),
     },
     {
       icon: (
@@ -201,7 +201,11 @@ const List = ({}) => {
   ];
 
   return (
-    <View style={tw(`w-full flex-col mt-8 ${ios ? "items-end" : ""}`)}>
+    <View
+      style={tw(
+        `w-full flex-col ${mobile ? "mt-8" : "mt-12"} ${ios ? "items-end" : ""}`
+      )}
+    >
       {pages.map((page, index) => (
         <TouchableOpacity
           key={index}
@@ -216,18 +220,15 @@ const List = ({}) => {
           ]}
           onPress={() => page.onPress()}
         >
-          <View
+          <View style={tw(`flex items-center flex-row-reverse`)}>
-            style={tw(
-              `flex items-center flex-row-reverse`
-            )}
-          >
             {page.icon}
             <Text
               style={{
                 fontFamily: "regular",
                 marginTop: 5,
-                marginRight: 10,
+                marginRight: mobile ? 10 : 20,
                 color: Colors.theme1[colorScheme].gray20,
+                fontSize: mobile ? fontSize.tiny : fontSize.lg,
               }}
             >
               {page.name}
@@ -249,6 +250,8 @@ const List = ({}) => {
   );
 };
 
-const mapStateToProps = (state) => ({});
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
 
 export default connect(mapStateToProps)(List);

src/screens/Profile/components/ProfileAddress/index.js

@@ -28,6 +28,7 @@ import Colors from "../../../../constants/Colors";
 import fontSize from "../../../../constants/fontSize";
 
 const { height, width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 const ProfileAddress = ({
   addresses,
@@ -38,12 +39,12 @@ const ProfileAddress = ({
   getFactorInfo,
   loading,
   closeBottomSheet,
+  mobile,
 }) => {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
-
+  const [height, setHeight] = React.useState(Dimensions.get("window").height);
   const Location = ({ address, active }) => {
-    console.log(address);
     return (
       <Pressable
         style={[
@@ -115,8 +116,9 @@ const ProfileAddress = ({
                 style={[
                   {
                     fontFamily: "regular",
-                    fontSize: fontSize.tiny,
+                    fontSize: mobile ? fontSize.tiny : fontSize.lg,
                     lineHeight: 22,
+                    textAlign: ios ? "right" : "auto",
                   },
                 ]}
               >
@@ -125,10 +127,11 @@ const ProfileAddress = ({
               <Text
                 style={[
                   {
-                    marginTop: 4,
+                    marginTop: mobile ? 4 : 8,
                     fontFamily: "regular",
-                    fontSize: fontSize.tiny,
+                    fontSize: mobile ? fontSize.tiny : fontSize.lg,
                     lineHeight: 22,
+                    textAlign: ios ? "right" : "auto",
                   },
                 ]}
               >
@@ -137,10 +140,11 @@ const ProfileAddress = ({
               <Text
                 style={[
                   {
-                    marginTop: 4,
+                    marginTop: mobile ? 4 : 8,
                     fontFamily: "regular",
-                    fontSize: fontSize.tiny,
+                    fontSize: mobile ? fontSize.tiny : fontSize.lg,
                     lineHeight: 22,
+                    textAlign: ios ? "right" : "auto",
                   },
                 ]}
               >
@@ -149,10 +153,11 @@ const ProfileAddress = ({
               <Text
                 style={[
                   {
-                    marginTop: 4,
+                    marginTop: mobile ? 4 : 8,
                     fontFamily: "regular",
-                    fontSize: fontSize.tiny,
+                    fontSize: mobile ? fontSize.tiny : fontSize.lg,
                     lineHeight: 22,
+                    textAlign: ios ? "right" : "auto",
                   },
                 ]}
               >
@@ -218,7 +223,8 @@ const ProfileAddress = ({
       />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={styles.container}
+        style={[styles.container, { minHeight: height - 200 }]}
+        onLayout={() => setHeight(Dimensions.get("window").height)}
       >
         <View style={tw("w-full mt-2 px-4")}>
           <View style={tw("p-0 m-0 flex flex-col")}>
@@ -261,7 +267,7 @@ const ProfileAddress = ({
               marginRight: 5,
               fontSize: fontSize.xl3,
               color: Colors.theme1[colorScheme].greenCF,
-              fontFamily: "bold"
+              fontFamily: "bold",
             }}
           >
             +
@@ -277,6 +283,7 @@ const mapStateToProps = (state) => ({
   userAddressId: state.userFactor.info?.userAddressId,
   loading: state.userFactor.loading,
   addresses: state.userAddress.list,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {
@@ -291,10 +298,8 @@ const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 100,
     position: "relative",
-    minHeight: height - 150,
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,

src/screens/Profile/components/ProfileBookmark/index.js

@@ -10,11 +10,12 @@ import {
   Dimensions,
   StatusBar,
   Image,
+  mobile,
 } from "react-native";
 import React from "react";
 import { connect } from "react-redux";
 import { useNavigation } from "@react-navigation/native";
-import Svg, { Path } from "react-native-svg"
+import Svg, { Path } from "react-native-svg";
 
 //components
 import Navbar from "../../../../components/Navbar";
@@ -28,6 +29,7 @@ import fontSize from "../../../../constants/fontSize";
 import bookImage from "../../..//OrdersFollowUp/assets/b1.png";
 
 const { height, width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 const ProfileBookmark = ({ bookmarkList }) => {
   const colorScheme = Appearance.getColorScheme();
@@ -48,13 +50,13 @@ const ProfileBookmark = ({ bookmarkList }) => {
           <Image
             source={bookmark.image}
             style={{
-              width: width / 5,
+              width: mobile ? width / 5 : width / 7,
               minWidth: 80,
-              height: ((width / 5) * 4) / 2.7,
+              height: ((mobile ? width / 5 : width / 7) * 4) / 2.7,
               minHeight: (80 * 4) / 2.7,
             }}
           />
-          <View style={tw("flex flex-col mr-2")}>
+          <View style={tw(`flex flex-col mr-2 ${ios ? "items-end" : ""}`)}>
             <Text
               style={{
                 fontFamily: "bold",
@@ -137,6 +139,7 @@ const ProfileBookmark = ({ bookmarkList }) => {
 
 const mapStateToProps = (state) => ({
   loading: state.userFactor.loading,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {};
@@ -149,7 +152,6 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,

src/screens/Profile/components/User.js

@@ -17,7 +17,7 @@ import Colors from "../../../constants/Colors";
 
 const ios = Platform.OS === "ios";
 
-const User = ({ user }) => {
+const User = ({ user, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const [dropdown, setDropdown] = React.useState(true);
   return (
@@ -32,20 +32,28 @@ const User = ({ user }) => {
           {user?.picFileIds ? (
             <Image
               source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
-              style={[tw("rounded-full"), { width: 70, height: 70 }]}
+              style={[
+                tw("rounded-full"),
+                { width: mobile ? 70 : 140, height: mobile ? 70 : 140 },
+              ]}
             />
           ) : (
             <View
               style={[
                 tw("rounded-full"),
-                { width: 60, height: 60, zIndex: 1, backgroundColor: "#ddd" },
+                {
+                  width: mobile ? 70 : 140,
+                  height: mobile ? 70 : 140,
+                  zIndex: 1,
+                  backgroundColor: "#ddd",
+                },
               ]}
             ></View>
           )}
           <View style={tw(`flex flex-col mr-1 ${ios ? "items-end" : ""}`)}>
             <Text
               style={{
-                fontSize: fontSize.lg,
+                fontSize: mobile ? fontSize.lg : fontSize.xl5,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "bold",
               }}
@@ -54,10 +62,10 @@ const User = ({ user }) => {
             </Text>
             <Text
               style={{
-                fontSize: fontSize.tiny,
+                fontSize: mobile ? fontSize.tiny : fontSize.xl2,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "light",
-                marginTop: 3,
+                marginTop: mobile ? 3 : 6,
               }}
             >
               {user?.cellphone}
@@ -79,7 +87,11 @@ const User = ({ user }) => {
       </Pressable>
       {dropdown && (
         <View
-          style={tw(`flex flex-col w-full pr-16 ${ios ? "items-end" : " "}`)}
+          style={tw(
+            `flex flex-col w-full pr-16 ${ios ? "items-end" : " "} ${
+              mobile ? "mt-0" : "mt-4"
+            }`
+          )}
         >
           <View
             style={[
@@ -93,15 +105,18 @@ const User = ({ user }) => {
             {user?.picFileIds ? (
               <Image
                 source={{ uri: "https://dnvn.ir/api/v1/" + user.picFileIds }}
-                style={[tw("rounded-full"), { width: 30, height: 30 }]}
+                style={[
+                  tw("rounded-full"),
+                  { width: mobile ? 30 : 60, height: mobile ? 30 : 60 },
+                ]}
               />
             ) : (
               <View
                 style={[
                   tw("rounded-full"),
                   {
-                    minWidth: 30,
+                    width: mobile ? 30 : 60,
-                    minHeight: 30,
+                    height: mobile ? 30 : 60,
                     zIndex: 1,
                     backgroundColor: "#ddd",
                   },
@@ -110,7 +125,7 @@ const User = ({ user }) => {
             )}
             <Text
               style={{
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
                 color: Colors.theme1[colorScheme].gray20,
                 fontFamily: "bold",
                 marginRight: 5,
@@ -130,7 +145,7 @@ const User = ({ user }) => {
           >
             <Text
               style={{
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
                 fontFamily: "bold",
                 color: Colors.theme1[colorScheme].gray20,
               }}
@@ -157,6 +172,7 @@ const User = ({ user }) => {
 
 const mapStateToProps = (state) => ({
   user: state.user.status,
+  mobile: state.publicApi.mobile,
 });
 
 export default connect(mapStateToProps)(User);

src/screens/Profile/index.js

@@ -21,13 +21,6 @@ import User from "./components/User";
 import Trophy from "./components/Trophy";
 import List from "./components/List";
 
-//style
-import fontSize from "../../constants/fontSize";
-import Colors from "../../constants/Colors";
-import tw from "tailwind-rn";
-
-const { width, height } = Dimensions.get("window");
-
 function Profile({}) {
   const navigation = useNavigation();
   const colorScheme = Appearance.getColorScheme();
@@ -82,10 +75,8 @@ const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 100,
     position: "relative",
-    minHeight: height - 100
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,

src/screens/ShoppingCart/components/Product.js

@@ -7,10 +7,11 @@ import {
   Pressable,
   Appearance,
   ActivityIndicator,
+  Platform,
 } from "react-native";
 import { connect } from "react-redux";
 import { userProduct } from "../../../redux/actions";
-import separate from '../../../utils/separate';
+import separate from "../../../utils/separate";
 import { AntDesign } from "@expo/vector-icons";
 
 //style
@@ -19,13 +20,16 @@ import fontSize from "../../../constants/fontSize";
 import tw from "tailwind-rn";
 
 const width = Dimensions.get("window").width;
+const ios = Platform.OS === "ios";
 
-function Product({ product, grades, pushToCart, loading }) {
+function Product({ product, grades, pushToCart, loading, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   return (
     <View
       style={[
-        tw("flex flex-row-reverse justify-between py-2"),
+        tw(
+          `flex justify-between py-2 ${ios ? "flex-row" : "flex-row-reverse"}`
+        ),
         {
           borderBottomWidth: 1,
           borderColor: Colors.theme1[colorScheme].grayE3,
@@ -33,20 +37,27 @@ function Product({ product, grades, pushToCart, loading }) {
         },
       ]}
     >
-      <View style={tw("flex flex-row-reverse")}>
+      <View style={tw(`flex ${ios ? "flex-row" : "flex-row-reverse"}`)}>
         <Image
           source={{
             uri: "https://dnvn.ir/api/v1/file/" + product.product.book.fileIds,
           }}
           style={[
             tw(""),
-            { width: width / 5, height: ((width / 5) * 4) / 2.8 },
+            {
+              width: mobile ? width / 5 : width / 7,
+              height: ((mobile ? width / 5 : width / 7) * 4) / 2.8,
+            },
           ]}
         />
-        <View style={tw("flex flex-col items-end pr-2")}>
+        <View
+          style={tw(
+            `flex flex-col  ${ios ? "items-start pl-3" : "items-end pr-2"}`
+          )}
+        >
           <Text
             style={{
-              fontSize: fontSize.lg,
+              fontSize: mobile ? fontSize.lg : fontSize.xl4,
               color: Colors.theme1[colorScheme].green79,
               marginBottom: 5,
               fontFamily: "bold",
@@ -56,7 +67,7 @@ function Product({ product, grades, pushToCart, loading }) {
           </Text>
           <Text
             style={{
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               color: Colors.theme1[colorScheme].gray2077,
               marginBottom: 3,
               fontFamily: "regular",
@@ -66,27 +77,51 @@ function Product({ product, grades, pushToCart, loading }) {
           </Text>
           <Text
             style={{
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               color: Colors.theme1[colorScheme].gray2077,
               fontFamily: "regular",
             }}
           >
             {product.productType === 2 ? "نسخه فیزیکی" : "نسخه دیجیتال"}
           </Text>
-          <View style={tw("flex flex-row items-center justify-center mt-4")}>
+          <View
-            <Text style={[{ fontSize: fontSize.xs, fontFamily: "regular" }]}>
+            style={tw(
+              `flex items-center justify-center mt-4 ${
+                ios ? "flex-row-reverse" : "flex-row"
+              }`
+            )}
+          >
+            <Text
+              style={[
+                {
+                  fontSize: mobile ? fontSize.xs : fontSize.tiny,
+                  fontFamily: "regular",
+                },
+              ]}
+            >
               {" " + "تومان"}
             </Text>
-            <Text style={[{ fontSize: fontSize.lg, fontFamily: "regular" }]}>
+            <Text
+              style={[
+                {
+                  fontSize: mobile ? fontSize.lg : fontSize.xl,
+                  fontFamily: "regular",
+                },
+              ]}
+            >
               {separate(product?.product?.price)}
             </Text>
           </View>
         </View>
       </View>
-      <View style={tw("flex flex-col justify-between items-start")}>
+      <View
+        style={tw(
+          `flex flex-col justify-between ${ios ? "items-end" : "items-start"}`
+        )}
+      >
         <AntDesign
           name="close"
-          size={20}
+          size={mobile ? 20 : 30}
           color={Colors.theme1[colorScheme].redFF1}
           onPress={() =>
             pushToCart(
@@ -101,7 +136,11 @@ function Product({ product, grades, pushToCart, loading }) {
           }
         />
         <View style={tw("flex flex-col items-center mt-2")}>
-          <View style={tw("flex flex-row-reverse items-center mb-3")}>
+          <View
+            style={tw(
+              `flex items-center mb-3 ${ios ? "flex-row" : "flex-row-reverse"}`
+            )}
+          >
             <Pressable
               onPress={() =>
                 pushToCart({
@@ -112,7 +151,7 @@ function Product({ product, grades, pushToCart, loading }) {
               }
               style={[
                 tw(
-                  "rounded-md py-0 px-2 flex flex-row justify-center items-center border"
+                  `rounded-md py-0 flex flex-row justify-center items-center border ${mobile ? 'px-2' : "px-3"}`
                 ),
                 {
                   borderColor: Colors.theme1[colorScheme].greenCF,
@@ -121,7 +160,7 @@ function Product({ product, grades, pushToCart, loading }) {
             >
               <Text
                 style={{
-                  fontSize: fontSize.xl,
+                  fontSize: mobile ? fontSize.xl : fontSize.xl4,
                   color: Colors.theme1[colorScheme].greenCF,
                   fontFamily: "light",
                 }}
@@ -160,7 +199,7 @@ function Product({ product, grades, pushToCart, loading }) {
               }
               style={[
                 tw(
-                  "rounded-md py-0 px-2.5 flex flex-row justify-center items-center border"
+                  `rounded-md py-0  flex flex-row justify-center items-center border ${mobile ? 'px-2.5' : 'px-3.5'}`
                 ),
                 {
                   borderColor: Colors.theme1[colorScheme].greenCF,
@@ -169,7 +208,7 @@ function Product({ product, grades, pushToCart, loading }) {
             >
               <Text
                 style={{
-                  fontSize: fontSize.xl,
+                  fontSize: mobile ? fontSize.xl : fontSize.xl4,
                   color: Colors.theme1[colorScheme].greenCF,
                   fontFamily: "bold",
                 }}
@@ -178,11 +217,11 @@ function Product({ product, grades, pushToCart, loading }) {
               </Text>
             </Pressable>
           </View>
-          <View style={tw("flex flex-row items-center justify-center")}>
+          <View style={tw(`flex items-center justify-center ${ios ? "flex-row-reverse" : "flex-row"}`)}>
             <Text style={[{ fontSize: fontSize.sm, fontFamily: "regular" }]}>
               {" " + "تومان"}
             </Text>
-            <Text style={[{ fontSize: fontSize.xl, fontFamily: "regular" }]}>
+            <Text style={[{ fontSize: mobile ? fontSize.xl : fontSize.xl4, fontFamily: "regular" }]}>
               {separate(product.product.price * product.count)}
             </Text>
           </View>
@@ -194,6 +233,7 @@ function Product({ product, grades, pushToCart, loading }) {
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {

src/screens/ShoppingCart/index.js

@@ -267,7 +267,6 @@ const styles = StyleSheet.create({
     position: "relative",
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,

src/screens/Video/components/Season.js

@@ -26,7 +26,7 @@ const Season = ({
   activeSeason,
   realSeasons,
   seasonName,
-  id,
+  mobile
 }) => {
   // const [selectedSeason, setSelectedSeason] = useState(null);
   const colorScheme = Appearance.getColorScheme();
@@ -45,7 +45,7 @@ const Season = ({
         <View
           style={[
             tw(
-              "w-full flex flex-row-reverse justify-between items-center py-2 px-0"
+              "w-full flex flex-row-reverse justify-between items-center py-3 px-0"
             ),
           ]}
         >
@@ -53,7 +53,7 @@ const Season = ({
             style={[
               {
                 fontFamily: "bold",
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.lg,
                 color: Colors.theme1[colorScheme].green79,
               },
             ]}
@@ -65,7 +65,7 @@ const Season = ({
               style={[
                 {
                   fontFamily: "regular",
-                  fontSize: fontSize.base,
+                  fontSize: mobile ? fontSize.base : fontSize.lg,
                   color: Colors.theme1[colorScheme].green79,
                 },
               ]}
@@ -74,12 +74,12 @@ const Season = ({
             </Text>
             <Pressable
               style={[
-                tw("py-1 rounded-sm px-4 mr-4"),
+                tw(`py-1 rounded-md px-4 ${mobile ? "mr-4" : "mr-8"}`),
                 {
                   borderWidth: 1,
                   borderColor:
                     Number(index) === 0
-                      ? Colors.theme1[colorScheme].greenC8
+                      ? Colors.theme1[colorScheme].greenCF
                       : Colors.theme1[colorScheme].gray2077,
                 },
               ]}
@@ -97,11 +97,11 @@ const Season = ({
                 style={{
                   width: "100%",
                   textAlign: "center",
-                  fontFamily: "regular",
+                  fontFamily: "bold",
-                  fontSize: fontSize.tiny,
+                  fontSize: mobile ? fontSize.tiny : fontSize.lg,
                   color:
                     Number(index) === 0
-                      ? Colors.theme1[colorScheme].greenC8
+                      ? Colors.theme1[colorScheme].greenCF
                       : Colors.theme1[colorScheme].gray2077,
                 }}
               >
@@ -131,7 +131,7 @@ const Season = ({
             style={[
               {
                 fontFamily: "bold",
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
                 color: Colors.theme1[colorScheme].green79,
               },
             ]}
@@ -162,6 +162,7 @@ const mapStateToProps = (state) => ({
   activeSeason: state.publicApi.activeCategory,
   realSeasons: state.publicApi.bookInfo?.categories,
   vodDuration: state.publicApi.bookInfo?.vodDuration,
+  mobile: state.publicApi.mobile
 });
 
 const mapDispatchToProps = {

src/screens/Video/index.js

@@ -39,6 +39,7 @@ function Product({
   userId,
   pushToCart,
   loading,
+  mobile,
 }) {
   const colorScheme = Appearance.getColorScheme();
   const [position, setPosition] = useState("100%");
@@ -51,13 +52,11 @@ function Product({
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     setPosition(position === "100%" ? "0%" : "100%");
   };
-
   return (
     <SafeAreaView
       style={{
         paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
         position: "relative",
-        height: height,
       }}
     >
       <Navbar
@@ -77,11 +76,12 @@ function Product({
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}
       >
-        <View style={tw(" w-full flex flex-col")}>
+        {!mobile && <View style={tw("mt-5")}></View>}
+        <View style={[tw(" w-full flex flex-col")]}>
           <View
             style={[
               tw(
-                "w-full flex flex-row-reverse flex-1 justify-between relative overflow-hidden"
+                "w-full flex flex-row-reverse flex-1 relative overflow-hidden"
               ),
             ]}
           >
@@ -89,7 +89,7 @@ function Product({
               source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
               style={[
                 tw("rounded-md h-full rounded-md ml-2"),
-                { width: ((height / 5) * 3) / 4, height: height / 5 },
+                { height: mobile ? 160 : 300, width: mobile ? 110 : 210 },
               ]}
             />
             <View style={tw("flex flex-col items-end flex-1")}>
@@ -97,17 +97,17 @@ function Product({
                 style={{
                   marginTop: 5,
                   color: Colors.theme1[colorScheme].green79,
-                  fontSize: fontSize.xl,
+                  fontSize: mobile ? fontSize.xl : fontSize.xl3,
                   marginBottom: 0,
-                  fontFamily: "bold",
+                  fontFamily: "demi",
                 }}
               >
-                {"دوره ویدئویی" + "" + book?.product[2]?.name}
+                {book?.name}
               </Text>
               <Text
                 style={{
-                  color: Colors.theme1[colorScheme].greenCF,
+                  color: Colors.theme1[colorScheme].green79,
-                  fontSize: fontSize.tiny,
+                  fontSize: mobile ? fontSize.lg : fontSize.xl,
                   marginTop: 10,
                   fontFamily: "regular",
                 }}
@@ -158,11 +158,10 @@ const styles = StyleSheet.create({
   contentContainerStyle: {
     paddingBottom: 100,
     // flex : 1,
+    // backgroundColor : '#fff'
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
-    flexDirection: "column",
     paddingVertical: 5,
     paddingHorizontal: 16,
   },
@@ -175,6 +174,7 @@ const mapStateToProps = (state) => ({
   isLogin: state.user.status,
   userId: state.user.status?.id,
   loading: state.userProduct.loading,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {

src/screens/VideoDisplay/components/Season/index.js

@@ -11,7 +11,7 @@ import Colors from "../../../../constants/Colors";
 
 const { width } = Dimensions.get("window");
 
-const Season = ({ season, activeUnit, name, setVideoActive }) => {
+const Season = ({ season, activeUnit, name, setVideoActive, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const duration = (value) => {
@@ -38,7 +38,7 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
     return (
       <View
         style={[
-          tw("w-full flex flex-col rounded-md overflow-hidden mb-3"),
+          tw(`w-full flex flex-col rounded-md overflow-hidden ${mobile ? "mb-3" : "mb-5"}`),
           {
             borderWidth: 1,
             borderColor: Colors.theme1[colorScheme].greenD9,
@@ -64,9 +64,11 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
             style={[
               {
                 fontFamily: "bold",
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
                 color:
-                  activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
+                  activeUnit === unit
+                    ? "white"
+                    : Colors.theme1[colorScheme].green79,
               },
             ]}
           >
@@ -76,10 +78,16 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
             style={[
               {
                 fontFamily: "bold",
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
-                color: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
+                color:
+                  activeUnit === unit
+                    ? "white"
+                    : Colors.theme1[colorScheme].green79,
                 borderRightWidth: 1,
-                borderColor: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
+                borderColor:
+                  activeUnit === unit
+                    ? "white"
+                    : Colors.theme1[colorScheme].green79,
                 paddingRight: 8,
               },
             ]}
@@ -89,18 +97,19 @@ const Season = ({ season, activeUnit, name, setVideoActive }) => {
         </View>
         <View style={[tw("w-full flex flex-row-reverse")]}>
           <Pressable
-            style={[
+            style={[tw("flex flex-1 flex-row items-center py-2 px-2")]}
-              tw("flex flex-1 flex-row items-center py-2 px-2"),
-            ]}
             onPress={() => selectVideo()}
           >
             <Text
               style={{
                 width: "100%",
                 textAlign: "center",
-                fontFamily: "bold",
+                fontFamily: "demi",
-                fontSize: fontSize.base,
+                fontSize: mobile ? fontSize.base : fontSize.xl,
-                color: activeUnit === unit ? "white" : Colors.theme1[colorScheme].green79,
+                color:
+                  activeUnit === unit
+                    ? "white"
+                    : Colors.theme1[colorScheme].green79,
               }}
             >
               نمایش
@@ -124,6 +133,7 @@ const mapStateToProps = (state) => ({
   realSeasons: state.publicApi.bookInfo?.categories,
   vods: state.publicApi.bookSection?.vods,
   userid: state.user.status?.id,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {

src/screens/VideoDisplay/index.js

@@ -26,12 +26,12 @@ import tw from "tailwind-rn";
 import fontSize from "../../constants/fontSize";
 import Colors from "../../constants/Colors";
 
-const { width } = Dimensions.get("window");
 const ios = Platform.OS === "ios";
 
-function VideoDisplay({ route }) {
+function VideoDisplay({ route, mobile }) {
   const colorScheme = Appearance.getColorScheme();
   const video = React.useRef(null);
+  const [width, setWidth] = useState(Dimensions.get("window").width);
   const [status, setStatus] = React.useState({});
   const [position, setPosition] = useState("100%");
 
@@ -75,7 +75,10 @@ function VideoDisplay({ route }) {
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
         style={styles.container}
+        onLayout={() => setWidth(Dimensions.get("window").width)}
       >
+        {!mobile && <View style={tw("mt-5")}></View>}
+
         <View style={tw("flex flex-col")}>
           <Video
             ref={video}
@@ -93,7 +96,8 @@ function VideoDisplay({ route }) {
             style={{
               fontSize: fontSize.xl,
               fontFamily: "bold",
-              marginTop: 8,
+              marginTop: mobile ? 8 : 12,
+              color: Colors.theme1[colorScheme].gray20,
               textAlign: ios ? "right" : "auto",
             }}
           >
@@ -125,7 +129,6 @@ const styles = StyleSheet.create({
     paddingBottom: 100,
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 5,
@@ -135,6 +138,7 @@ const styles = StyleSheet.create({
 
 const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
+  mobile: state.publicApi.mobile,
 });
 
 export default connect(mapStateToProps)(VideoDisplay);

src/screens/Videos/components/MostViewedVideo.js

@@ -9,6 +9,7 @@ import {
   Appearance,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import { connect } from "react-redux";
 import separate from "../../../utils/separate";
 //style
 import tw from "tailwind-rn";
@@ -19,7 +20,7 @@ const { width } = Dimensions.get("window");
 
 import Header from "../../Home/components/Header";
 
-function MostViewedVideo({ videos, grades }) {
+function MostViewedVideo({ videos, grades, mobile }) {
   const navigation = useNavigation();
   const colorScheme = Appearance.getColorScheme();
   const Video = ({ video }) => {
@@ -27,8 +28,7 @@ function MostViewedVideo({ videos, grades }) {
       <Pressable
         style={[
           {
-            width: width / 1.5,
+            width: mobile ? width / 1.5 : width / 2.2,
-            minWidth: (150 * 16) / 9,
           },
           tw("flex flex-col items-end rounded-md ml-6"),
         ]}
@@ -39,7 +39,7 @@ function MostViewedVideo({ videos, grades }) {
             tw(
               "w-full flex flex-row flex-1 justify-between items-center relative overflow-hidden"
             ),
-            { height: ((width / 1.5) * 9) / 16, minHeight: 150 },
+            { height: ((mobile ? width / 1.5 : width / 2.2) * 9) / 16 },
           ]}
         >
           <Image
@@ -49,21 +49,30 @@ function MostViewedVideo({ videos, grades }) {
           <Image
             source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
             style={[
-              tw("rounded-md h-full absolute left-2 inset-y-1/4 rounded-md"),
+              tw(
-              { width: 70, height: 100, borderWidth: 2, borderColor: "white" },
+                `rounded-md h-full absolute left-2 ${
+                  mobile ? "inset-y-1/4" : "top-1/5"
+                } rounded-md`
+              ),
+              {
+                width: mobile ? 70 : 105,
+                height: mobile ? 100 : 150,
+                borderWidth: 2,
+                borderColor: "white",
+              },
             ]}
           />
         </View>
         <Text
           style={{
-            fontSize: fontSize.lg,
+            fontSize: mobile ? fontSize.lg : fontSize.xl,
             marginTop: 5,
             paddingRight: 4,
             color: Colors.theme1[colorScheme].gray20,
             fontFamily: "bold",
           }}
         >
-          {'دوره ویدئویی' + ' ' + video?.name}
+          {"دوره ویدئویی" + " " + video?.name}
         </Text>
 
         <View
@@ -77,8 +86,8 @@ function MostViewedVideo({ videos, grades }) {
                 {
                   color: Colors.theme1[colorScheme].gray20,
                   fontFamily: "bold",
-                  fontSize: fontSize.sm,
+                  fontSize: mobile ? fontSize.sm : fontSize.tiny,
-                  marginRight : 3
+                  marginRight: 3,
                 },
               ]}
             >
@@ -89,7 +98,7 @@ function MostViewedVideo({ videos, grades }) {
                 {
                   color: Colors.theme1[colorScheme].gray20,
                   fontFamily: "bold",
-                  fontSize: fontSize.xl,
+                  fontSize: mobile ? fontSize.xl : fontSize.xl3,
                 },
               ]}
             >
@@ -101,7 +110,7 @@ function MostViewedVideo({ videos, grades }) {
             style={{
               color: Colors.theme1[colorScheme].gray20,
               fontFamily: "light",
-              fontSize: fontSize.tiny,
+              fontSize: mobile ? fontSize.tiny : fontSize.lg,
               marginTop: 5,
             }}
           >
@@ -127,4 +136,8 @@ function MostViewedVideo({ videos, grades }) {
   );
 }
 
-export default MostViewedVideo;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(MostViewedVideo);

src/screens/Videos/components/NewestVideo.js

@@ -6,8 +6,10 @@ import {
   Dimensions,
   Text,
   Appearance,
+  Platform,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import { connect } from "react-redux";
 import separate from "../../../utils/separate";
 
 //style
@@ -16,10 +18,11 @@ import fontSize from "../../../constants/fontSize";
 import Colors from "../../../constants/Colors";
 
 const { width } = Dimensions.get("window");
+const ios = Platform.OS === "ios";
 
 import Header from "../../Home/components/Header";
 
-const NewestVideo = ({ videos, grades }) => {
+const NewestVideo = ({ videos, grades, mobile }) => {
   const colorScheme = Appearance.getColorScheme();
   const navigation = useNavigation();
   const Video = ({ video }) => {
@@ -27,7 +30,7 @@ const NewestVideo = ({ videos, grades }) => {
       <Pressable
         style={[
           {
-            width: width / 2.3,
+            width: mobile ? width / 2.3 : width / 3.3,
           },
           tw("flex flex-col items-end mb-4"),
         ]}
@@ -37,12 +40,15 @@ const NewestVideo = ({ videos, grades }) => {
           source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
           style={[
             tw("rounded-md"),
-            { width: "100%", height: ((width / 2.5) * 3) / 4 },
+            {
+              width: "100%",
+              height: ((mobile ? width / 2.3 : width / 3.3) * 3) / 4,
+            },
           ]}
         />
         <Text
           style={{
-            fontSize: fontSize.base,
+            fontSize: mobile ? fontSize.base : fontSize.xl,
             marginTop: 5,
             color: Colors.theme1[colorScheme].gray20,
             fontFamily: "bold",
@@ -54,7 +60,7 @@ const NewestVideo = ({ videos, grades }) => {
           style={{
             color: Colors.theme1[colorScheme].gray20,
             fontFamily: "light",
-            fontSize: fontSize.tiny,
+            fontSize: mobile ? fontSize.tiny : fontSize.lg,
             marginTop: 5,
           }}
         >
@@ -66,7 +72,13 @@ const NewestVideo = ({ videos, grades }) => {
   return (
     <View style={tw("w-full flex flex-col w-full")}>
       <Header title="جدیدترین‌ دوره‌ها" route="" />
-      <View style={tw("w-full flex flex-row flex-wrap justify-between mt-3")}>
+      <View
+        style={tw(
+          `w-full flex flex-wrap justify-between mt-3 ${
+            ios ? "flex-row-reverse" : "flex-row"
+          }`
+        )}
+      >
         {videos.map((video, index) => (
           <Video video={video} key={index} />
         ))}
@@ -75,4 +87,8 @@ const NewestVideo = ({ videos, grades }) => {
   );
 };
 
-export default NewestVideo;
+const mapStateToProps = (state) => ({
+  mobile: state.publicApi.mobile,
+});
+
+export default connect(mapStateToProps)(NewestVideo);

src/screens/Videos/index.js

@@ -10,7 +10,7 @@ import {
   LayoutAnimation,
 } from "react-native";
 import { connect } from "react-redux";
-import {book} from '../../redux/actions';
+import { book } from "../../redux/actions";
 import Navbar from "../../components/Navbar";
 import Drawer from "../../components/Drawer";
 import Search from "../../components/Search";
@@ -20,9 +20,11 @@ import MostViewedVideo from "./components/MostViewedVideo";
 import NewestVideo from "./components/NewestVideo";
 //assets
 
+import tw from 'tailwind-rn';
+
 const width = Dimensions.get("window").width;
 
-function Videos({ grades, videos, getVideos }) {
+function Videos({ grades, videos, getVideos, mobile }) {
   const [search, setSearch] = useState("");
   const [position, setPosition] = useState("100%");
 
@@ -57,8 +59,9 @@ function Videos({ grades, videos, getVideos }) {
       <Drawer setBoxPosition={setBoxPosition} position={position} />
       <ScrollView
         contentContainerStyle={styles.contentContainerStyle}
-        style={[styles.container, { width: width }]}
+        style={[styles.container]}
       >
+        {!mobile && <View style={tw("mt-5")}></View>}
         <Search
           value={search}
           onChange={setSearch}
@@ -69,7 +72,12 @@ function Videos({ grades, videos, getVideos }) {
           <>
             <MostViewedVideo videos={videos} grades={grades} />
             <Divider type={"vertical"} />
-            <NewestVideo videos={videos.sort((a,b) => a.updatedAt - b.updatedAt).slice(0,4)} grades={grades} />
+            <NewestVideo
+              videos={videos
+                .sort((a, b) => a.updatedAt - b.updatedAt)
+                .slice(0, mobile ? 4 : 6)}
+              grades={grades}
+            />
           </>
         )}
       </ScrollView>
@@ -84,7 +92,6 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
   },
   container: {
-    width: Dimensions.get("window").width,
     backgroundColor: "white",
     flexDirection: "column",
     paddingVertical: 0,
@@ -96,9 +103,10 @@ const mapStateToProps = (state) => ({
   grades: state.publicApi.grades,
   videos: state.book.list,
   grades: state.publicApi.grades,
+  mobile: state.publicApi.mobile,
 });
 
 const mapDispatchToProps = {
-  getVideos : book.list
+  getVideos: book.list,
-}
+};
 export default connect(mapStateToProps, mapDispatchToProps)(Videos);

yarn.lock

@@ -1659,11 +1659,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/parse-json@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
-  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
-
 "@types/prop-types@*":
   version "15.7.4"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
@@ -1730,25 +1725,6 @@ accepts@^1.3.7, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-node@^1.6.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
-  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
-  dependencies:
-    acorn "^7.0.0"
-    acorn-walk "^7.0.0"
-    xtend "^4.0.2"
-
-acorn-walk@^7.0.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
-  integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
-
-acorn@^7.0.0:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
-  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
-
 anser@^1.4.9:
   version "1.4.10"
   resolved "https://registry.yarnpkg.com/anser/-/anser-1.4.10.tgz#befa3eddf282684bd03b63dcda3927aef8c2e35b"
@@ -1800,7 +1776,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@^3.0.3, anymatch@~3.1.2:
+anymatch@^3.0.3:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1813,11 +1789,6 @@ appdirsjs@^1.2.4:
   resolved "https://registry.yarnpkg.com/appdirsjs/-/appdirsjs-1.2.6.tgz#fccf9ee543315492867cacfcfd4a2b32257d30ac"
   integrity sha512-D8wJNkqMCeQs3kLasatELsddox/Xqkhp+J07iXGyL54fVN7oc+nmNfYzGuCs1IEP6uBw+TfpuO3JKwc+lECy4w==
 
-arg@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
-  integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
-
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -2058,11 +2029,6 @@ big-integer@1.6.x:
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
 
-binary-extensions@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
-  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
-
 blueimp-md5@^2.10.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz#b53feea5498dcb53dc6ec4b823adb84b729c4af0"
@@ -2111,7 +2077,7 @@ braces@^2.3.1:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1, braces@~3.0.2:
+braces@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2164,11 +2130,6 @@ bytes@3.0.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-bytes@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.1.tgz#3f018291cb4cbad9accb6e6970bca9c8889e879a"
-  integrity sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==
-
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -2211,16 +2172,6 @@ callsites@^2.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
   integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
-camelcase-css@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
-  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
-
 camelcase-keys@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
@@ -2282,21 +2233,6 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
-  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
-  dependencies:
-    anymatch "~3.1.2"
-    braces "~3.0.2"
-    glob-parent "~5.1.2"
-    is-binary-path "~2.1.0"
-    is-glob "~4.0.1"
-    normalize-path "~3.0.0"
-    readdirp "~3.6.0"
-  optionalDependencies:
-    fsevents "~2.3.2"
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -2379,7 +2315,7 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.5.3, color-string@^1.6.0, color-string@^1.9.0:
+color-string@^1.5.3, color-string@^1.6.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.0.tgz#63b6ebd1bec11999d1df3a79a7569451ac2be8aa"
   integrity sha512-9Mrz2AQLefkH1UvASKj6v6hj/7eWgjnT/cVsR8CumieLoT+g900exWeNogqtweI8dxloXN9BDQTYro1oWu/5CQ==
@@ -2395,14 +2331,6 @@ color@^3.1.3:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-color@^4.0.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.1.0.tgz#9502e6a2dcacb26adf4c60910a27628d010b3de3"
-  integrity sha512-o2rkkxyLGgYoeUy1OodXpbPAQNmlNBrirQ8ODO8QutzDiDMNdezSOZLNnusQ6pUpCQJUsaJIo9DZJKqa2HgH7A==
-  dependencies:
-    color-convert "^2.0.1"
-    color-string "^1.9.0"
-
 colorette@^1.0.7:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
@@ -2438,11 +2366,6 @@ commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
-commander@^8.0.0:
-  version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
-  integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
-
 commander@~2.13.0:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
@@ -2538,17 +2461,6 @@ cosmiconfig@^5.0.5, cosmiconfig@^5.1.0:
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
-cosmiconfig@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
-  integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
-  dependencies:
-    "@types/parse-json" "^4.0.0"
-    import-fresh "^3.2.1"
-    parse-json "^5.0.0"
-    path-type "^4.0.0"
-    yaml "^1.10.0"
-
 create-react-class@^15.7.0:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
@@ -2585,11 +2497,6 @@ css-color-keywords@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
   integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
 
-css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
 css-in-js-utils@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99"
@@ -2625,11 +2532,6 @@ css-tree@^1.0.0-alpha.39:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -2645,20 +2547,6 @@ css@^2.2.4:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
-css@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/css/-/css-3.0.0.tgz#4447a4d58fdd03367c516ca9f64ae365cee4aa5d"
-  integrity sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==
-  dependencies:
-    inherits "^2.0.4"
-    source-map "^0.6.1"
-    source-map-resolve "^0.6.0"
-
-cssesc@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
-  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
 csstype@^3.0.2:
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
@@ -2754,11 +2642,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-defined@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
-  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
 denodeify@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/denodeify/-/denodeify-1.2.1.tgz#3a36287f5034e699e7577901052c2e6c94251631"
@@ -2779,25 +2662,6 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
-detective@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.0.tgz#feb2a77e85b904ecdea459ad897cc90a99bd2a7b"
-  integrity sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==
-  dependencies:
-    acorn-node "^1.6.1"
-    defined "^1.0.0"
-    minimist "^1.1.1"
-
-didyoumean@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
-  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
-
-dlv@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
-  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -3168,7 +3032,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-fast-glob@^3.2.5, fast-glob@^3.2.7:
+fast-glob@^3.2.5:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
   integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
@@ -3369,15 +3233,6 @@ fs-extra@^1.0.0:
     jsonfile "^2.1.0"
     klaw "^1.0.0"
 
-fs-extra@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
-  integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -3402,7 +3257,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^2.1.2, fsevents@~2.3.2:
+fsevents@^2.1.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3448,20 +3303,13 @@ getenv@^1.0.0:
   resolved "https://registry.yarnpkg.com/getenv/-/getenv-1.0.0.tgz#874f2e7544fbca53c7a4738f37de8605c3fcfc31"
   integrity sha512-7yetJWqbS9sbn0vIfliPsFgoXMKn/YMF+Wuiog97x+urnSRRRZ7xB+uVkwGKzRgq9CDFfMQnE9ruL5DHv9c6Xg==
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
-  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
-  dependencies:
-    is-glob "^4.0.3"
-
 glob@7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -3474,7 +3322,7 @@ glob@7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.1.3, glob@^7.1.6, glob@^7.1.7:
+glob@^7.0.0, glob@^7.1.3, glob@^7.1.6:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
@@ -3566,11 +3414,6 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
 hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -3583,16 +3426,6 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
 html-escaper@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -3605,11 +3438,6 @@ html-parse-stringify@^3.0.1:
   dependencies:
     void-elements "3.1.0"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 http-errors@1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
@@ -3645,13 +3473,6 @@ image-size@^0.6.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.3.tgz#e7e5c65bb534bd7cdcedd6cb5166272a85f75fb2"
   integrity sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==
 
-import-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-3.0.0.tgz#20845547718015126ea9b3676b7592fb8bd4cf92"
-  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
-  dependencies:
-    import-from "^3.0.0"
-
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
@@ -3660,21 +3481,6 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
-  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
-import-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-3.0.0.tgz#055cfec38cd5a27d8057ca51376d7d3bf0891966"
-  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
-  dependencies:
-    resolve-from "^5.0.0"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -3693,7 +3499,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3751,13 +3557,6 @@ is-arrayish@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
-is-binary-path@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
-  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
-  dependencies:
-    binary-extensions "^2.0.0"
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3770,18 +3569,6 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
-is-color-stop@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
-
 is-core-module@^2.2.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
@@ -3853,7 +3640,7 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
-is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+is-glob@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
@@ -4178,11 +3965,6 @@ leven@^3.1.0:
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
   integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
 
-lilconfig@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.4.tgz#f4507d043d7058b380b6a8f5cb7bcd4b34cee082"
-  integrity sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -4265,11 +4047,6 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash.topath@^4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
-  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
-
 lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -4769,11 +4546,6 @@ mkdirp@^0.5.1:
   dependencies:
     minimist "^1.2.5"
 
-modern-normalize@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
-  integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4847,13 +4619,6 @@ node-dir@^0.1.17:
   dependencies:
     minimatch "^3.0.2"
 
-node-emoji@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.11.0.tgz#69a0150e6946e2f115e9d7ea4df7971e2628301c"
-  integrity sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==
-  dependencies:
-    lodash "^4.17.21"
-
 node-fetch@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -4911,7 +4676,7 @@ normalize-path@^2.1.1:
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0, normalize-path@~3.0.0:
+normalize-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -4954,11 +4719,6 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
-
 object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
@@ -5088,13 +4848,6 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -5160,17 +4913,12 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-path-type@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
-  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
-
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
+picomatch@^2.0.4, picomatch@^2.2.3:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
@@ -5222,49 +4970,12 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
-postcss-js@^3.0.3:
+postcss-value-parser@^4.0.2:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33"
-  integrity sha512-gWnoWQXKFw65Hk/mi2+WTQTHdPD5UJdDXZmX073EY/B3BWnYjO4F4t0VneTCnCGQ5E5GsCdMkzPaTXwl3r5dJw==
-  dependencies:
-    camelcase-css "^2.0.1"
-    postcss "^8.1.6"
-
-postcss-load-config@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829"
-  integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==
-  dependencies:
-    import-cwd "^3.0.0"
-    lilconfig "^2.0.3"
-    yaml "^1.10.2"
-
-postcss-nested@5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
-  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
-  dependencies:
-    postcss-selector-parser "^6.0.6"
-
-postcss-selector-parser@^6.0.6:
-  version "6.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz#f023ed7a9ea736cd7ef70342996e8e78645a7914"
-  integrity sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.1.14, postcss@^8.1.6, postcss@^8.2.1, postcss@^8.3.5:
+postcss@^8.1.14:
   version "8.4.5"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.5.tgz#bae665764dfd4c6fcc24dc0fdf7e7aa00cc77f95"
   integrity sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==
@@ -5283,11 +4994,6 @@ pretty-format@^26.5.2, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
-pretty-hrtime@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
-  integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -5332,16 +5038,6 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-purgecss@^4.0.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.1.3.tgz#683f6a133c8c4de7aa82fe2746d1393b214918f7"
-  integrity sha512-99cKy4s+VZoXnPxaoM23e5ABcP851nC2y2GROkkjS8eJaJtlciGavd7iYAw2V84WeBqggZ12l8ef44G99HmTaw==
-  dependencies:
-    commander "^8.0.0"
-    glob "^7.1.7"
-    postcss "^8.3.5"
-    postcss-selector-parser "^6.0.6"
-
 query-string@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-7.0.1.tgz#45bd149cf586aaa582dffc7ec7a8ad97dd02f75d"
@@ -5367,11 +5063,6 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
-quick-lru@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
-  integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
-
 range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
@@ -5613,13 +5304,6 @@ readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readdirp@~3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
-  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
-  dependencies:
-    picomatch "^2.2.1"
-
 recast@^0.20.3:
   version "0.20.5"
   resolved "https://registry.yarnpkg.com/recast/-/recast-0.20.5.tgz#8e2c6c96827a1b339c634dd232957d230553ceae"
@@ -5645,14 +5329,6 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-reduce-css-calc@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
-  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
-  dependencies:
-    css-unit-converter "^1.1.1"
-    postcss-value-parser "^3.3.0"
-
 redux-logger@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-3.0.6.tgz#f7555966f3098f3c88604c449cf0baf5778274bf"
@@ -5778,11 +5454,6 @@ resolve-from@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
   integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
 resolve-from@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
@@ -5793,7 +5464,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.20.0:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.14.2:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -5819,16 +5490,6 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
 rimraf@^2.5.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -5836,13 +5497,6 @@ rimraf@^2.5.4:
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
-  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@~2.2.6:
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
@@ -6132,14 +5786,6 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-resolve@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.6.0.tgz#3d9df87e236b53f16d01e58150fc7711138e5ed2"
-  integrity sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==
-  dependencies:
-    atob "^2.1.2"
-    decode-uri-component "^0.2.0"
-
 source-map-support@^0.5.16:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
@@ -6319,17 +5965,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-tailwind-react-native-classnames@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/tailwind-react-native-classnames/-/tailwind-react-native-classnames-1.5.1.tgz#610de344de0ff20e0b42de58485cffd3b9f3a43c"
-  integrity sha512-0Mr1SU3CpH1u2EAE3o/EcIIsf7c8GXHI0CLh5lesv0SK74RgOOQEheMRtCIi+H+WhCT0PWHeXK+w1C1n/+GzcQ==
-  dependencies:
-    css "^3.0.0"
-    css-to-react-native "^3.0.0"
-    postcss "^8.2.1"
-    tailwindcss "^2.0.0"
-    x-chalk "^1.0.1"
-
 tailwind-rn@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/tailwind-rn/-/tailwind-rn-3.0.1.tgz#73392c16b29ad09c0eadadf097f5eb6d8192ee64"
@@ -6341,44 +5976,6 @@ tailwind-rn@^3.0.1:
     meow "^7.0.1"
     postcss "^8.1.14"
 
-tailwindcss@^2.0.0:
-  version "2.2.19"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.19.tgz#540e464832cd462bb9649c1484b0a38315c2653c"
-  integrity sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==
-  dependencies:
-    arg "^5.0.1"
-    bytes "^3.0.0"
-    chalk "^4.1.2"
-    chokidar "^3.5.2"
-    color "^4.0.1"
-    cosmiconfig "^7.0.1"
-    detective "^5.2.0"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.7"
-    fs-extra "^10.0.0"
-    glob-parent "^6.0.1"
-    html-tags "^3.1.0"
-    is-color-stop "^1.1.0"
-    is-glob "^4.0.1"
-    lodash "^4.17.21"
-    lodash.topath "^4.5.2"
-    modern-normalize "^1.1.0"
-    node-emoji "^1.11.0"
-    normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss-js "^3.0.3"
-    postcss-load-config "^3.1.0"
-    postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.6"
-    postcss-value-parser "^4.1.0"
-    pretty-hrtime "^1.0.3"
-    purgecss "^4.0.3"
-    quick-lru "^5.1.1"
-    reduce-css-calc "^2.1.8"
-    resolve "^1.20.0"
-    tmp "^0.2.1"
-
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -6435,13 +6032,6 @@ through2@^2.0.1:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
-
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -6650,7 +6240,7 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -6785,13 +6375,6 @@ ws@^7:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
   integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==
 
-x-chalk@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/x-chalk/-/x-chalk-1.0.1.tgz#c9671191660711c08984b019324d745de5c47f9d"
-  integrity sha512-hzldDedmkfF+Mn3UhmCIChfWSBm8l6A1k6WA20IJo7fJdhZIHbwV3QMBu/QtIFTfzuh+3Qk04T0UO93rzaioMA==
-  dependencies:
-    chalk "^4.1.0"
-
 xcode@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/xcode/-/xcode-2.1.0.tgz#bab64a7e954bb50ca8d19da7e09531c65a43ecfe"
@@ -6845,7 +6428,7 @@ xmldoc@^1.1.2:
   dependencies:
     sax "^1.2.1"
 
-xtend@^4.0.2, xtend@~4.0.1:
+xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -6860,11 +6443,6 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0, yaml@^1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
 yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"