Merge branch 'master' into tma872-purple-indicator

# Conflicts:
#	src/constants/constants.ts
#	src/utils/common.ts

11 files changed, 214 insertions, 118 deletions

diff --git a/src/components/common/BadgeDetailView.tsx b/src/components/common/BadgeDetailView.tsx
index 6504300c..19f1e74d 100644
--- a/src/components/common/BadgeDetailView.tsx
+++ b/src/components/common/BadgeDetailView.tsx
@@ -5,11 +5,15 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import {useDispatch, useSelector} from 'react-redux';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
-import {BADGE_GRADIENT_FIRST} from '../../constants';
-import {BADGE_DATA} from '../../constants/badges';
+import {BADGE_GRADIENT_FIRST, BADGE_LIMIT} from '../../constants';
+import {removeUserBadge} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
-import {getUniversityBadge, normalize, removeUserBadge} from '../../utils';
+import {ScreenType, UniversityBadgeDisplayType} from '../../types';
+import {
+  badgesToDisplayBadges,
+  getUniversityBadge,
+  normalize,
+} from '../../utils';
 
 interface BadgeDetailModalProps {
   userXId: string | undefined;
@@ -34,35 +38,24 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
     userXId ? state.userX[screenType][userXId] : state.user,
   );
   const navigation = useNavigation();
-  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
-    [],
-  );
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
+  >([]);
+  const atLimit = badges.length >= BADGE_LIMIT;
 
   useEffect(() => {
-    let badgesWithImage = [];
-    badges.forEach((e) => {
-      const uniData = BADGE_DATA[e.university];
-      const categoryData = uniData.filter((u) => {
-        return u.title === e.category;
-      });
-      const badgeData = categoryData[0].data.filter((c) => {
-        return c.badgeName === e.name;
-      });
-      badgeData.forEach((c) => {
-        const obj = {...e, badgeImage: c.badgeImage};
-        badgesWithImage.push(obj);
-      });
-    });
-    setTimeout(() => {
-      setSelectedBadgesWithImage(badgesWithImage);
-    }, 250);
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
   }, [badges]);
 
   const removeBadgeCell = async (badgeName: string) => {
-    await removeUserBadge(badges, badgeName, user.userId, dispatch);
+    dispatch(removeUserBadge(badgeName, user.userId));
   };
 
-  const badgeEditCell = ({item: {id, name, badgeImage}}) => {
+  const badgeEditCell = ({
+    item: {id, name, img},
+  }: {
+    item: UniversityBadgeDisplayType;
+  }) => {
     return (
       <TouchableOpacity
         style={styles.badgeCellContainerStyles}
@@ -71,7 +64,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
           navigation.navigate('MutualBadgeHolders', {
             badge_id: id,
             badge_title: name,
-            badge_img: badgeImage,
+            badge_img: img,
           });
         }}>
         <View
@@ -88,7 +81,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             <Image
               resizeMode="cover"
               style={styles.badgeImageStyles}
-              source={badgeImage}
+              source={img}
             />
           </LinearGradient>
           {isEditable && (
@@ -121,10 +114,20 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
   };
 
   const modalHeader = () => {
-    const heading = isEditable ? 'Edit your badges!' : userFullName;
-    const subheading = isEditable
-      ? 'Add or delete your badges'
-      : 'View badges to discover groups!';
+    let heading = '';
+    let subheading = '';
+    if (isEditable) {
+      if (atLimit) {
+        heading = 'You have reached your badge limit';
+        subheading = 'Remove a badge if you wish to add more';
+      } else {
+        heading = 'Edit your badges!';
+        subheading = 'Add or delete your badges';
+      }
+    } else {
+      heading = userFullName!;
+      subheading = 'View badges to discover groups!';
+    }
     return (
       <View>
         <Text style={styles.modalHeadingStyles}>{heading}</Text>
@@ -155,7 +158,7 @@ const BadgeDetailView: React.FC<BadgeDetailModalProps> = ({
             <FlatList
               contentContainerStyle={styles.modalListStyles}
               scrollEnabled={false}
-              data={selectedBadgesWithImage}
+              data={displayBadges}
               numColumns={3}
               renderItem={badgeEditCell}
               keyExtractor={(item) => item.id.toString()}
@@ -228,6 +231,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(17),
     lineHeight: normalize(20.29),
     textAlign: 'center',
+    marginVertical: normalize(10),
+    marginTop: normalize(20),
   },
   modalSubheadingStyles: {
     fontWeight: '600',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 0ceb8542..cde5b2e0 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -7,8 +7,8 @@ import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
-import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
+import BigPlusIcon from '../../assets/icons/plus-icon-white.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD} from '../../constants/strings';
diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
new file mode 100644
index 00000000..8e68dc46
--- /dev/null
+++ b/src/components/profile/ProfileBadges.tsx
@@ -0,0 +1,148 @@
+import {useNavigation} from '@react-navigation/core';
+import React, {FC, useEffect, useState} from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {BadgeIcon} from '..';
+import PlusIconImage from '../../assets/icons/plus-icon-thin.svg';
+import {BADGE_LIMIT} from '../../constants';
+import {RootState} from '../../store/rootReducer';
+import {ScreenType, UniversityBadgeDisplayType} from '../../types';
+import {badgesToDisplayBadges, normalize} from '../../utils';
+import BadgeDetailView from '../common/BadgeDetailView';
+
+interface ProfileBadgesProps {
+  userXId: string | undefined;
+  screenType: ScreenType;
+}
+
+const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
+  const navigation = useNavigation();
+  const {badges, name, university} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId].profile : state.user.profile,
+  );
+  const [displayBadges, setDisplayBadges] = useState<
+    UniversityBadgeDisplayType[]
+  >([]);
+  const [isEditBadgeModalVisible, setIsEditBadgeModalVisible] = useState(false);
+  const isOwnProfile = userXId === undefined;
+
+  useEffect(() => {
+    setDisplayBadges(badgesToDisplayBadges(badges, university));
+  }, [badges]);
+
+  const PlusIcon: FC = () => (
+    <TouchableOpacity
+      onPress={() => navigation.navigate('BadgeSelection', {editing: true})}>
+      <PlusIconImage style={styles.plus} />
+    </TouchableOpacity>
+  );
+
+  const CloseIcon: FC = () => (
+    <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
+      <PlusIconImage style={styles.close} />
+    </TouchableOpacity>
+  );
+
+  return (
+    <>
+      {/* Tutorial text */}
+      {displayBadges.length === 0 && isOwnProfile && (
+        <>
+          <Text style={styles.title}>Badges</Text>
+          <Text style={styles.body}>
+            Proudly represent your team, club, or organization!
+          </Text>
+        </>
+      )}
+      {displayBadges.length === 0 && isOwnProfile && (
+        // Grey circle placeholders
+        <ScrollView
+          contentContainerStyle={styles.badgeContainer}
+          scrollEnabled={false}
+          horizontal>
+          <PlusIcon />
+          {Array(BADGE_LIMIT)
+            .fill(0)
+            .map(() => (
+              <View style={[styles.grey, styles.circle]} />
+            ))}
+        </ScrollView>
+      )}
+      {displayBadges.length !== 0 && (
+        // Populating actual badges
+        <ScrollView
+          contentContainerStyle={styles.badgeContainer}
+          scrollEnabled={false}
+          horizontal>
+          {/* Actual badges */}
+          {displayBadges.map((displayBadge) => (
+            <BadgeIcon key={displayBadge.id} badge={displayBadge} />
+          ))}
+          {/* Plus icon */}
+          {displayBadges.length < BADGE_LIMIT && isOwnProfile && <PlusIcon />}
+          {/* Empty placeholders for space-between styling */}
+          {Array(BADGE_LIMIT + 1)
+            .fill(0)
+            .splice(displayBadges.length + 1, BADGE_LIMIT)
+            .map(() => (
+              <View style={styles.circle} />
+            ))}
+          {/* X button */}
+          {displayBadges.length === BADGE_LIMIT && isOwnProfile && (
+            <CloseIcon />
+          )}
+        </ScrollView>
+      )}
+      {isEditBadgeModalVisible && (
+        <BadgeDetailView
+          userXId={userXId}
+          screenType={screenType}
+          isEditable={isOwnProfile}
+          userFullName={name}
+          setBadgeViewVisible={setIsEditBadgeModalVisible}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontWeight: '600',
+    fontSize: normalize(13.5),
+    lineHeight: normalize(18),
+  },
+  body: {
+    fontSize: normalize(13.5),
+    lineHeight: normalize(17),
+    marginBottom: 10,
+  },
+  badgeContainer: {
+    width: '100%',
+    justifyContent: 'space-between',
+    marginTop: 10,
+    marginBottom: 15,
+  },
+  circle: {
+    width: normalize(31),
+    height: normalize(31),
+    borderRadius: normalize(31) / 2,
+  },
+  grey: {
+    backgroundColor: '#c4c4c4',
+  },
+  plus: {
+    width: normalize(31),
+    height: normalize(31),
+    color: 'black',
+  },
+  close: {
+    width: normalize(31),
+    height: normalize(31),
+    color: 'grey',
+    transform: [{rotate: '45deg'}],
+  },
+});
+
+export default ProfileBadges;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 8743acfb..c0ee508a 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -20,6 +20,7 @@ import {
 import {canViewProfile} from '../../utils/users';
 import {FriendsButton} from '../common';
 import {MessageButton} from '../messages';
+import ProfileBadges from './ProfileBadges';
 import ToggleButton from './ToggleButton';
 
 interface ProfileBodyProps {
@@ -65,6 +66,7 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
 
   return (
     <View onLayout={onLayout} style={styles.container}>
+      <ProfileBadges {...{userXId, screenType}} />
       <Text style={styles.username}>{`@${username}`}</Text>
       {biography.length > 0 && (
         <Text style={styles.biography}>{`${biography}`}</Text>
@@ -137,7 +139,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
   },
   container: {
-    paddingVertical: '1%',
     paddingHorizontal: 18,
     backgroundColor: 'white',
   },
diff --git a/src/components/profile/index.ts b/src/components/profile/index.ts
index c544c3f2..faf273d9 100644
--- a/src/components/profile/index.ts
+++ b/src/components/profile/index.ts
@@ -9,3 +9,4 @@ export {default as ProfileMoreInfoDrawer} from './ProfileMoreInfoDrawer';
 export {default as MomentMoreInfoDrawer} from './MomentMoreInfoDrawer';
 export {default as UniversityIcon} from './UniversityIcon';
 export {default as TaggAvatar} from './TaggAvatar';
+export {default as ProfileBadges} from './ProfileBadges';
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
index 8f576a43..616bac93 100644
--- a/src/components/suggestedPeople/BadgeIcon.tsx
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -1,24 +1,17 @@
 import {useNavigation} from '@react-navigation/core';
 import React from 'react';
-import {
-  Image,
-  ImageSourcePropType,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import {Image, StyleProp, StyleSheet, ViewStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import {UniversityBadge} from '../../types';
+import {UniversityBadgeDisplayType} from '../../types';
 import {normalize} from '../../utils';
 
 interface BadgeIconProps {
-  badge: UniversityBadge;
-  img: ImageSourcePropType;
+  badge: UniversityBadgeDisplayType;
   style?: StyleProp<ViewStyle>;
 }
 
-const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, style}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
@@ -27,7 +20,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
         navigation.navigate('MutualBadgeHolders', {
           badge_id: badge.id,
           badge_title: badge.name,
-          badge_img: img,
+          badge_img: badge.img,
         });
       }}>
       <LinearGradient
@@ -36,7 +29,7 @@ const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
         angle={154.72}
         angleCenter={{x: 0.5, y: 0.5}}
         style={styles.badgeBackground}>
-        <Image source={img} style={styles.icon} />
+        <Image source={badge.img} style={styles.icon} />
       </LinearGradient>
     </TouchableOpacity>
   );
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 34bb96d4..ecdf4f35 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1,3 +1,2 @@
 export {default as MutualFriends} from './MutualFriends';
-export {default as SPTaggsBar} from './SPTaggsBar';
 export {default as BadgeIcon} from './BadgeIcon';
diff --git a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
index 267355f3..2c177e69 100644
--- a/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/legacy/BadgesDropdown.tsx
@@ -1,18 +1,15 @@
 import React, {useEffect, useState} from 'react';
-import {ImageSourcePropType, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated, {Easing} from 'react-native-reanimated';
 import {BadgeIcon, UniversityIcon} from '../..';
-import {UniversityBadge, UniversityType} from '../../../types';
+import {UniversityBadgeDisplayType, UniversityType} from '../../../types';
 import {normalize} from '../../../utils';
 import UniversityIconClicked from '../UniversityIconClicked';
 
 interface BadgesDropdownProps {
   university: UniversityType;
-  localBadges: {
-    badge: UniversityBadge;
-    img: ImageSourcePropType;
-  }[];
+  localBadges: UniversityBadgeDisplayType[];
 }
 
 const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
@@ -92,7 +89,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
         )}
       </TouchableOpacity>
       {localBadges &&
-        localBadges.map(({badge, img}, index) => (
+        localBadges.map((badge, index) => (
           <Animated.View
             key={badge.id}
             style={[
@@ -102,7 +99,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 zIndex: -1 * badge.id,
               },
             ]}>
-            <BadgeIcon badge={badge} img={img} />
+            <BadgeIcon badge={badge} />
           </Animated.View>
         ))}
     </Animated.View>
diff --git a/src/components/suggestedPeople/SPTaggsBar.tsx b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx
index 3ab33da1..3273f88d 100644
--- a/src/components/suggestedPeople/SPTaggsBar.tsx
+++ b/src/components/suggestedPeople/legacy/SPTaggsBar.tsx
@@ -2,12 +2,12 @@ import React, {useEffect, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
-import {INTEGRATED_SOCIAL_LIST, SOCIAL_LIST} from '../../constants';
-import {getLinkedSocials} from '../../services';
-import {loadIndividualSocial, updateSocial} from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
-import {ScreenType} from '../../types';
-import Tagg from '../taggs/Tagg';
+import {INTEGRATED_SOCIAL_LIST, SOCIAL_LIST} from '../../../constants';
+import {getLinkedSocials} from '../../../services';
+import {loadIndividualSocial, updateSocial} from '../../../store/actions';
+import {RootState} from '../../../store/rootReducer';
+import {ScreenType} from '../../../types';
+import Tagg from '../../taggs/Tagg';
 
 const {View, ScrollView} = Animated;
 interface TaggsBarProps {
@@ -66,7 +66,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
-            whiteRing={true}
             screenType={screenType}
           />,
         );
@@ -84,7 +83,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               setSocialDataNeedUpdate={handleSocialUpdate}
               userXId={userXId}
               user={user}
-              whiteRing={true}
               screenType={screenType}
             />,
           );
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 4a58bacb..0e0311c5 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -5,13 +5,8 @@ import {useSelector} from 'react-redux';
 import PurpleRingPlus from '../../assets/icons/purple_ring+.svg';
 import PurpleRing from '../../assets/icons/purple_ring.svg';
 import RingPlus from '../../assets/icons/ring+.svg';
-import WhiteRing from '../../assets/icons/ring-white.svg';
 import Ring from '../../assets/icons/ring.svg';
-import {
-  INTEGRATED_SOCIAL_LIST,
-  SOCIAL_ICON_SIZE_ADJUSTMENT,
-  TAGG_RING_DIM,
-} from '../../constants';
+import {INTEGRATED_SOCIAL_LIST, TAGG_RING_DIM} from '../../constants';
 import {
   ERROR_LINK,
   ERROR_UNABLE_TO_FIND_PROFILE,
@@ -24,8 +19,8 @@ import {
 } from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType, UserType} from '../../types';
-import {canViewProfile, normalize} from '../../utils';
-import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
+import {canViewProfile} from '../../utils';
+import {SocialIcon, SocialLinkModal} from '../common';
 
 interface TaggProps {
   social: string;
@@ -35,7 +30,6 @@ interface TaggProps {
   setSocialDataNeedUpdate: (social: string, username: string) => void;
   userXId: string | undefined;
   user: UserType;
-  whiteRing: boolean | undefined;
   screenType: ScreenType;
 }
 
@@ -48,7 +42,6 @@ const Tagg: React.FC<TaggProps> = ({
   userXId,
   screenType,
   user,
-  whiteRing,
 }) => {
   const navigation = useNavigation();
   const state = useSelector((s: RootState) => s);
@@ -107,9 +100,6 @@ const Tagg: React.FC<TaggProps> = ({
 
   const pickTheRightRingHere = () => {
     if (youMayPass) {
-      if (whiteRing) {
-        return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
-      }
       if (social === 'Tagg') {
         return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
       } else {
@@ -139,7 +129,7 @@ const Tagg: React.FC<TaggProps> = ({
 
   return (
     <>
-      {(userXId && !isLinked) || (whiteRing && !userXId) ? (
+      {userXId && !isLinked ? (
         <Fragment />
       ) : (
         <>
@@ -149,27 +139,13 @@ const Tagg: React.FC<TaggProps> = ({
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}
           />
-          <View style={whiteRing ? styles.spcontainer : styles.container}>
+          <View style={styles.container}>
             <TouchableOpacity
               style={styles.iconTap}
               onPress={modalOrAuthBrowserOrPass}>
               <SocialIcon style={styles.icon} social={social} whiteRing />
               {pickTheRightRingHere()}
             </TouchableOpacity>
-            {!whiteRing && (
-              <View style={styles.smallIconContainer}>
-                <SmallSocialIcon
-                  style={[
-                    styles.smallIcon,
-                    {
-                      height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
-                      width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
-                    },
-                  ]}
-                  social={social}
-                />
-              </View>
-            )}
           </View>
         </>
       )}
@@ -178,19 +154,10 @@ const Tagg: React.FC<TaggProps> = ({
 };
 
 const styles = StyleSheet.create({
-  spcontainer: {
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginRight: 15,
-    marginLeft: 19,
-    height: normalize(60),
-  },
   container: {
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginRight: 15,
-    marginLeft: 15,
-    height: normalize(90),
+    marginHorizontal: 15,
   },
   iconTap: {
     justifyContent: 'center',
@@ -202,17 +169,6 @@ const styles = StyleSheet.create({
     borderRadius: 30,
     position: 'absolute',
   },
-  smallIconContainer: {
-    height: 20,
-    width: 20,
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-    bottom: 0,
-  },
-  smallIcon: {
-    borderRadius: 1000,
-  },
 });
 
 export default Tagg;
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index a7e8fc7a..7076ffaf 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -82,7 +82,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
-            whiteRing={false}
           />,
         );
         i++;
@@ -100,7 +99,6 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               userXId={userXId}
               screenType={screenType}
               user={user}
-              whiteRing={false}
             />,
           );
           i++;