2 files changed, 27 insertions, 5 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 86d40f1b..e75ae949 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -309,9 +309,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           isBlocked,
         }}
       />
-      <View style={styles.taggsbarContainer}>
-        <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
-      </View>
+      <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
       <View style={styles.momentsContainer}>
         {userXId && moments.length === 0 && (
           <View style={styles.plusIconContainer}>
@@ -418,7 +416,6 @@ const styles = StyleSheet.create({
     color: 'gray',
     marginVertical: '8%',
   },
-  taggsbarContainer: {paddingHorizontal: 15},
 });
 
 export default Content;
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index daa83eb3..90f5da48 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -1,10 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {StyleSheet, TouchableOpacity} from 'react-native';
+import {Alert, Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import PersonOutline from '../../assets/ionicons/person-outline.svg';
 import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
+import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {GenericMoreInfoDrawer} from '../common';
@@ -25,6 +26,9 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
     user: {userId, username},
   } = useSelector((state: RootState) => state.user);
   const isOwnProfile = !userXId || userXName === username;
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  );
 
   const goToEditProfile = () => {
     navigation.push('EditProfile', {
@@ -34,6 +38,15 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
     setIsOpen(false);
   };
 
+  const goToUpdateSPProfile = () => {
+    if (suggested_people_linked === 0) {
+      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
+    } else {
+      navigation.push('UpdateSPPicture');
+      setIsOpen(false);
+    }
+  };
+
   const onBlockUnblock = () => {
     handleBlockUnblock(() => setIsOpen(false));
   };
@@ -66,6 +79,14 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
           showIcons={true}
           textColor={'black'}
           buttons={[
+            [
+              'Edit Suggested',
+              goToUpdateSPProfile,
+              <Image
+                source={require('../../assets/ionicons/suggested-outlined.png')}
+                style={styles.image}
+              />,
+            ],
             ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
           ]}
         />
@@ -109,6 +130,10 @@ const styles = StyleSheet.create({
     right: '5%',
     zIndex: 1,
   },
+  image: {
+    width: 25,
+    height: 25,
+  },
 });
 
 export default ProfileMoreInfoDrawer;