Merge pull request #281 from shravyaramesh/badges-people-screen

[TMA-632] Users holding the same badge

3 files changed, 34 insertions, 15 deletions

diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 95aef8b9..48cfe3dc 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import {StyleSheet, ViewProps} from 'react-native';
+import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
 import {Image, Text, View} from 'react-native-animatable';
 import {getUniversityClass, normalize} from '../../utils';
 
 export interface UniversityIconProps extends ViewProps {
   university: string;
-  university_class: number;
+  university_class?: number;
+  imageStyle?: StyleProp<ImageStyle>;
 }
 
 /**
@@ -15,6 +16,7 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
   style,
   university,
   university_class,
+  imageStyle,
 }) => {
   var universityIcon;
   switch (university) {
@@ -28,10 +30,12 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Image source={universityIcon} style={styles.icon} />
-      <Text style={styles.univClass}>
-        {getUniversityClass(university_class)}
-      </Text>
+      <Image source={universityIcon} style={[styles.icon, imageStyle]} />
+      {university_class && (
+        <Text style={styles.univClass}>
+          {getUniversityClass(university_class)}
+        </Text>
+      )}
     </View>
   );
 };
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index e888370e..1af815db 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/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index b0cfe5c6..6be8282b 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -1,7 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
+import {TextStyle, ViewStyle} from 'react-native';
 import {
   Image,
+  StyleProp,
   StyleSheet,
   Text,
   TouchableOpacity,
@@ -21,10 +23,11 @@ import {fetchUserX, normalize, userXInStore} from '../../utils';
 
 interface ExploreSectionUserProps extends ViewProps {
   user: ProfilePreviewType;
+  externalStyles?: Record<string, StyleProp<ViewStyle | TextStyle>>;
 }
 const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
   user,
-  style,
+  externalStyles,
 }) => {
   const {id, username, first_name, last_name} = user;
   const [avatar, setAvatar] = useState<string | null>(null);
@@ -59,7 +62,9 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
     });
   };
   return (
-    <TouchableOpacity style={[styles.container, style]} onPress={handlePress}>
+    <TouchableOpacity
+      style={[styles.container, externalStyles?.container]}
+      onPress={handlePress}>
       <LinearGradient
         colors={['#9F00FF', '#27EAE9']}
         useAngle
@@ -75,10 +80,12 @@ const ExploreSectionUser: React.FC<ExploreSectionUserProps> = ({
           style={styles.profile}
         />
       </LinearGradient>
-      <Text style={styles.name} numberOfLines={2}>
+      <Text style={[styles.name, externalStyles?.name]} numberOfLines={2}>
         {first_name} {last_name}
       </Text>
-      <Text style={styles.username} numberOfLines={1}>{`@${username}`}</Text>
+      <Text
+        style={[styles.username, externalStyles?.username]}
+        numberOfLines={1}>{`@${username}`}</Text>
     </TouchableOpacity>
   );
 };
@@ -89,7 +96,7 @@ const styles = StyleSheet.create({
     width: 100,
   },
   gradient: {
-    height: 60,
+    height: 62,
     aspectRatio: 1,
     borderRadius: 40,
     justifyContent: 'center',
@@ -104,13 +111,15 @@ const styles = StyleSheet.create({
   name: {
     fontWeight: '600',
     flexWrap: 'wrap',
-    fontSize: normalize(16),
+    fontSize: normalize(14),
+    lineHeight: normalize(15),
     color: '#fff',
     textAlign: 'center',
   },
   username: {
-    fontWeight: '400',
-    fontSize: normalize(14),
+    fontWeight: '500',
+    fontSize: normalize(11),
+    lineHeight: normalize(15),
     color: '#fff',
   },
 });