From c17bd1e936409d32dd272fb13856e8b7eb98d2dc Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 11 Mar 2021 08:55:30 -0800
Subject: basic styling for edit badges button

---
 src/components/common/TaggSquareButton.tsx         | 11 +++--
 .../SuggestedPeopleUploadPictureScreen.tsx         | 49 ++++++++++++++++++----
 2 files changed, 49 insertions(+), 11 deletions(-)

(limited to 'src')

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;
-- 
cgit v1.2.3-70-g09d2