Improve UI

components/Media.js

@@ -168,6 +168,7 @@ let Media = (props) => {
                                 scale: 1.1
                             }],
                             paddingTop: 5,
+                            paddingBottom: 10,
                         }}
                         showsHorizontalScrollIndicator={false}
                     /> :

components/Post.js

@@ -23,7 +23,7 @@ let Post = (props) => {
     let [bookmarked, changeBookmarked] = useState(post.bookmarks && post.bookmarks.includes(viewer._id));
     let toProfileText = post.toProfile && post.toProfile !== post.profileid ?
         <ProfilePhotoCircle profileid={post.toProfile} small={true} /> : undefined;
-    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '');
+    let cleanContent = post.content.replace(/@[A-z]+:.+\w/g, '').trim();
     //cleanContent = convertLinks(cleanContent);
     const newComentAdded = (commentData) => {
         let newPostObj = { ...post };
@@ -69,21 +69,15 @@ let Post = (props) => {
                     {!post.nonOrganicType ?
                         <View>
                             <ProfilePhotoCircle profileid={post.profileid} />
-                            <View style={{ flexDirection: 'row', alignItems: 'center', margin: 0, marginLeft: 37, marginTop: -5, paddingBottom: 2 }}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center', margin: 0, marginLeft: 37, marginTop: -14, paddingBottom: 2 }}>
                                 {toProfileText}
-                                <Text style={{ fontWeight: 'normal', fontSize: 10 }}>
-                                    {" " + Moment(post.createdAt).fromNow()}
-                                </Text>
+
                             </View>
-                            {cleanContent.length ?
-                                <Text style={{ fontSize: 15, padding: 3 }}>{
+                            
+                                <Text style={{ fontSize: 16, padding: 3, paddingLeft: 40 }}>{
                                     cleanContent
                                 }</Text>
-                                : <></>
-                            }
-                            <View style={{ paddingTop: 2 }}>
-                                <Media content={post.content} postId={post._id} post={post} />
-                            </View>
+                            <Media content={post.content} postId={post._id} post={post} style={{ paddingTop: 2 }} />
                         </View> :
                         <View>
                             <Chip icon="new-releases" style={{ width: 100 }} >{i18n.t("message.news")}</Chip>
@@ -93,23 +87,23 @@ let Post = (props) => {
                     }
                 </Hyperlink>
             </Card.Content>
-            <Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16, marginLeft: 0 }}>
+            <Card.Actions style={{ flexDirection: "row", flow: 4, fontSize: 16, marginLeft: 36, marginTop: -10 }}>
                 <Button
                     icon={post.reactions[viewer._id] ? "favorite" : "favorite-border"}
-                    labelStyle={{ fontSize: 16 }}
+                    labelStyle={{ fontSize: 17 }}
                     style={{ flow: 1 }}
                     onPress={newPostReaction}
                     color="#555"
                 >
                     {likes}
                 </Button>
-                <Button icon="forum" labelStyle={{ fontSize: 16 }} style={{ flow: 1 }}
+                <Button icon="forum" labelStyle={{ fontSize: 17 }} style={{ flow: 1 }}
                     onPress={() => { changeshowCommentsB(!showCommentsB) }}
                     color="#555"
                 >
                     {post.comments.length}
                 </Button>
-                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 16 }}
+                <Button icon="ios-share" style={{ flow: 1 }} labelStyle={{ fontSize: 17 }}
                     color="#555"
                     onPress={() => {
                         Share.share({
@@ -120,11 +114,14 @@ let Post = (props) => {
                 <Button
                     icon={!bookmarked ? "bookmark-outline" : "bookmark"}
                     style={{ flow: 1 }}
-                    labelStyle={{ fontSize: 16 }}
+                    labelStyle={{ fontSize: 17 }}
                     onPress={newPostBookmark}
                     color="#555"
                 >
                 </Button>
+                <Text style={{ fontWeight: 'normal', fontSize: 12 }}>
+                    {" " + Moment(post.createdAt).fromNow()}
+                </Text>
             </Card.Actions>
             {showCommentsB && <NewComment postid={post._id} newComentAdded={newComentAdded} />}
             {

components/ProfilePhotoCircle.js

@@ -29,7 +29,7 @@ const ProfileHeader = ({ profileid, withName = false, small = false }) => {
     return (
         <View style={styles.container}>
             <View style={styles.avatarContainer}>
-                <Avatar.Image size={small ? 20 : 30} source={{ uri: photoUrl }} onPress={onPress} />
+                <Avatar.Image size={small ? 20 : 35} source={{ uri: photoUrl }} onPress={onPress} style={{marginLeft:-4}}/>
             </View>
             <View style={styles.textContainer}>
                 <Text style={small ? styles.smallProfileName : styles.profileName} onPress={onPress}>{fullName}</Text>
@@ -42,7 +42,6 @@ const ProfileHeader = ({ profileid, withName = false, small = false }) => {
 const styles = StyleSheet.create({
     container: {
         flexDirection: 'row',
-        alignItems: 'center',
     },
     avatarContainer: {
         marginRight: 5,