styling, passing in title too

6 files changed, 80 insertions, 36 deletions

diff --git a/src/assets/icons/badges/football.png b/src/assets/icons/badges/football.png
new file mode 100644
index 00000000..2e8214b7
--- /dev/null
+++ b/src/assets/icons/badges/football.png
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 53073a9e..784e089c 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -21,7 +21,13 @@ const ExploreSection: React.FC<ExploreSectionProps> = ({title, users}) => {
         data={users}
         ListHeaderComponent={<View style={styles.padding} />}
         renderItem={({item: user}: {item: ProfilePreviewType}) => (
-          <ExploreSectionUser key={user.id} user={user} style={styles.user} />
+          <ExploreSectionUser
+            key={user.id}
+            user={user}
+            externalStyles={StyleSheet.create({
+              container: styles.user,
+            })}
+          />
         )}
         showsHorizontalScrollIndicator={false}
         horizontal
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 9b559800..5cbe55d6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -74,6 +74,7 @@ export type MainStackParams = {
   };
   MutualBadgeHolders: {
     badge_id: string;
+    badge_title: string;
   };
 };
 
diff --git a/src/screens/suggestedPeople/MutualBadgeHolders.tsx b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
index 2e2c452a..9742d72c 100644
--- a/src/screens/suggestedPeople/MutualBadgeHolders.tsx
+++ b/src/screens/suggestedPeople/MutualBadgeHolders.tsx
@@ -4,12 +4,12 @@ import React, {useEffect, useState} from 'react';
 import {getMutualBadgeHolders} from '../../services';
 import {ProfilePreviewType} from '../../types';
 import {MainStackParams} from '../../routes/main/MainStackNavigator';
-import {Text, View} from 'react-native-animatable';
+import {Image, Text, View} from 'react-native-animatable';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {SCREEN_HEIGHT, SCREEN_WIDTH, isIPhoneX, normalize} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
-import {FlatList, ScrollView} from 'react-native-gesture-handler';
+import {FlatList} from 'react-native-gesture-handler';
 import {StyleSheet, TouchableOpacity} from 'react-native';
 import ExploreSectionUser from '../../components/search/ExploreSectionUser';
 
@@ -32,12 +32,11 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
   route,
   navigation,
 }) => {
-  const {badge_id} = route.params;
+  const {badge_id, badge_title} = route.params;
   const [users, setUsers] = useState<ProfilePreviewType[] | undefined>([]);
 
   useEffect(() => {
     const getUsers = async (badge_id: string) => {
-      console.log('useEffect called to populate mutual badge holders users ');
       let localUsers:
         | ProfilePreviewType[]
         | undefined = await getMutualBadgeHolders(badge_id);
@@ -57,21 +56,25 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
             }}>
             <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
           </TouchableOpacity>
-          <LinearGradient
-            colors={['#4E3629', '#EC2027']}
-            useAngle={true}
-            angle={154.72}
-            angleCenter={{x: 0.5, y: 0.5}}
-            style={styles.badgeBackground}
-          />
-          {/* TODO: Insert image link according to badge_id passed.
-           * Awaiting final images from product
-           */}
+          <View style={styles.iconView}>
+            <LinearGradient
+              colors={['#4E3629', '#EC2027']}
+              useAngle={true}
+              angle={154.72}
+              angleCenter={{x: 0.5, y: 0.5}}
+              style={styles.badgeBackground}>
+              {/* TODO: Insert image link according to badge_id passed.
+               * Awaiting final images from product
+               */}
+              <Image
+                source={require('../../assets/icons/badges/football.png')}
+                style={{width: SCREEN_WIDTH * 0.1, height: SCREEN_WIDTH * 0.1}}
+              />
+            </LinearGradient>
+          </View>
           <View style={styles.headerContainer}>
-            <Text style={styles.heading}>Brown Football Badge</Text>
-            <Text style={styles.subHeading}>
-              See who else has the badge: Brown University Football!
-            </Text>
+            <Text style={styles.heading}>{badge_title}</Text>
+            <Text style={styles.subHeading}>See who else has this badge!</Text>
           </View>
           <FlatList
             data={users}
@@ -82,8 +85,7 @@ const MutualBadgeHolders: React.FC<MutualBadgeHoldersProps> = ({
                 <ExploreSectionUser
                   key={user.item.id}
                   user={user.item}
-                  style={{margin: 6}}
-                  // labelColor={{color: 'black'}}
+                  externalStyles={exploreUserStyle}
                 />
               );
             }}
@@ -109,9 +111,9 @@ const styles = StyleSheet.create({
   mainContentContainer: {
     backgroundColor: '#fff',
     width: SCREEN_WIDTH * 0.93,
-    height: SCREEN_HEIGHT * 0.6,
+    height: SCREEN_HEIGHT * 0.64,
     alignSelf: 'center',
-    bottom: '10%',
+    bottom: '2.5%',
     borderColor: '#fff',
     borderWidth: 1,
     borderRadius: 5,
@@ -124,49 +126,82 @@ const styles = StyleSheet.create({
     top: '2%',
   },
   badgeBackground: {
-    width: 80,
-    height: 80,
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
     borderRadius: 50,
     borderColor: 'transparent',
     borderWidth: 1,
     alignSelf: 'center',
-    top: -40,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconView: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: SCREEN_WIDTH * 0.2,
+    height: SCREEN_WIDTH * 0.2,
+    alignSelf: 'center',
+    top: -SCREEN_WIDTH * 0.1,
   },
   headerContainer: {
-    top: -20,
+    top: '-5%',
     width: '100%',
-    height: 50,
+    height: '9%',
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'space-evenly',
   },
   heading: {
-    fontSize: 17,
+    fontSize: normalize(17),
     fontWeight: '600',
-    lineHeight: 20,
+    lineHeight: normalize(20),
     color: '#000',
   },
   subHeading: {
-    fontSize: 11,
+    fontSize: normalize(11),
     fontWeight: '600',
-    lineHeight: 15,
+    lineHeight: normalize(15),
     color: '#828282',
   },
   columnWrapperStyle: {
     width: SCREEN_WIDTH * 0.85,
     flexDirection: 'row',
+    flexGrow: 0,
     alignSelf: 'center',
     justifyContent: 'space-between',
+    marginBottom: '8%',
   },
   flatlistContainer: {
-    width: SCREEN_WIDTH * 0.93,
+    width: SCREEN_WIDTH * 0.85,
     alignSelf: 'center',
     flexDirection: 'column',
+    top: '-1%',
   },
   flatlistContentContainer: {
-    width: SCREEN_WIDTH * 0.93,
+    width: SCREEN_WIDTH * 0.85,
     paddingBottom: 20,
     alignSelf: 'center',
   },
 });
+
+const exploreUserStyle = StyleSheet.create({
+  container: {},
+  name: {
+    fontWeight: '600',
+    flexWrap: 'wrap',
+    fontSize: normalize(12),
+    lineHeight: normalize(15),
+    color: '#000',
+    textAlign: 'center',
+  },
+  username: {
+    fontWeight: '500',
+    fontSize: normalize(10),
+    lineHeight: normalize(15),
+    color: '#000',
+  },
+});
 export default MutualBadgeHolders;
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 972484ab..16b5ae9b 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -98,7 +98,10 @@ const SPBody: React.FC<SPBodyProps> = ({
             borderColor: 'transparent',
           }}
           onPress={() =>
-            navigation.navigate('MutualBadgeHolders', {badge_id: 40})
+            navigation.navigate('MutualBadgeHolders', {
+              badge_id: 40,
+              badge_title: 'Brown University Football',
+            })
           }>
           {/* <UniversityIcon university="brown" /> */}
         </TouchableOpacity>
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index e67a897d..cbbc762a 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -112,7 +112,6 @@ export const getMutualBadgeHolders = async (badgeId: string) => {
     console.log('response: ', response);
     if (response.status === 200) {
       const data: ProfilePreviewType[] = await response.json();
-      console.log('users::: ', data);
       return data;
     } else {
       return undefined;