Collecting all texts dimensions to constant values in config file "dimensions"

4 years ago · e9d76cfac4
11 changed files with 84 additions and 55 deletions
--- a/src/app/components/forms/FormDatePicker.js
+++ b/src/app/components/forms/FormDatePicker.js
@ -13,6 +13,7 @@ import DateTimePicker from "@react-native-community/datetimepicker";

 import moment from "moment";
 import colors from "../../config/colors";
+import { dimensions } from "../../config/dimensions";

 const FormDatePicker = (props) => {
  const { textStyle, defaultDate } = props;
@ -65,15 +66,21 @@ const FormDatePicker = (props) => {

  return (
    <TouchableOpacity onPress={() => setShow(true)}>
-      <View style={{ flex: 1, flexDirection: "row", alignItems: 'center', justifyContent: "space-between" }}>
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
        <View style={styles.dateInput}>
-          <Text> {date.format("DD/MM/YYYY")}</Text>
+          <Text style={{ fontSize: dimensions.text.default }}>
+            {" "}
+            {date.format("DD/MM/YYYY")}
+          </Text>
        </View>
-        <FontAwesome5
-          name="calendar-day"
-          size={30}
-          color="grey"
-        />
+        <FontAwesome5 name="calendar-day" size={30} color="grey" />
      </View>
      {Platform.OS !== "ios" && show && renderDatePicker()}

@ -165,7 +172,7 @@ const styles = StyleSheet.create({
    borderRadius: 25,
    padding: 18,
    marginVertical: 10,
-  }
+  },
 });

 export default FormDatePicker;
--- a/src/app/components/forms/FormImagePicker.js
+++ b/src/app/components/forms/FormImagePicker.js
@ -5,6 +5,7 @@ import ErrorMessage from "./ErrorMessage";
 import ImageInputList from "../ImageInputList";
 import { View, Text, StyleSheet } from "react-native";
 import colors from "../../config/colors";
+import { dimensions } from "../../config/dimensions";

 function FormImagePicker({ name }) {
  const { errors, setFieldValue, touched, values } = useFormikContext();
@ -36,7 +37,7 @@ function FormImagePicker({ name }) {

 const styles = StyleSheet.create({
  labelStyle: {
-    fontSize: 16,
+    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.primary,
--- a/src/app/config/dimensions.js
+++ b/src/app/config/dimensions.js
@ -2,6 +2,15 @@ import { Dimensions } from "react-native";

 const screen_width = Dimensions.get("window").width;

+const dimensions = {
+  text: {
+    header: 24,
+    secondary: 20,
+    default: 18,
+    tertiary: 14,
+  },
+};
+
 /* imageScaleToSize (iw, ih, scale_w)
 * function for scaling images dinamically based on screen width
 *
@ -21,4 +30,4 @@ function scaleDimsFromWidth(iw, ih, scale_w) {
  return { width: sw, height: sh };
 }

-export { screen_width, scaleDimsFromWidth };
+export { screen_width, scaleDimsFromWidth, dimensions };
--- a/src/app/screens/AccountScreen.js
+++ b/src/app/screens/AccountScreen.js
@ -3,14 +3,17 @@ import { StyleSheet, View, Text } from "react-native";

 import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";

 function AccountScreen({ navigation }) {
  return (
    <Screen style={styles.screen}>
      <View style={styles.container}>
        <AntDesign name="warning" size={60} color="black" />
-      <Text style={{fontSize: 30, fontWeight: "bold"}}>Em construção...</Text>
+        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
+          Em construção...
+        </Text>
      </View>
    </Screen>
  );
@ -24,8 +27,7 @@ const styles = StyleSheet.create({
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
-    justifyContent: "flex-start"    
-
+    justifyContent: "flex-start",
  },
 });

--- a/src/app/screens/MessagesScreen.js
+++ b/src/app/screens/MessagesScreen.js
@ -9,7 +9,8 @@ import {
 } from "../components/lists";

 import colors from "../config/colors";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";

 /*const initialMessages = [
  {
@ -36,7 +37,8 @@ function MessagesScreen(props) {
  }; */

  return (
-    {/*<Screen>
+    {
+      /*<Screen>
      <FlatList
        data={messages}
        keyExtractor={(message) => message.id.toString()}
@ -64,13 +66,20 @@ function MessagesScreen(props) {
          ]);
        }}
      />
-      </Screen>*/},
+      </Screen>*/
+    },
+    (
      <Screen style={styles.screen}>
        <View style={styles.container}>
          <AntDesign name="warning" size={60} color="black" />
-        <Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
+          <Text
+            style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}
+          >
+            Em construção...
+          </Text>
        </View>
      </Screen>
+    )
  );
 }

@ -82,8 +91,7 @@ const styles = StyleSheet.create({
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
-    justifyContent: "flex-start"
-
+    justifyContent: "flex-start",
  },
 });

--- a/src/app/screens/OfficialMessagesScreen.js
+++ b/src/app/screens/OfficialMessagesScreen.js
@ -3,14 +3,17 @@ import { StyleSheet, View, Text } from "react-native";

 import colors from "../config/colors";
 import Screen from "../components/Screen";
-import { AntDesign } from '@expo/vector-icons';
+import { AntDesign } from "@expo/vector-icons";
+import { dimensions } from "../config/dimensions";

 function OfficialMessagesScreen(props) {
  return (
    <Screen style={styles.screen}>
      <View style={styles.container}>
        <AntDesign name="warning" size={60} color="black" />
-        <Text style={{ fontSize: 30, fontWeight: "bold" }}>Em construção...</Text>
+        <Text style={{ fontSize: dimensions.text.header, fontWeight: "bold" }}>
+          Em construção...
+        </Text>
      </View>
    </Screen>
  );
@ -24,8 +27,7 @@ const styles = StyleSheet.create({
    flex: 1,
    flexDirection: "column",
    alignItems: "center",
-    justifyContent: "flex-start"
-
+    justifyContent: "flex-start",
  },
 });

--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/src/app/screens/PluviometerSharingDataScreen.js
@ -12,7 +12,7 @@ import useLocation from "../hooks/useLocation";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import { insertPluviometerData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { dimensions, scaleDimsFromWidth } from "../config/dimensions";
 import FormDatePicker from "../components/forms/FormDatePicker";
 import colors from "../config/colors/";

@ -41,7 +41,11 @@ function PluviometerSharingDataScreen(props) {
          source={require("../assets/pluviometro.png")}
        />
        <Text
-          style={{ fontSize: 18, fontWeight: "bold", color: colors.primary }}
+          style={{
+            fontSize: dimensions.text.header,
+            fontWeight: "bold",
+            color: colors.primary,
+          }}
        >
          Pluviômetro
        </Text>
@ -112,7 +116,7 @@ const styles = StyleSheet.create({
    alignItems: "center",
  },
  labelStyle: {
-    fontSize: 16,
+    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
    color: colors.primary,
--- a/src/app/screens/RainSharingDataScreen.js
+++ b/src/app/screens/RainSharingDataScreen.js
@ -11,7 +11,7 @@ import colors from "../config/colors";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertRainData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import assets from "../config/assets";

 const validationSchema = Yup.object().shape({
@ -29,7 +29,7 @@ function RainSharingDataScreen(props) {
    <Screen style={styles.container}>
      <Text
        style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
          fontWeight: "bold",
          color: colors.primary,
          textAlign: "center",
@ -183,12 +183,12 @@ const styles = StyleSheet.create({
    justifyContent: "space-between",
  },
  text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },
  error_txt: {
-    fontSize: 18,
+    fontSize: dimensions.text.default,
    color: colors.danger,
  },
 });
--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/src/app/screens/RiverFloodSharingDataScreen.js
@ -13,7 +13,7 @@ import { insertRiverData } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import assets from "../config/assets";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";

 const validationSchema = Yup.object().shape({
  images: Yup.array(),
@ -30,7 +30,7 @@ function RiverFloodSharingDataScreen(props) {
    <Screen style={styles.container}>
      <Text
        style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
          fontWeight: "bold",
          color: colors.primary,
          textAlign: "center",
@ -159,7 +159,7 @@ const styles = StyleSheet.create({
    justifyContent: "space-between",
  },
  text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },
--- a/src/app/screens/SharingDataScreen.js
+++ b/src/app/screens/SharingDataScreen.js
@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";

 import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
 import assets from "../config/assets";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";

 //1/3

@ -55,7 +55,7 @@ const dims = scaleDimsFromWidth(248, 251, 35);

 const styles = StyleSheet.create({
  text: {
-    fontSize: 14,
+    fontSize: dimensions.text.default,
    textAlign: "center",
    marginTop: 10,
  },
--- a/src/app/screens/SharingFloodZonesScreen.js
+++ b/src/app/screens/SharingFloodZonesScreen.js
@ -6,7 +6,7 @@ import { Form, SubmitButton, FormField } from "../components/forms";
 import FormImagePicker from "../components/forms/FormImagePicker";
 import useLocation from "../hooks/useLocation";
 import colors from "../config/colors";
-import { scaleDimsFromWidth } from "../config/dimensions";
+import { scaleDimsFromWidth, dimensions } from "../config/dimensions";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { insertFloodZone } from "../database/databaseLoader";
 import { showMessage } from "react-native-flash-message";
@ -33,7 +33,7 @@ function SharingFloodZonesScreen(props) {
    <Screen style={styles.container}>
      <Text
        style={{
-          fontSize: 18,
+          fontSize: dimensions.text.header,
          fontWeight: "bold",
          color: colors.primary,
          textAlign: "center",
@ -122,11 +122,6 @@ const styles = StyleSheet.create({
    backgroundColor: colors.white,
  },

-  header: {
-    fontSize: 18,
-    color: colors.primary,
-    fontWeight: "500",
-  },
  image: {
    width: dims.width * 0.9,
    height: dims.height * 0.9,
@ -147,7 +142,8 @@ const styles = StyleSheet.create({
  },

  text: {
-    fontSize: 14,
+    paddingTop: 5,
+    fontSize: dimensions.text.default,
  },
  error_txt: {
    fontSize: 18,