Some UI improvements

components/Media.js

@@ -149,7 +149,12 @@ let Media = (props) => {
                 </>;
     }
     return (
-        <View>
+        <View
+            style={{
+                paddingTop: 10,
+                paddingBottom: 3,
+            }}
+        >
             {
                 (imagesTag.length > 2) ?
                     <FlatList
@@ -158,6 +163,13 @@ let Media = (props) => {
                         renderItem={renderImages}
                         keyExtractor={item => item[1]}
                         initialNumToRender={2}
+                        style={{
+                            transform: [{
+                                scale: 1.1
+                            }],
+                            paddingTop: 5,
+                        }}
+                        showsHorizontalScrollIndicator={false}
                     /> :
                     <View style={{ flexDirection: "row" }}>
                         {
@@ -196,6 +208,7 @@ const styles = StyleSheet.create({
     image: {
         width: "100%",
         aspectRatio: 1,
+        borderRadius: 15,
     },
     poster: {
         width: "100%",
@@ -204,12 +217,14 @@ const styles = StyleSheet.create({
     multipleImage: {
         width: "49%",
         aspectRatio: 1,
-        margin: 2,
+        margin: 3,
+        borderRadius: 15,
     },
     flatlistImages: {
         width: 300,
         aspectRatio: 1,
-        margin: 2,
+        margin: 5,
+        borderRadius: 15,
     },
     iframe: {
         width: "100%",

components/Post.js

@@ -60,7 +60,10 @@ let Post = (props) => {
     );
     return (
         <Card style={styles.card}>
-            <Card.Content>
+            <Card.Content style={{
+                padding: 0,
+                margin: 0,
+            }}>
                 <Hyperlink linkDefault={true} linkStyle={{ color: '#2980b9' }}>
                     {!post.nonOrganicType ?
                         <View>
@@ -71,7 +74,10 @@ let Post = (props) => {
                                     {" " + Moment(post.createdAt).fromNow()}
                                 </Text>
                             </View>
+                            { cleanContent.length ? 
                                 <Text style={{ fontSize: 15, padding: 0 }}>{cleanContent}</Text>
+                                : <></>
+                            }
                             <View style={{paddingTop: 5}}>
                             <Media  content={post.content} postId={post._id} post={post} />
                             </View>
@@ -142,9 +148,10 @@ const styles = StyleSheet.create({
     },
     card: {
         margin: 0,
-        backgroundColor: "#FFFAFA",
+        backgroundColor: "#FAFAFA",
         borderRadius: 0,
-        marginBottom: 2
+        marginBottom: 2,
+        padding: 0
     },
     comment: {
         margin: 8,

components/ProfilePhotoCircle.js

@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react';
 import { Avatar } from 'react-native-paper';
 import { View, StyleSheet, Text } from 'react-native';
 import API from './../API.js';
+import { useNavigation } from '@react-navigation/native';
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
 const ProfileHeader = ({ profileid, withName = false, small = false }) => {
     let [profile, setProfile] = useState({});
-
+    const navigation = useNavigation();
     useEffect(() => {
         let subscribed = true;
         let getData = async () => {
@@ -22,14 +23,16 @@ const ProfileHeader = ({ profileid, withName = false, small = false }) => {
     }, [profileid]);
     let photoUrl = profile.profile && profile.profile.photo ? 'https://social.emmint.com/' + profile.profile.photo : DefaultPhoto;
     const fullName = " " + profile.profile?.firstName + " " + profile.profile?.lastName;
-    console.log(photoUrl);
+    const onPress = () => {
+        return navigation.navigate('Profile', { profileid })
+    }
     return (
         <View style={styles.container}>
             <View style={styles.avatarContainer}>
-                <Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} />
+                <Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} onPress={onPress} />
             </View>
             <View style={styles.textContainer}>
-                <Text style={small ? styles.smallProfileName : styles.profileName}>{fullName}</Text>
+                <Text style={small ? styles.smallProfileName : styles.profileName} onPress={onPress}>{fullName}</Text>
             </View>
         </View>
     );