verstka

src/components/BasicButton/BasicButton.tsx

@@ -7,16 +7,19 @@ import DText from "../DText/DText";
 type Props = {
     label: string;
     style?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
     isUnset?: boolean;
     onPress?: (event: GestureResponderEvent) => void
 };
 
-const BasicButton: FC<Props> = ({label, onPress, style, isUnset = false}) => {
+const BasicButton: FC<Props> = ({label, onPress, containerStyle, style, isUnset = false}) => {
     return (
         <TouchableOpacity onPress={onPress}>
-            <View style={[styles.container, style]}>
-                <DText style={styles.text}>{label}</DText>
-            </View>
+
+                <View style={[styles.container, style]}>
+                    <DText style={styles.text}>{label}</DText>
+                </View>
+
         </TouchableOpacity>
     );
 };

src/components/DTitle/DTitle.tsx

@@ -2,7 +2,7 @@ import React, {FC, ReactElement} from "react";
 import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
 import {RFPercentage} from "react-native-responsive-fontsize";
 import DText from "../DText/DText";
-import {responsiveWidth} from "react-native-responsive-dimensions";
+import {responsiveScreenFontSize, responsiveWidth} from "react-native-responsive-dimensions";
 
 type Props = {
     children: string;
@@ -13,8 +13,8 @@ const DTitle: FC<Props> = ({children, style}) => {
 }
 const styles = StyleSheet.create({
     text: {
-        fontSize: responsiveWidth(4.5),
-        fontWeight: "600",
+        fontSize: responsiveScreenFontSize(2),
+        fontWeight: "500",
         fontStyle: "normal"
     }
 })

src/components/OrderCard/OrderCard.tsx

@@ -31,17 +31,19 @@ const OrderCard: FC<Props> = ({onPress}) => {
                     <Image style={styles.image} source={{uri: order.imageUrl}}/>
                 </View>
                 <View style={styles.description}>
-                    <View style={styles.title}>
+                    <View style={styles.descriptionContent}>
+                        <View style={styles.title}>
 
-                        <DTitle>{order.orderNumber}</DTitle>
-                        <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
+                            <DTitle>{order.orderNumber}</DTitle>
+                            <Image source={require('assets/icons/marketplaces/ozon.png')} style={styles.titleImage}/>
+                        </View>
+                        <DText>Количество: 5</DText>
+                        <DText>Поставщик: {order.supplierName}</DText>
+                        <DText>Селлер: {order.sellerName}</DText>
+                        <DText>Цвет: ГОЛУБОЙ</DText>
                     </View>
 
-                    <DText>Количество: 5</DText>
-                    <DText>Поставщик: {order.supplierName}</DText>
-                    <DText>Селлер: {order.sellerName}</DText>
-                    <DText>Цвет: ГОЛУБОЙ</DText>
-                    <View style={styles.statusContainer}>
+                    <View style={styles.descriptionStatus}>
                         <DText>
                             Ожидает сборки
                         </DText>
@@ -57,12 +59,10 @@ const styles = StyleSheet.create({
     container: {
         backgroundColor: "white",
         display: "flex",
-        borderRadius: RFPercentage(5),
+        borderRadius: RFPercentage(3),
         height: responsiveHeight(20),
         flexDirection: "row",
         padding: RFPercentage(2),
-
-
     },
     imageWrapper: {
         width: responsiveWidth(30),
@@ -73,15 +73,16 @@ const styles = StyleSheet.create({
 
     },
     description: {
-        backgroundColor:"red",
+        // backgroundColor: "red",
         flex: 1,
         display: "flex",
         flexDirection: "column",
         paddingLeft: responsiveWidth(3),
         gap: 0,
+
     },
     title: {
-        marginBottom: responsiveHeight(1),
+        marginBottom: responsiveHeight(0.5),
         flexDirection: "row",
         alignItems: "center"
     },
@@ -91,8 +92,14 @@ const styles = StyleSheet.create({
         resizeMode: "center",
         marginLeft: responsiveHeight(1)
     },
-    statusContainer: {
+    descriptionContent: {
+        // backgroundColor: "green",
+        flex: 1
+    },
+    descriptionStatus: {
         alignSelf: "flex-end",
+        // backgroundColor: "blue",
+        marginRight: responsiveWidth(2),
     }
 });
 export default OrderCard;

src/components/SearchBar/SearchBar.tsx

@@ -44,10 +44,10 @@ const height = 6;
 const styles = StyleSheet.create({
     container: {
         display: "flex",
-        marginHorizontal: responsiveWidth(5),
         flexDirection: "row-reverse",
         height: responsiveHeight(height),
-        alignItems: "flex-end"
+        alignItems: "flex-end",
+        backgroundColor: "white"
     },
     scanImage: {
         height: responsiveHeight(5),
@@ -58,7 +58,8 @@ const styles = StyleSheet.create({
         borderRadius: 0,
         borderTopRightRadius: responsiveWidth(1),
         borderBottomRightRadius: responsiveWidth(1),
-        width: responsiveWidth(25)
+        width: responsiveWidth(25),
+        flex: 1
     },
     scanImageWrapper: {
         paddingHorizontal: responsiveWidth(1),
@@ -77,7 +78,7 @@ const styles = StyleSheet.create({
         borderBottomLeftRadius: responsiveWidth(1),
         paddingLeft: responsiveHeight(2),
         fontSize: RFPercentage(2),
-        fontFamily: 'SF Pro Text'
+        // fontFamily: 'SF Pro Text'
     }
 })
 

src/components/Separator/Separator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, StyleSheet, FlexStyle} from 'react-native';
+import {responsiveHeight} from "react-native-responsive-dimensions";
+
+type Props = {
+    width?: any;
+}
+const Separator: React.FC<Props> = ({width = "60%"}) => {
+    return (
+        <View style={styles.container}>
+            <View style={[styles.separator, {width: width}]}/>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        alignItems: "center"
+    },
+    separator: {
+        height: responsiveHeight(0.3), // Толщина разделителя
+        backgroundColor: "#A5A5A5", // Цвет разделителя
+    },
+});
+
+export default Separator;

src/components/SortingButton/SortingButton.tsx

@@ -0,0 +1,42 @@
+import {FC} from "react";
+import {StyleSheet, View, Image, TouchableOpacity, GestureResponderEvent} from "react-native";
+import DText from "../DText/DText";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import {responsiveWidth} from "react-native-responsive-dimensions";
+
+type Props = {
+    onPress?: (event: GestureResponderEvent) => void
+
+};
+const SortingButton: FC<Props> = ({onPress}) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={styles.container}>
+                <View style={styles.imageWrapper}>
+                    <Image style={styles.image} source={require('assets/icons/sorting.png')}/>
+                </View>
+                <DText>Сортировка</DText>
+            </View>
+        </TouchableOpacity>
+
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        columnGap: responsiveWidth(1)
+    },
+    imageWrapper: {
+        width: RFPercentage(3),
+        height: RFPercentage(3)
+    },
+    image: {
+        resizeMode: 'contain',
+        width: '100%',
+        height: '100%'
+    }
+});
+export default SortingButton;