MapModal to new layout

src/app/components/MapModal.js

@@ -6,7 +6,6 @@ import colors from "../config/colors";
 import { showMessage } from "react-native-flash-message";
 import { dimensions, screen_height } from "../config/dimensions";
 import { Svg, Image as ImageSvg } from "react-native-svg";
-import { ScrollView } from "react-native-gesture-handler";
 import PluviometerGraphics from "./PluviometerGraphics";
 
 const chartHeight = screen_height * 0.3;
@@ -24,9 +23,16 @@ function notImplemented() {
   });
 }
 
-function topBar(setShowModal) {
+function topBar(props, setShowModal) {
   return (
     <View style={styles.topBar}>
+      <View style={{ alignContent: "center", flex: 1, marginHorizontal: 10 }}>
+        <Text style={[styles.bodyTitle, { color: "white" }]}>
+          {props.title}
+        </Text>
+      </View>
+
+      <View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
         <TouchableOpacity
           style={styles.topBarIcon}
           onPress={() => notImplemented()}
@@ -34,7 +40,7 @@ function topBar(setShowModal) {
           <MaterialCommunityIcons
             name="pencil"
             size={20}
-          color={colors.dark}
+            color={colors.white}
             alignItems="center"
           />
         </TouchableOpacity>
@@ -46,7 +52,7 @@ function topBar(setShowModal) {
           <MaterialCommunityIcons
             name="trash-can"
             size={20}
-          color={colors.dark}
+            color={colors.white}
             alignItems="center"
           />
         </TouchableOpacity>
@@ -58,11 +64,12 @@ function topBar(setShowModal) {
           <MaterialCommunityIcons
             name="close"
             size={20}
-          color={colors.dark}
+            color={colors.white}
             alignItems="center"
           />
         </TouchableOpacity>
       </View>
+    </View>
   );
 }
 
@@ -73,7 +80,7 @@ function iconTextRow(props) {
         <MaterialCommunityIcons
           name={props.name}
           size={18}
-          color={colors.dark}
+          color={colors.primary}
         />
       </View>
 
@@ -89,11 +96,12 @@ function iconImageRow(props) {
         <MaterialCommunityIcons
           name={props.name}
           size={18}
-          color={colors.dark}
+          color={colors.primary}
         />
       </View>
 
       <View alignSelf="flex-start">
+        {props.pictures > 0 ? (
           <Svg width={100} height={100}>
             <ImageSvg
               width="100%"
@@ -102,6 +110,9 @@ function iconImageRow(props) {
               href={{ uri: props.pic[0] }}
             />
           </Svg>
+        ) : (
+          <Text style={styles.text}>Não há foto</Text>
+        )}
       </View>
     </View>
   );
@@ -190,22 +201,35 @@ function componentBody(props) {
       <Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} />
 
       <View style={styles.bodyInfo}>
-        <Text style={styles.bodyTitle}>{props.title}</Text>
-
         {iconTextRow({ name: "map-marker", description: address })}
         {iconTextRow({ name: "calendar", description: date })}
         {iconTextRow({ name: "account", description: "Usuário ativo" })}
-        {pictures.length > 0 && iconImageRow({ name: "camera", pic: pictures })}
+        {iconImageRow({ name: "camera", pic: pictures })}
       </View>
     </View>
   );
 }
 
+function userMessage(marker) {
+  if (marker.description == "") return <></>;
+
+  return (
+    <View>
+      <Text
+        style={[styles.text, { color: colors.primary, fontWeight: "bold" }]}
+      >
+        Comentário:
+      </Text>
+      <Text style={styles.text}>{marker.description}</Text>
+    </View>
+  );
+}
+
 function isPluviometer(name) {
   return name === "pluviometer" || name === "officialPluviometer";
 }
 
-function MapModal({showModal, setShowModal, markers}) {
+function MapModal({ showModal, setShowModal, markers }) {
   var currentMarker = undefined;
   if (markers && showModal != null && markers.has(showModal)) {
     currentMarker = markers.get(showModal);
@@ -220,13 +244,16 @@ function MapModal({showModal, setShowModal, markers}) {
         showModal={showModal}
         setShowModal={setShowModal}
       >
-      {topBar(setShowModal)}
+        {topBar(currentMarker, setShowModal)}
+        <View style={{ padding: 16 }}>
           {componentBody(currentMarker)}
           {isPluviometer(currentMarker.name) ? moreInfo(currentMarker) : null}
-      {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null}
+          {/* {!isPluviometer(currentMarker.name) ? reviews(currentMarker) : null} */}
+          {userMessage(currentMarker)}
+        </View>
       </SelfClosingModal>
-  );}
-  else {
+    );
+  } else {
     return null;
   }
 }
@@ -240,7 +267,6 @@ const styles = StyleSheet.create({
   bodyTitle: {
     fontWeight: "700",
     fontSize: dimensions.text.secondary,
-    marginBottom: 5,
   },
   bodyInfo: {
     flexDirection: "column",
@@ -248,7 +274,7 @@ const styles = StyleSheet.create({
   },
   bodyIcon: {
     alignSelf: "flex-start",
-    marginHorizontal: 20,
+    marginRight: 20,
     height: 53,
     width: 53,
   },
@@ -264,8 +290,10 @@ const styles = StyleSheet.create({
     marginHorizontal: 10,
   },
   topBar: {
+    backgroundColor: colors.primary,
     flexDirection: "row",
-    alignSelf: "flex-end",
+    width: "100%",
+    alignItems: "center",
   },
   topBarIcon: {
     margin: 10,