diff options
| -rw-r--r-- | src/components/common/TaggSquareButton.tsx | 11 | ||||
| -rw-r--r-- | src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx | 49 |
2 files changed, 49 insertions, 11 deletions
diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 817a2690..1a1c33b3 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -9,14 +9,17 @@ import { ViewStyle, } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; -import {BACKGROUND_GRADIENT_MAP, TAGG_PURPLE} from '../../constants'; +import { + BACKGROUND_GRADIENT_MAP, + TAGG_LIGHT_BLUE, + TAGG_PURPLE, +} from '../../constants'; import {normalize, SCREEN_WIDTH} from '../../utils'; - interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; title: string; buttonStyle: 'normal' | 'large' | 'gradient'; - buttonColor: 'purple' | 'white'; + buttonColor: 'purple' | 'white' | 'blue'; labelColor: 'white' | 'blue'; style?: ViewStyle; labelStyle?: TextStyle; @@ -27,6 +30,8 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { switch (props.buttonColor) { case 'purple': return {backgroundColor: TAGG_PURPLE}; + case 'blue': + return {backgroundColor: TAGG_LIGHT_BLUE}; case 'white': default: return {backgroundColor: 'white'}; 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; |