update NoteItem

src/components/ClientItem.js

@@ -18,12 +18,12 @@ const ClientItem = ({ client, onSelect }) => {
       <BorderBox onPress={() => onSelect(client.id)} style={{marginVertical: 10}}>
       <View style={styles.iconContainer}>
         <View style={styles.iconWraped}>
-          <Text style={styles.icon}>{vNombre.charAt(0)}</Text>
+          {/* <Text style={styles.icon}>{vNombre.charAt(0)}</Text> */}
+          <StyledText initial>{vNombre.charAt(0)}</StyledText>
         </View>
         <View style={styles.detailsContainer}>
-          {/* <StyledText boldText>{vNombre}</StyledText> */}
-          <Text style={styles.name}>{vNombre}</Text>
-          <Text style={styles.code}>{vCuenta}</Text>
+          <StyledText boldTextUpper>{vNombre}</StyledText>
+          <StyledText regularText>{vCuenta}</StyledText>
           {/* <View style={styles.codeContainer}>
             <MaterialCommunityIcons name="account" size={19} color="black" />
             <StyledText regularText style={{marginLeft:5,}}>{vCuenta}</StyledText>
@@ -66,11 +66,6 @@ const styles = StyleSheet.create({
     width: 70,
     height: 70,
   },
-  icon: {
-    color: theme.colors.primary,
-    fontSize: 30,
-    fontWeight: 'medium',
-  },
   detailsContainer: {
     marginLeft: 17,
     flex: 1,
@@ -79,19 +74,10 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
-  balance: {
-    fontSize: 16,
-    marginLeft: 8,
-    color: theme.colors.secondaryText,
-  },
   notesContainer: {
     flexDirection: 'column',
     // alignItems: 'flex-start',
   },
-  notes: {
-    fontSize: 16,
-    color: theme.colors.secondaryText,
-  },
   lineContainer: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -102,18 +88,6 @@ const styles = StyleSheet.create({
     width: windowWidth*0.8,
     height: 2,
   },
-  name: {
-    fontWeight: 'bold',
-    fontSize: 16,
-    textTransform: 'uppercase',
-    // textAlign: 'center',
-  },
-  code: {
-    fontSize: 16,
-    // textAlign: 'center',
-    color: theme.colors.secondaryText,
-    // marginLeft:20,
-  },
   textLine: {
     flexDirection: "row",
     justifyContent: "space-between",

src/components/NoteItem.js

@@ -39,7 +39,7 @@ const NoteItem = ({ note, onSelect }) => {
           <Text style={noteItemstyles.textDate}>{note.Fecha_venta}</Text>
         </View>
         <View>
-          <Text style={noteItemstyles.amount}>{note.Saldo_pendiente}</Text>
+          <StyledText regularText style={noteItemstyles.amount}>{note.Saldo_pendiente}</StyledText>
         </View>
         <View>
           <TouchableOpacity onPress={() => {}} style={noteItemstyles.button}>

src/components/SearchBar.js

@@ -5,8 +5,10 @@ import { Ionicons } from "@expo/vector-icons";
 import { FontAwesome5 } from "@expo/vector-icons";
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from "react-native-popup-menu";
 import { theme } from "../../constants";
+import StyledText from "../utils/StyledText";
 const windowWidth = Dimensions.get("window").width;
-
+const { height } = Dimensions.get('window');
+const regularTextSize = height * 0.021
 const SearchBar = ({ searchQuery, setSearchQuery, selectedOption, onOptionChange,}) => {
   const [menuVisible, setMenuVisible] = useState(false);
 
@@ -21,23 +23,23 @@ const SearchBar = ({ searchQuery, setSearchQuery, selectedOption, onOptionChange
       <Menu opened={menuVisible} onBackdropPress={() => setMenuVisible(false)}>
         <MenuTrigger onPress={toggleMenu} style={searchBarStyles.trigger}>
           <TouchableOpacity onPress={toggleMenu} activeOpacity={1} style={{ flexDirection: "row", alignItems: "center", justifyContent: "space-between", }}>
-            <Text style={searchBarStyles.triggerText}>
+            <StyledText buttonText style={{marginRight: 12}}>
               {selectedOption.charAt(0).toUpperCase() + selectedOption.slice(1)}
-            </Text>
+            </StyledText>
             <FontAwesome5 name={menuVisible ? "chevron-up" : "chevron-down"} size={20} color="white" />
           </TouchableOpacity>
         </MenuTrigger>
         <MenuOptions customStyles={{ optionsContainer: searchBarStyles.optionsContainer, optionsWrapper: searchBarStyles.optionsWrapper, }}>
           <MenuOption onSelect={() => { onOptionChange("cliente"); setMenuVisible(false); }} >
             <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <Text style={searchBarStyles.optionsText}>Cliente</Text>
+              <StyledText buttonText>Cliente</StyledText>
               {selectedOption === "cliente" && (
                 <FontAwesome5 name="check" size={17} color="white" marginLeft={10} />)}
             </View>
           </MenuOption>
           <MenuOption onSelect={() => { onOptionChange("cuenta"); setMenuVisible(false); }}>
             <View style={{ flexDirection: "row", alignItems: "center" }}>
-              <Text style={searchBarStyles.optionsText}>Cuenta</Text>
+              <StyledText buttonText>Cuenta</StyledText>
               {selectedOption === "cuenta" && (
                 <FontAwesome5 name="check" size={17} color="white" marginLeft={10} />
               )}
@@ -60,10 +62,10 @@ const searchBarStyles = StyleSheet.create({
     marginHorizontal: windowWidth * 0.05,
   },
   searchTextInput: {
-    flex: 1,
-    marginLeft: 7,
-    marginRight: 10,
-    fontSize: 17,
+    flex: 1,//
+    marginLeft: 7,//
+    marginRight: 10,//
+    fontSize: regularTextSize,
     color: theme.colors.primaryText,
   },
   trigger: {
@@ -72,12 +74,6 @@ const searchBarStyles = StyleSheet.create({
     backgroundColor: theme.colors.tertiary,
     borderRadius: 22,
   },
-  triggerText: {
-    color: theme.colors.primary,
-    fontSize: 16,
-    fontWeight: "bold",
-    marginRight: 12,
-  },
   optionsContainer: {
     paddingVertical: 15,
     marginTop: 55,
@@ -89,10 +85,5 @@ const searchBarStyles = StyleSheet.create({
   optionsWrapper: {
     marginLeft: 20,
   },
-  optionsText: {
-    color: theme.colors.primary,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
 });
 export default SearchBar;

src/utils/StyledText.js

@@ -1,43 +1,72 @@
 import React from 'react';
-import { Text, StyleSheet } from 'react-native';
+import { Text, StyleSheet, Dimensions } from 'react-native';
 import { theme } from "../../constants";
+const { height } = Dimensions.get('window');
+
+const regularTextSize = height * 0.025
+const bigTextSize = height * 0.025
 
 const styles = StyleSheet.create({
   base: {
   },
   boldText: {
+    fontWeight: 'bold',
     fontSize: 16,
+    color: theme.colors.tertiary,  
+    // color: 'red',
+  },
+  boldTextUpper: {
     fontWeight: 'bold',
-    color: theme.colors.tertiary,    
+    fontSize: bigTextSize,
+    textTransform: 'uppercase',
+    color: theme.colors.tertiary,  
+    // color: 'blue',  
+  },
+  regularText: {
+    fontSize: regularTextSize,
+    color: theme.colors.secondaryText,
+    // color: 'red',
+  },
+  regularIntenceText: { // no devuelto
+    fontSize: regularTextSize,
+    color: theme.colors.primaryText,
+    // color: 'red',
   },
+
   boldCenterText: {
+    // extras
     fontSize: 16,
     fontWeight: 'bold',
     color: theme.colors.tertiary,  
     textTransform: 'uppercase',
     textAlign: 'center',  
   },
-  regularText: {
-    fontSize: 16,
-    color: theme.colors.secondaryText,
-  },
+  // estras
   buttonText:{
     color: theme.colors.primary,
-    fontSize: 16,
+    fontSize: regularTextSize,
     fontWeight: "bold",
+  },
+  initial:{
+    color: theme.colors.primary,
+    fontSize: 33,
+    // fontWeight: 'medium',
+    fontWeight: 'bold',
   }
 });
 
-const StyledText = ({ children, style, regularText, boldText, buttonText, ...rest }) => {
+const StyledText = ({ children, style, regularText, boldText, buttonText, boldTextUpper, initial, ...rest }) => {
     const customStyles = [
       regularText && styles.regularText,
       boldText && styles.boldText,
       buttonText && styles.buttonText,
+      boldTextUpper && styles.boldTextUpper,
+      initial && styles.initial,
       style,
     ].filter(Boolean);
 
     return (
-      <Text style={customStyles} {...rest}>
+      <Text allowFontScaling={false} style={customStyles} {...rest}>
         {children}
       </Text>
     );