Fixing all alignments in forms to new prototype

3 years ago · 4d6bc0c4f3
10 changed files with 185 additions and 187 deletions
--- a/src/app/components/ImageInput.js
+++ b/src/app/components/ImageInput.js
@ -241,11 +241,11 @@ const styles = StyleSheet.create({
    height: 35,
  },
  addBtnContainer: {
-    padding: 16,
-    elevation: 40,
-    marginVertical: 24,
+    paddingHorizontal: 16,
+    paddingTop: 24,
    width: "100%",
  },
+
  addBtn: {
    justifyContent: "center",
    flexDirection: "row",
--- a/src/app/components/ImageInputList.js
+++ b/src/app/components/ImageInputList.js
@ -31,6 +31,7 @@ function ImageInputList({ imageUris = [], onRemoveImage, onAddImage }) {
 const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
+    paddingHorizontal: 16,
  },
  image: {
    marginRight: 10,
--- a/src/app/components/PickEventDateLocation.js
+++ b/src/app/components/PickEventDateLocation.js
@ -16,29 +16,27 @@ export default function PickEventDateLocation({
    <View
      style={{
        flex: 1,
+        paddingTop: 24,
        paddingHorizontal: 16,
-        flexDirection: "column",
-        justifyContent: "space-between",
-        alignContent: "flex-start",
      }}
    >
-      {/*Data da coleta:*/}
-      <View style={{ flex: 0.1 }}>
-        <FormDatePicker
-          textStyle={{
-            borderColor: colors.gray,
-            borderWidth: 3,
-          }}
-          defaultDate={new Date()}
-          onDateChange={(value) => setDate(value)}
-          onTimeChange={(value) => setTime(value)}
-        />
+    <View
+      paddingBottom={24}>
+      <FormDatePicker
+        textStyle={{
+          borderColor: colors.gray,
+          borderWidth: 3,
+        }}
+        defaultDate={new Date()}
+        onDateChange={(value) => setDate(value)}
+        onTimeChange={(value) => setTime(value)}
+      />
      </View>
-      {/*Local do evento:*/}
-      {location &&
-      <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
-        <FormLocationPicker />
-      </TouchableOpacity>}
+      {location && (
+        <TouchableOpacity onPress={() => navigation.navigate("FormMap")}>
+          <FormLocationPicker />
+        </TouchableOpacity>
+      )}
    </View>
  );
 }
--- a/src/app/components/TextInput.js
+++ b/src/app/components/TextInput.js
@ -8,7 +8,7 @@ import {Shadow} from "react-native-shadow-2";
 function AppTextInput({ icon, width = "100%", ...otherProps }) {
  return (
    <Shadow
-      viewStyle={{ width: width}}
+      viewStyle={{ width: width, height: otherProps.numberOfLines * 20}}
      offset={[0, 4]}
      distance={4}
      radius={4}
@ -40,8 +40,7 @@ const styles = StyleSheet.create({
    borderRadius: 6,
    borderColor: colors.medium,
    borderWidth: 1,
-    padding: 10,
-    flexDirection: "row",
+    padding: 5,
  },
  icon: {
    marginRight: 10,
--- a/src/app/components/forms/FormDatePicker.js
+++ b/src/app/components/forms/FormDatePicker.js
@ -95,18 +95,18 @@ const FormDatePicker = (props) => {
    <TouchableOpacity disabled={disabled} onPress={() => setShow(true)}>
      <View
        style={{
+          flex: 1,
          width: "100%",
          flexDirection: "row",
-          alignItems: "flex-start",
-          justifyContent: "space-between",
+          alignItems: "center",
+          justifyContent: "flex-start",
        }}
      >
        <View style={styles.dateIcon}>
          <MaterialCommunityIcons
            name="calendar-today"
-            size={30}
+            size={20}
            color="white"
-            alignItems="center"
          />
        </View>
        <View style={styles.dateInput}>
@ -206,18 +206,18 @@ const styles = StyleSheet.create({
    justifyContent: "center",
  },
  dateInput: {
-    flex: 0.9,
+    paddingLeft: 16,
    height: "100%",
    flexDirection: "column",
    justifyContent: "center",
  },
  dateIcon: {
    backgroundColor: colors.primary,
-    padding: 8,
-    width: 20,
+    width: 40,
+    height: 40,
    alignItems: "center",
+    justifyContent: "center",
    borderRadius: 5,
-    flex: 0.1,
  },
 });

--- a/src/app/components/forms/FormLocationPicker.js
+++ b/src/app/components/forms/FormLocationPicker.js
@ -1,69 +1,65 @@
 import React, { useContext } from "react";
-import { StyleSheet, Text, View, PixelRatio } from "react-native";
+import { StyleSheet, Text, View } from "react-native";

 import { MaterialIcons } from "@expo/vector-icons";
 import colors from "../../config/colors";
-import EventLocationInput from "../EventLocationInput";
 import { dimensions } from "../../config/dimensions";
 import { EventLocationContext } from "../../context/EventLocationContext";

 function FormLocationPicker({ subtitle }) {
-    const context = useContext(EventLocationContext);
-    const local = context.eventLocation.toString();
+  const context = useContext(EventLocationContext);
+  const local = context.eventLocation.toString();

-    return (
-        <View style={{ marginTop: 10, width: "100%" }}>
-            <View style={styles.location}>
-                <View style={styles.mapIcon}>
-                    <MaterialIcons
-                        name="location-on"
-                        size={28}
-                        color="white"
-                        alignItems="center"
-                        alignContent="center"
-                    />
-                </View>
-                <View style={styles.adressText}>
-                    <Text style={{
-                        fontSize: dimensions.text.default,
-                    }}>
-                        {local}
-                    </Text>
-                    <View>
-                        <Text style={{ color: colors.primary, height: 50 }}>
-                            {(subtitle ? subtitle : "Defina o local no mapa" )}
-                </Text>
-                    </View>
-                </View>
-            </View>
+  return (
+      <View style={styles.location}>
+
+        <View style={styles.mapIcon}>
+          <MaterialIcons
+            name="location-on"
+            size={20}
+            color="white"
+          />
+        </View>
+
+        <View style={styles.adressText}>
+          <Text
+            style={{
+              fontSize: dimensions.text.default,
+            }}
+          >
+            {local}
+          </Text>
+          <Text style={{ color: colors.primary}}>
+            {subtitle ? subtitle : "Defina o local no mapa"}
+          </Text>
        </View>
-    );
+
+      </View>
+  );
 }

 const styles = StyleSheet.create({
-    location: {
-        //flex: 1,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "flex-start",
-        justifyContent: "space-between",
-        // backgroundColor: colors.secondary,
-    },
-    adressText: {
-        flex: 0.90,
-        height: "100%",
-        flexDirection: "column",
-        justifyContent: "center",
-        paddingLeft: 5,
-    },
-    mapIcon: {
-        backgroundColor: colors.primary,
-        padding: 8,
-        width: 20,
-        alignItems: "center",
-        borderRadius: 5,
-        flex: 0.10,
-    },
+  location: {
+    flex: 1,
+    width: "100%",
+    flexDirection: "row",
+    alignContent: "space-around",
+    justifyContent: "flex-start",
+  },
+
+  adressText: {
+    height: "100%",
+    paddingLeft: 24,
+  },
+
+  mapIcon: {
+    backgroundColor: colors.primary,
+    width: 40,
+    height: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 5,
+  },
 });

 export default FormLocationPicker;
--- a/src/app/screens/PluviometerSharingDataScreen.js
+++ b/src/app/screens/PluviometerSharingDataScreen.js
@ -69,15 +69,16 @@ function PluviometerSharingDataScreen(props) {
          }}
          validationSchema={validationSchema}
        >
-          <View style={{ flex: 1 }}>
-            <Text style={styles.labelStyle}>Quantidade de chuva (mm):</Text>
-            <FormField
-              keyboardType="decimal-pad"
-              maxLength={200}
-              name="pluviometer"
-              placeholder="Digite a quantidade de chuva"
-            />
-          </View>
+          <Text style={{...styles.labelStyle, paddingTop: 24 }}>Quantidade de chuva (mm):</Text>
+           
+
+          <FormField
+            keyboardType="decimal-pad"
+            maxLength={200}
+            numberOfLines={2}
+            name="pluviometer"
+            placeholder="Digite a quantidade de chuva"
+          />

          <FormImagePicker
            backgroundColor={colors.primary}
@ -85,34 +86,26 @@ function PluviometerSharingDataScreen(props) {
            styles={{ width: 50 }}
          />

-          <View
-            style={{
-              flex: 1,
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignContent: "flex-start",
-            }}
-          >
          <PickEventDateLocation
            setDate={setDateTime}
            setTime={setTime}
            navigation={props.navigation}
            location={false}
-            />
+          />

+          <Text style={styles.labelStyle}>Comentário:</Text>
+
+          <FormField
+            maxLength={255}
+            multiline
+            name="description"
+            numberOfLines={3}
+            placeholder="Escreva um comentário (Opcional)..."
+          />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={styles.labelStyle}>Comentário:</Text>
-            <FormField
-              maxLength={255}
-              multiline
-              name="description"
-              numberOfLines={3}
-              placeholder="Escreva um comentário (Opcional)..."
-            />
-          </View>
-          <SubmitButton title="Enviar" style={{ marginBottom: 100 }} />
-          <View style={{ flex: 1 }}></View>
        </Form>
      </ScrollView>
    </Screen>
@ -131,6 +124,7 @@ const styles = StyleSheet.create({
  },
  labelStyle: {
    paddingHorizontal: 16,
+    paddingBottom: 12,
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
--- a/src/app/screens/RainSharingDataScreen.js
+++ b/src/app/screens/RainSharingDataScreen.js
@ -72,11 +72,12 @@ function RainSharingDataScreen(props) {
          <View
            style={{
              paddingHorizontal: 16,
+              paddingTop: 16,
            }}
          >
-            <View style={styles.imgs_row}>
+            <View  flexDirection="row" justifyContent="center" paddingBottom={16}>
              <TouchableNativeFeedback onPress={() => setRain(0)}>
-                <View style={styles.img_block}>
+                <View style={{paddingRight: 16}}>
                  {rain == 0 ? (
                    <assets.rainLevel.Rain_0_5_Toggle {...dims} />
                  ) : (
@ -86,17 +87,17 @@ function RainSharingDataScreen(props) {
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRain(1)}>
-                <View style={styles.img_block}>
                  {rain == 1 ? (
                    <assets.rainLevel.Rain_1_5_Toggle {...dims} />
                  ) : (
                    <assets.rainLevel.Rain_1_5 {...dims} />
                  )}
-                </View>
              </TouchableNativeFeedback>
+            </View>

+            <View flexDirection="row" justifyContent="center">
              <TouchableNativeFeedback onPress={() => setRain(2)}>
-                <View style={styles.img_block}>
+                <View style={{paddingRight: 16}}>
                  {rain == 2 ? (
                    <assets.rainLevel.Rain_2_5_Toggle {...dims} />
                  ) : (
@ -104,27 +105,13 @@ function RainSharingDataScreen(props) {
                  )}
                </View>
              </TouchableNativeFeedback>
-            </View>

-            <View flexDirection="row" justifyContent="center">
              <TouchableNativeFeedback onPress={() => setRain(3)}>
-                <View style={styles.img_block}>
                  {rain == 3 ? (
                    <assets.rainLevel.Rain_3_5_Toggle {...dims} />
                  ) : (
                    <assets.rainLevel.Rain_3_5 {...dims} />
                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRain(4)}>
-                <View style={styles.img_block}>
-                  {rain == 4 ? (
-                    <assets.rainLevel.Rain_4_5_Toggle {...dims} />
-                  ) : (
-                    <assets.rainLevel.Rain_4_5 {...dims} />
-                  )}
-                </View>
              </TouchableNativeFeedback>
            </View>
          </View>
@ -151,7 +138,9 @@ function RainSharingDataScreen(props) {
            placeholder="Escreva um comentário (Opcional)..."
          />

-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          </View>
        </Form>
      </ScrollView>
    </Screen>
@ -163,12 +152,12 @@ const styles = StyleSheet.create({
    backgroundColor: colors.white,
  },
  img_block: {
-    flex: 1,
-    borderRadius: 5,
-    borderStyle: "dotted",
-    borderColor: colors.white,
-    borderWidth: borderWidth,
-    alignItems: "center",
+    // flex: 1,
+    // borderRadius: 5,
+    // borderStyle: "dotted",
+    // borderColor: colors.white,
+    // borderWidth: borderWidth,
+    // alignItems: "center",
  },
  imgs_row: {
    flexDirection: "row",
@ -180,6 +169,8 @@ const styles = StyleSheet.create({
  },
  labelStyle: {
    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
--- a/src/app/screens/RiverFloodSharingDataScreen.js
+++ b/src/app/screens/RiverFloodSharingDataScreen.js
@ -48,7 +48,7 @@ function RiverFloodSharingDataScreen(props) {
  const [date, setDate] = useState(moment());
  const [time, setTime] = useState(moment());

-  const dims = scaleDimsFromWidth(80, 80, 20);
+  const dims = { width: 105, height: 105 }; //scaleDimsFromWidth(80, 80, 26);

  return (
    <Screen style={styles.container}>
@ -66,7 +66,14 @@ function RiverFloodSharingDataScreen(props) {
              setError(true);
              return;
            }
-            insertRiverData({ ...values, riverScale, location, date, time, address });
+            insertRiverData({
+              ...values,
+              riverScale,
+              location,
+              date,
+              time,
+              address,
+            });
            showMessage({
              message: "Informação enviada!",
              duration: 1950,
@ -77,30 +84,42 @@ function RiverFloodSharingDataScreen(props) {
          }}
          validationSchema={validationSchema}
        >
-          <View style={{paddingHorizontal: 16}}>
-            <View style={styles.imgs_row}>
-              <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
-                <View style={styles.img_block}>
-                  {riverScale == 0 ? (
-                    <assets.riverLevel.LowToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.Low {...dims} />
-                  )}
-                </View>
-              </TouchableNativeFeedback>
-
-              <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
-                <View style={styles.img_block}>
+          <View
+            style={{
+              paddingHorizontal: 16,
+              paddingTop: 16,
+              flexDirection: "column",
+            }}
+          >
+            <View
+              flexDirection="row"
+              justifyContent="center"
+              paddingBottom={16}
+            >
+              <View style={styles.imgs_row}>
+                <TouchableNativeFeedback onPress={() => setRiverScale(0)}>
+                  <View style={{ paddingRight: 16 }}>
+                    {riverScale == 0 ? (
+                      <assets.riverLevel.LowToggle {...dims} />
+                    ) : (
+                      <assets.riverLevel.Low {...dims} />
+                    )}
+                  </View>
+                </TouchableNativeFeedback>
+
+                <TouchableNativeFeedback onPress={() => setRiverScale(1)}>
                  {riverScale == 1 ? (
                    <assets.riverLevel.NormalToggle {...dims} />
                  ) : (
                    <assets.riverLevel.Normal {...dims} />
                  )}
-                </View>
-              </TouchableNativeFeedback>
+                </TouchableNativeFeedback>
+              </View>
+            </View>

+            <View flexDirection="row" justifyContent="center">
              <TouchableNativeFeedback onPress={() => setRiverScale(2)}>
-                <View style={styles.img_block}>
+                <View style={{ paddingRight: 16 }}>
                  {riverScale == 2 ? (
                    <assets.riverLevel.HighToggle {...dims} />
                  ) : (
@ -110,13 +129,11 @@ function RiverFloodSharingDataScreen(props) {
              </TouchableNativeFeedback>

              <TouchableNativeFeedback onPress={() => setRiverScale(3)}>
-                <View style={styles.img_block}>
-                  {riverScale == 3 ? (
-                    <assets.riverLevel.FloodingToggle {...dims} />
-                  ) : (
-                    <assets.riverLevel.Flooding {...dims} />
-                  )}
-                </View>
+                {riverScale == 3 ? (
+                  <assets.riverLevel.FloodingToggle {...dims} />
+                ) : (
+                  <assets.riverLevel.Flooding {...dims} />
+                )}
              </TouchableNativeFeedback>
            </View>
          </View>
@ -126,13 +143,15 @@ function RiverFloodSharingDataScreen(props) {
          )}

          <FormImagePicker backgroundColor={colors.primary} name="images" />
+
          <PickEventDateLocation
            setDate={setDate}
            setTime={setTime}
-            navigation={props.navigation}/>
+            navigation={props.navigation}
+          />

-          <View style={{ flex: 1 }}>
            <Text style={styles.labelStyle}>Comentário:</Text>
+
            <FormField
              maxLength={255}
              multiline
@ -140,8 +159,10 @@ function RiverFloodSharingDataScreen(props) {
              numberOfLines={3}
              placeholder="Escreva um comentário (Opcional)..."
            />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
          </View>
-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
        </Form>
      </KeyboardAwareScrollView>
    </Screen>
@ -152,13 +173,6 @@ const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.white,
  },
-  img_block: {
-    borderRadius: 5,
-    borderStyle: "dotted",
-    borderColor: colors.white,
-    borderWidth: borderWidth,
-    alignItems: "center",
-  },
  imgs_row: {
    flexDirection: "row",
    justifyContent: "space-between",
@ -166,9 +180,11 @@ const styles = StyleSheet.create({
  error_txt: {
    fontSize: 18,
    color: colors.danger,
-  },  
+  },
  labelStyle: {
    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    textAlign: "left",
--- a/src/app/screens/SharingFloodZonesScreen.js
+++ b/src/app/screens/SharingFloodZonesScreen.js
@ -82,7 +82,7 @@ function SharingFloodZonesScreen(props) {
        >
          <View style={styles.imgs_container}>
            <TouchableNativeFeedback onPress={() => setPassable(1)}>
-              <View>
+              <View style={{paddingRight: 17}}>
                {passable == 1 ? (
                  <Image
                    source={assets.floodZones.passable_toggle}
@ -98,7 +98,6 @@ function SharingFloodZonesScreen(props) {
            </TouchableNativeFeedback>

            <TouchableNativeFeedback onPress={() => setPassable(0)}>
-              <View style={styles.img_block}>
                {passable == 0 ? (
                  <Image
                    source={assets.floodZones.notPassable_toggle}
@ -110,7 +109,6 @@ function SharingFloodZonesScreen(props) {
                    source={assets.floodZones.notPassable2}
                  />
                )}
-              </View>
            </TouchableNativeFeedback>
          </View>

@ -123,7 +121,8 @@ function SharingFloodZonesScreen(props) {
          <PickEventDateLocation
            setDate={setDate}
            setTime={setTime}
-            navigation={props.navigation}/>
+            navigation={props.navigation}
+          />

          <Text style={styles.labelStyle}>Comentário:</Text>
          <FormField
@ -133,7 +132,10 @@ function SharingFloodZonesScreen(props) {
            numberOfLines={3}
            placeholder="Escreva um comentário (Opcional)..."
          />
-          <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+
+          <View paddingVertical={24}>
+            <SubmitButton title="Enviar" backgroundColor={colors.primary} />
+          </View>
        </Form>
      </KeyboardAwareScrollView>
    </Screen>
@ -144,7 +146,6 @@ const dims = scaleDimsFromWidth(93, 106, 30.0);

 const styles = StyleSheet.create({
  container: {
-    // padding: 17,
    backgroundColor: colors.white,
  },

@ -161,10 +162,10 @@ const styles = StyleSheet.create({
    alignItems: "center",
  },
  imgs_container: {
+    paddingTop: 16,
    flexDirection: "row",
-    justifyContent: "space-evenly",
+    justifyContent: "center",
  },
-
  text: {
    paddingTop: 5,
    fontSize: dimensions.text.default,
@ -178,6 +179,8 @@ const styles = StyleSheet.create({
    fontSize: dimensions.text.secondary,
    fontWeight: "bold",
    paddingHorizontal: 16,
+    paddingTop: 24,
+    paddingBottom: 12,
    textAlign: "left",
    color: colors.lightBlue,
  },