2 files changed, 31 insertions, 4 deletions
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index a23d7736..ff32a464 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -11,7 +11,7 @@ import {
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomDrawer} from '.';
 import {TAGG_LIGHT_BLUE} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 // conforms the JSX onPress attribute type
 type OnPressHandler = (event: GestureResponderEvent) => void;
@@ -75,8 +75,10 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 20,
   },
   panelButtonTitle: {
-    fontSize: 18,
-    fontWeight: 'bold',
+    fontSize: 17,
+    fontWeight: '600',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
   },
   icon: {
     height: 25,
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;