New post view + fix moment location

components/Comment.js

@@ -5,7 +5,10 @@ import API from './../API.js';
 import UserName from './UserName.js';
 import { useSnapshot } from 'valtio';
 import GlobalState from '../contexts/GlobalState.js';
-
+import Moment from 'moment';
+import i18n from "../i18nMessages.js";
+import 'moment/min/locales';
+Moment.locale(i18n.locale);
 
 let Comment = ({ comment, postid }) => {
     const gState = useSnapshot(GlobalState);
@@ -30,7 +33,7 @@ let Comment = ({ comment, postid }) => {
                     <View style={{flex:8}}>
                         <Text style={styles.userName}>
                             <UserName profileid={comment.profileid} key={comment.profileid} />
-
+                            <Text style={{fontSize: 12, fontWeight: "normal"}}> {Moment(comment.createdAt).fromNow()}</Text>
                         </Text>
                     </View>
                     <View style={{flex:2}}>
@@ -42,6 +45,7 @@ let Comment = ({ comment, postid }) => {
                     </View>
                 </View>
                 <Text style={{fontSize: 16}}>{comment.content}</Text>
+                
             </Card.Content>
         </Card>
     );

components/ProfileCardHorizontal.js

@@ -62,20 +62,29 @@ let ProfileCardHorizontal = ({ profileid, hideIcon, profileObj }) => {
             <Card.Content>
                 <View style={{ flexDirection: "row" }}>
                     <View onPress={onPress}>
-                        <Avatar.Image size={100} source={{ uri: photoUrl }} />
-                        
+                        <Avatar.Image size={75} source={{ uri: photoUrl }} />
                     </View>
-                    <View style={{paddingLeft: 10}}>
+                    <View style={{ paddingLeft: 10 }}>
                         <Title onPress={onPress} numberOfLines={1}>
                             <Text>
                                 {profile.profile && profile.profile.firstName} {profile.profile && profile.profile.lastName}
                             </Text>
                         </Title>
-                        <Paragraph lineBreakMode="clip" numberOfLines={3} style={{width:250}}>{profile.profile?.description}</Paragraph>
-                    </View>
-                    <View>
-                        <FollowButton profile={profile._id ? profile : {_id: profileid}} />
+                        <Paragraph lineBreakMode="clip" numberOfLines={3} style={{ width: 250 }}>{profile.profile?.description}</Paragraph>
                     </View>
+
+                </View>
+                <View style={{
+                    position: "absolute",
+                    top: 0,
+                    right: 0,
+                    width: 50,
+                    height: 50,
+                    backgroundColor:"#ddd",
+                    borderRadius: 25,
+                    opacity: 0.7
+                }}>
+                    <FollowButton profile={profile._id ? profile : { _id: profileid }} />
                 </View>
             </Card.Content>
         </Card>

components/basics/FollowButton.js

@@ -44,7 +44,7 @@ const unfollowProfile = async (profileid, me, setFollowing, setPending) => {
 }
 
 
-let FollowButton = ({ profile }) => {
+let FollowButton = ({ profile, iconSize }) => {
     const viewer = useSnapshot(GlobalState).me;
     const [following, setFollowing] = useState(false);
     const [pending, setPending] = useState(false);
@@ -70,9 +70,11 @@ let FollowButton = ({ profile }) => {
             {
                 profile._id && profile._id !== viewer._id ? 
                 <IconButton 
-                    mode='outlined' 
                     icon={following ? 'person-remove' : 'person-add'}
-                    onPress={toggleFollowThisProfile} /> : 
+                    onPress={toggleFollowThisProfile} 
+                    size={iconSize || 25}
+                    iconColor={following ? "#c44d56" : "#93faa5"}
+                /> : 
                 <></>
             }
         </>