styling explore section user

1 files changed, 17 insertions, 8 deletions

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',
   },
 });