Fix groups visual issues

components/GroupCard.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Text, StyleSheet } from 'react-native';
+import { Text, StyleSheet, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';
 import API from './../API.js';
@@ -69,11 +69,13 @@ let ProfileCard = ({ profileid, hideIcon, profileObj }) => {
                     </Text>
                 </Title>
                 <Paragraph numberOfLines={4}>{profileObj.profile.description}</Paragraph>
-                <Text>
+                <View style={{flexDirection: "row", justifyContent:"space-evenly"}}>
                     <FollowButton profile={profile} />
-                    <Text><Icon name={"hail"} size={18} />
-                        {Object.keys(profile.subscribed).length}</Text>
+                    <Text>
+                        <Icon name={"hail"} size={18} />
+                        {Object.keys(profile.subscribed).length}
                     </Text>
+                </View>
             </Card.Content>
         </Card>
 
@@ -90,5 +92,6 @@ const styles = StyleSheet.create({
     centerItems: {
         justifyContent: 'center',
         alignItems: 'center',
+        
     }
 });

components/UserName.js

@@ -4,6 +4,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { IconButton } from 'react-native-paper';
 
 const storeName = async (key, value) => {
     try {
@@ -48,6 +49,7 @@ let UserName = ({ profileid, hideIcon }) => {
     let icon = profile._id ? (!profile.isGroup ? "person-outline" : "group") : '';
     icon = icon === "person-outline" && profile.subscription && profile.subscription > (new Date() - 0) ? "assignment-ind" : icon;
     icon = icon === "group" && profile.isCourse ? "subscriptions" : icon;
+    icon = icon === "group" && profile.isPrivate ? "screen-lock-portrait" : icon;
 
     const onPress = () => {
         return navigation.navigate('Profile', { profileid })