Some UI improvements

components/Media.js

@@ -110,7 +110,7 @@ let Media = (props) => {
                     ></Button>
                 }
             </TouchableHighlight>
-    ): <></>;
+    ) : <></>;
     const iframe = iframeSrc.length ?
         <WebView
             style={styles.iframe}
@@ -124,24 +124,24 @@ let Media = (props) => {
     const renderImages = (({ item, index }) => {
         return (
             <TouchableWithoutFeedback style={styles.flatlistImages}
-            onPress={()=>{
+                onPress={() => {
                     //alert("hello");
-                navigation.navigate('Slideshow', { images: imagesTag, startIndex: index});
+                    navigation.navigate('Slideshow', { images: imagesTag, startIndex: index });
                 }}
-            onLongPress={()=>{
+                onLongPress={() => {
                     Share.share({
                         //message: image[1],
                         url: item[1],
                     });
                 }}>
-                <Image source={{ uri: item[1] }}  style={styles.flatlistImages}/>
+                <Image source={{ uri: item[1] }} style={styles.flatlistImages} />
             </TouchableWithoutFeedback>
         );
     });
     let progress = <></>;
-    if(viewer.data && viewer.data[props.postId]) {
+    if (viewer.data && viewer.data[props.postId]) {
         const percent = Math.round(viewer.data[props.postId].time / viewer.data[props.postId].duration * 100);
-        if(percent)
+        if (percent)
             progress =
                 <>
                     <Text>{percent}% {Moment(viewer.data[props.postId].ts).fromNow()}</Text>
@@ -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" }}>
                         {
@@ -165,10 +177,10 @@ let Media = (props) => {
                                 return (
                                     //<Text key={i}>{post.content}</Text>
                                     <TouchableWithoutFeedback
-                                    onPress={()=>{
+                                        onPress={() => {
                                             navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
                                         }}
-                                    onLongPress={()=>{
+                                        onLongPress={() => {
                                             Share.share({
                                                 //message: image[1],
                                                 url: image[1],
@@ -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>
     );