basic styling for edit badges button

1 files changed, 41 insertions, 8 deletions

diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 6c298efb..eb8494f4 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -6,6 +6,7 @@ import {
   ImageBackground,
   StatusBar,
   StyleSheet,
+  View,
 } from 'react-native';
 import {Text} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -13,7 +14,7 @@ import ImagePicker from 'react-native-image-crop-picker';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {UniversityBadge} from '../../types';
-import {TaggSquareButton} from '../../components';
+import {TaggSquareButton, UniversityIcon} from '../../components';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {SP_HEIGHT, SP_WIDTH} from '../../constants';
 import {ERROR_UPLOAD, SUCCESS_PIC_UPLOAD} from '../../constants/strings';
@@ -24,6 +25,7 @@ import {
 import {uploadedSuggestedPeoplePhoto} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import BackArrow from '../../assets/icons/back-arrow.svg';
 
 const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
   const {editing} = route.params;
@@ -140,19 +142,28 @@ const SuggestedPeopleUploadPictureScreen: React.FC = ({route}) => {
           </TouchableOpacity>
         )}
         {editing && (
-          <TouchableOpacity
-            onPress={() => {
-              navigation.push('BadgeSelection', {selectedBadges});
-            }}>
-            <Text>edit badges ---></Text>
-          </TouchableOpacity>
+          <View style={styles.editBadgesMainContainer}>
+            <View style={styles.editBadgesSubContainer}>
+              <UniversityIcon
+                university="brown"
+                imageStyle={{width: normalize(16), height: normalize(20)}}
+              />
+              <Text style={styles.editBadgesText}>Edit Badges</Text>
+            </View>
+            <TouchableOpacity
+              onPress={() => {
+                navigation.push('BadgeSelection', {selectedBadges});
+              }}>
+              <BackArrow style={styles.rightArrow} />
+            </TouchableOpacity>
+          </View>
         )}
         {image && (
           <TaggSquareButton
             onPress={uploadImage}
             title={'Done'}
             buttonStyle={'normal'}
-            buttonColor={'purple'}
+            buttonColor={editing ? 'blue' : 'purple'}
             labelColor={'white'}
             style={styles.buttonStyle}
             labelStyle={styles.buttonLabel}
@@ -216,5 +227,27 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 18,
   },
+  editBadgesMainContainer: {
+    height: 30,
+    flexDirection: 'row',
+    width: SCREEN_WIDTH * 0.6,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+  },
+  editBadgesSubContainer: {flexDirection: 'row', alignItems: 'center'},
+  editBadgesText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: normalize(14),
+    lineHeight: normalize(16.71),
+    textAlign: 'left',
+    marginLeft: 18,
+  },
+  rightArrow: {
+    width: 20,
+    height: 20,
+    alignSelf: 'center',
+  },
 });
 export default SuggestedPeopleUploadPictureScreen;