Add userX view, Add padding

1 files changed, 8 insertions, 6 deletions

diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index 089d9ea4..3456afe9 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -25,6 +25,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
     UniversityBadgeDisplayType[]
   >([]);
   const [isEditBadgeModalVisible, setIsEditBadgeModalVisible] = useState(false);
+  const isOwnProfile = userXId === undefined;
 
   useEffect(() => {
     setDisplayBadges(badgesToDisplayBadges(badges));
@@ -33,7 +34,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
   return (
     <>
       {/* Tutorial text */}
-      {displayBadges.length === 0 && (
+      {displayBadges.length === 0 && isOwnProfile && (
         <>
           <Text style={styles.title}>Badges</Text>
           <Text style={styles.body}>
@@ -41,7 +42,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
           </Text>
         </>
       )}
-      {displayBadges.length === 0 ? (
+      {displayBadges.length === 0 && isOwnProfile && (
         // Grey circle placeholders
         <ScrollView
           contentContainerStyle={styles.badgeContainer}
@@ -64,7 +65,8 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
               <View style={[styles.grey, styles.circle]} />
             ))}
         </ScrollView>
-      ) : (
+      )}
+      {displayBadges.length !== 0 && (
         // Populating actual badges
         <ScrollView
           contentContainerStyle={styles.badgeContainer}
@@ -75,7 +77,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
             <BadgeIcon key={displayBadge.id} badge={displayBadge} />
           ))}
           {/* Plus icon */}
-          {displayBadges.length < BADGE_LIMIT && (
+          {displayBadges.length < BADGE_LIMIT && isOwnProfile && (
             <TouchableOpacity
               onPress={() =>
                 navigation.navigate('BadgeSelection', {editing: true})
@@ -96,7 +98,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
               <View style={styles.circle} />
             ))}
           {/* X button */}
-          {displayBadges.length === BADGE_LIMIT && (
+          {displayBadges.length === BADGE_LIMIT && isOwnProfile && (
             <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
               <PlusIcon
                 width={normalize(31)}
@@ -135,7 +137,7 @@ const styles = StyleSheet.create({
   badgeContainer: {
     width: '100%',
     justifyContent: 'space-between',
-    marginTop: 5,
+    marginTop: 10,
     marginBottom: 15,
   },
   circle: {