diff options
| -rw-r--r-- | src/components/profile/Friends.tsx | 86 | ||||
| -rw-r--r-- | src/components/profile/ProfilePreview.tsx | 11 |
2 files changed, 53 insertions, 44 deletions
diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx index c1aa5c76..9b8b227c 100644 --- a/src/components/profile/Friends.tsx +++ b/src/components/profile/Friends.tsx @@ -24,36 +24,38 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => { const {user: loggedInUser = NO_USER} = state; return ( - <ScrollView - keyboardShouldPersistTaps={'always'} - stickyHeaderIndices={[4]} - style={styles.scrollView} - contentContainerStyle={styles.scrollViewContent} - showsVerticalScrollIndicator={false}> + <> <View style={styles.subheader}> <Text style={styles.subheaderText}>Friends</Text> </View> - {result.map((profilePreview) => ( - <View key={profilePreview.id} style={styles.container}> - <View style={styles.friend}> - <ProfilePreview - {...{profilePreview}} - previewType={'Friend'} - screenType={screenType} - /> + <ScrollView + keyboardShouldPersistTaps={'always'} + stickyHeaderIndices={[4]} + style={styles.scrollView} + contentContainerStyle={styles.scrollViewContent} + showsVerticalScrollIndicator={false}> + {result.map((profilePreview) => ( + <View key={profilePreview.id} style={styles.container}> + <View style={styles.friend}> + <ProfilePreview + {...{profilePreview}} + previewType={'Friend'} + screenType={screenType} + /> + </View> + {loggedInUser.userId === userId && ( + <TouchableOpacity + style={styles.button} + onPress={() => + handleUnfriend(screenType, profilePreview, dispatch, state) + }> + <Text style={styles.buttonTitle}>Unfriend</Text> + </TouchableOpacity> + )} </View> - {loggedInUser.userId === userId && ( - <TouchableOpacity - style={styles.button} - onPress={() => - handleUnfriend(screenType, profilePreview, dispatch, state) - }> - <Text style={styles.buttonTitle}>Unfriend</Text> - </TouchableOpacity> - )} - </View> - ))} - </ScrollView> + ))} + </ScrollView> + </> ); }; @@ -62,40 +64,46 @@ const styles = StyleSheet.create({ flexDirection: 'column', alignSelf: 'center', width: SCREEN_WIDTH * 0.85, + height: SCREEN_HEIGHT, }, scrollViewContent: { alignSelf: 'center', paddingBottom: SCREEN_HEIGHT / 15, width: SCREEN_WIDTH * 0.85, + height: SCREEN_HEIGHT, marginTop: '1%', }, - container: { + header: {flexDirection: 'row'}, + subheader: { alignSelf: 'center', - flexDirection: 'row', - justifyContent: 'space-between', width: SCREEN_WIDTH * 0.85, - height: '50%', - alignItems: 'center', - marginBottom: '1%', + marginVertical: '3%', }, - header: {flexDirection: 'row'}, - subheader: {width: '100%', marginTop: '3%'}, subheaderText: { color: '#828282', fontSize: normalize(12), fontWeight: '600', lineHeight: normalize(14.32), }, + container: { + alignSelf: 'center', + flexDirection: 'row', + justifyContent: 'space-between', + width: '100%', + height: normalize(42), + alignItems: 'center', + marginBottom: '5%', + }, friend: { - marginVertical: 10, alignSelf: 'center', + height: '100%', }, button: { alignSelf: 'center', justifyContent: 'center', alignItems: 'center', width: '100%', - height: '35%', + height: '55%', borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, borderRadius: 2, @@ -107,9 +115,9 @@ const styles = StyleSheet.create({ padding: 0, fontSize: normalize(11), fontWeight: '700', - lineHeight: normalize(14), - letterSpacing: 0.5, - paddingHorizontal: '3.5%', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '3.8%', }, }); diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index cbee368b..455c4f56 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -318,12 +318,13 @@ const styles = StyleSheet.create({ width: SCREEN_WIDTH * 0.6, }, friendAvatar: { - height: normalize(44), - width: normalize(44), + height: '100%', + aspectRatio: 1, marginRight: 15, - borderRadius: 20, + borderRadius: 50, }, friendNameContainer: { + height: '100%', justifyContent: 'space-evenly', alignSelf: 'stretch', }, @@ -331,13 +332,13 @@ const styles = StyleSheet.create({ fontSize: normalize(14), fontWeight: '500', color: '#000', - letterSpacing: 0.3, + letterSpacing: normalize(0.1), }, friendName: { fontSize: normalize(12), fontWeight: '400', color: '#6C6C6C', - letterSpacing: 0.1, + letterSpacing: normalize(0.1), }, }); |