From 1974aac0a9c6df9f34d3236c7f70f84f9d766b91 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 11:46:40 -0800 Subject: Created two new profile preview types --- src/components/index.ts | 2 ++ src/components/profile/ProfilePreview.tsx | 59 +++++++++++++++++++++++++++++++ src/components/suggestedPeople/index.ts | 1 + 3 files changed, 62 insertions(+) create mode 100644 src/components/suggestedPeople/index.ts (limited to 'src') diff --git a/src/components/index.ts b/src/components/index.ts index 46a7773f..0a7c189b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -5,3 +5,5 @@ export * from './search'; export * from './taggs'; export * from './comments'; export * from './moments'; +export * from './suggestedPeople'; + diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index fad3ec09..cdbf2dab 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -188,6 +188,17 @@ const ProfilePreview: React.FC = ({ usernameStyle = styles.friendUsername; nameStyle = styles.friendName; break; + case 'Suggested People Drawer': + containerStyle = styles.suggestedPeopleContainer; + avatarStyle = styles.suggestedPeopleAvatar; + nameContainerStyle = styles.suggestedPeopleNameContainer; + usernameToDisplay = '@' + username; + usernameStyle = styles.suggestedPeopleUsername; + nameStyle = styles.suggestedPeopleName; + break; + case 'Suggested People Screen': + avatarStyle = styles.suggestedPeopleScreenAvatar; + break; default: containerStyle = styles.searchResultContainer; avatarStyle = styles.searchResultAvatar; @@ -229,6 +240,16 @@ const ProfilePreview: React.FC = ({ {first_name.concat(' ', last_name)} )} + {previewType === 'Suggested People Drawer' && ( + <> + + {first_name} {last_name} + + {`@${username}`} + + )} ); @@ -340,6 +361,44 @@ const styles = StyleSheet.create({ color: '#6C6C6C', letterSpacing: normalize(0.1), }, + suggestedPeopleContainer: { + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + paddingRight: SCREEN_WIDTH * 0.03, + backgroundColor: 'transparent', + }, + suggestedPeopleAvatar: { + alignSelf: 'center', + height: normalize(60), + width: normalize(60), + borderRadius: 60, + }, + suggestedPeopleUsername: { + fontSize: normalize(10), + lineHeight: normalize(15), + fontWeight: '500', + color: '#828282', + textAlign: 'center', + }, + suggestedPeopleNameContainer: { + justifyContent: 'space-evenly', + alignSelf: 'stretch', + marginTop: 10, + }, + suggestedPeopleName: { + fontSize: normalize(12), + lineHeight: normalize(15), + fontWeight: '700', + color: '#3C3C3C', + textAlign: 'center', + }, + suggestedPeopleScreenAvatar: { + height: normalize(33.5), + width: normalize(33.5), + marginRight: 15, + borderRadius: 50, + }, }); export default ProfilePreview; diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts new file mode 100644 index 00000000..219ee2fe --- /dev/null +++ b/src/components/suggestedPeople/index.ts @@ -0,0 +1 @@ +export {default as MutualFriends} from './MutualFriends'; -- cgit v1.2.3-70-g09d2 From 1916dcf97b2942b2cbaf5afd3cadbdfcda6f1efb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 11:47:43 -0800 Subject: created mutual friends preview and drawer --- src/components/suggestedPeople/MutualFriends.tsx | 206 +++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 src/components/suggestedPeople/MutualFriends.tsx (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx new file mode 100644 index 00000000..91f72254 --- /dev/null +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -0,0 +1,206 @@ +import React, {useState} from 'react'; +import {SafeAreaView, StyleSheet, Text, View} from 'react-native'; +import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler'; +import {useSelector} from 'react-redux'; +import {ScreenType} from '../../types'; +import {BottomDrawer, TabsGradient} from '../../components'; +import {RootState} from '../../store/rootReducer'; +import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {ProfilePreview} from '../profile'; +import {normalize} from 'react-native-elements'; + +const MutualFriends: React.FC = () => { + const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d'; + + let {friends} = userXId + ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId]) + : useSelector((state: RootState) => state.friends); + + const friendsPreview = friends.slice(0, 5); + const username = '@' + 'username'; + const count = 4; + + const [drawerVisible, setDrawerVisible] = useState(false); + + return ( + <> + + + Mutual Friends + + {friendsPreview.map((profilePreview) => ( + + ))} + {friends && friends.length > 0 && ( + setDrawerVisible(true)}> + + + + {count} + + + )} + + + + + Mutual Friends + + {username} and you are both friends with + + + + + + {friends.map((profilePreview) => ( + + ))} + + + setDrawerVisible(false)}> + Cancel + + + + + + + + + ); +}; + +const styles = StyleSheet.create({ + background: { + backgroundColor: 'white', + height: '100%', + }, + body: { + marginTop: HeaderHeight, + width: SCREEN_WIDTH * 0.9, + height: SCREEN_HEIGHT * 0.08, + flexDirection: 'column', + justifyContent: 'space-around', + }, + title: { + fontSize: normalize(12), + lineHeight: normalize(14), + color: '#fff', + fontWeight: 'bold', + letterSpacing: normalize(0.1), + }, + mutualFriendsButton: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + plusSign: { + fontSize: normalize(16), + lineHeight: normalize(18), + color: '#fff', + fontWeight: 'bold', + letterSpacing: normalize(0.1), + }, + count: { + fontSize: normalize(13), + lineHeight: normalize(16), + color: '#fff', + fontWeight: 'bold', + letterSpacing: normalize(0.1), + }, + previewProfilesContainer: { + flexDirection: 'row', + alignItems: 'center', + }, + mainContainer: { + flexDirection: 'column', + backgroundColor: '#f9f9f9', + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT * 0.4, + borderTopRightRadius: normalize(13), + borderTopLeftRadius: normalize(13), + borderWidth: 0.5, + borderColor: '#fff', + }, + headerContainer: { + width: SCREEN_WIDTH + 2, + height: '28%', + borderTopRightRadius: normalize(13), + borderTopLeftRadius: normalize(13), + borderWidth: 1, + borderColor: '#fff', + backgroundColor: '#fff', + shadowColor: '#7D7D7D', + shadowOffset: {width: 3, height: 3}, + shadowRadius: 5, + shadowOpacity: 0.15, + marginBottom: 5.5, + alignSelf: 'center', + }, + headerTextContainer: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'flex-start', + height: '100%', + width: '90%', + alignSelf: 'center', + marginTop: '4%', + }, + headerTitle: { + fontSize: normalize(16), + fontWeight: '700', + lineHeight: normalize(20.29), + marginBottom: '0.5%', + letterSpacing: normalize(0.1), + }, + headerDescription: { + fontSize: normalize(13), + lineHeight: normalize(15), + fontWeight: '600', + color: '#828282', + paddingTop: '2%', + letterSpacing: normalize(0.05), + }, + scrollViewContainer: { + height: 130, + shadowColor: 'rgb(125, 125, 125)', + marginTop: '1%', + }, + scrollView: { + backgroundColor: '#F9F9F9', + height: '95%', + padding: 0, + marginHorizontal: '5%', + }, + cancelButton: { + backgroundColor: '#F0F0F0', + height: '50%', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + cancelButtonText: { + color: '#698DD3', + fontSize: normalize(17), + fontWeight: '700', + lineHeight: normalize(20), + letterSpacing: normalize(0.1), + }, +}); + +export default MutualFriends; -- cgit v1.2.3-70-g09d2 From d250fcf73c5636f8d53a1a0c996b52f27ea24395 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 12:44:03 -0800 Subject: cosmetic fixes - keeps all devices consistent --- src/components/profile/ProfilePreview.tsx | 2 +- src/components/suggestedPeople/MutualFriends.tsx | 30 +++++++++++------------- 2 files changed, 15 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index cdbf2dab..41792724 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -365,7 +365,7 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - paddingRight: SCREEN_WIDTH * 0.03, + paddingRight: 25, backgroundColor: 'transparent', }, suggestedPeopleAvatar: { diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index 91f72254..df4e3ccd 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -5,7 +5,7 @@ import {useSelector} from 'react-redux'; import {ScreenType} from '../../types'; import {BottomDrawer, TabsGradient} from '../../components'; import {RootState} from '../../store/rootReducer'; -import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {ProfilePreview} from '../profile'; import {normalize} from 'react-native-elements'; @@ -16,8 +16,8 @@ const MutualFriends: React.FC = () => { ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId]) : useSelector((state: RootState) => state.friends); - const friendsPreview = friends.slice(0, 5); - const username = '@' + 'username'; + const friendsPreview = friends.slice(0, 4); + const username = '@' + '12345678901234'; const count = 4; const [drawerVisible, setDrawerVisible] = useState(false); @@ -44,7 +44,7 @@ const MutualFriends: React.FC = () => { )} @@ -60,7 +60,8 @@ const MutualFriends: React.FC = () => { + horizontal + showsHorizontalScrollIndicator={false}> {friends.map((profilePreview) => ( { }; const styles = StyleSheet.create({ - background: { - backgroundColor: 'white', - height: '100%', - }, body: { - marginTop: HeaderHeight, width: SCREEN_WIDTH * 0.9, - height: SCREEN_HEIGHT * 0.08, + height: isIPhoneX() ? SCREEN_HEIGHT * 0.065 : SCREEN_HEIGHT * 0.08, flexDirection: 'column', - justifyContent: 'space-around', + justifyContent: 'flex-start', + marginBottom: isIPhoneX() ? 25 : 5, }, title: { fontSize: normalize(12), - lineHeight: normalize(14), + lineHeight: normalize(12), color: '#fff', fontWeight: 'bold', letterSpacing: normalize(0.1), + paddingBottom: '3.5%', }, mutualFriendsButton: { flexDirection: 'row', @@ -139,7 +137,7 @@ const styles = StyleSheet.create({ }, headerContainer: { width: SCREEN_WIDTH + 2, - height: '28%', + height: isIPhoneX() ? '28%' : '35%', borderTopRightRadius: normalize(13), borderTopLeftRadius: normalize(13), borderWidth: 1, @@ -175,6 +173,7 @@ const styles = StyleSheet.create({ color: '#828282', paddingTop: '2%', letterSpacing: normalize(0.05), + textAlign: 'center', }, scrollViewContainer: { height: 130, @@ -182,7 +181,6 @@ const styles = StyleSheet.create({ marginTop: '1%', }, scrollView: { - backgroundColor: '#F9F9F9', height: '95%', padding: 0, marginHorizontal: '5%', @@ -191,10 +189,10 @@ const styles = StyleSheet.create({ backgroundColor: '#F0F0F0', height: '50%', flexDirection: 'row', - alignItems: 'center', justifyContent: 'center', }, cancelButtonText: { + top: isIPhoneX() ? '6%' : '5%', color: '#698DD3', fontSize: normalize(17), fontWeight: '700', -- cgit v1.2.3-70-g09d2 From 1f7030d2721ed81c1e330f840782eeb0421d6f02 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 12:44:25 -0800 Subject: Added new compoent to suggested people --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 4 +++- src/types/types.ts | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 4d0a9bd5..5db4e5b6 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -16,6 +16,7 @@ import {ScreenType} from '../../types'; import {useSelector} from 'react-redux'; import {RootState} from '../../store/rootReducer'; import {useFocusEffect, useNavigation} from '@react-navigation/native'; +import {MutualFriends} from '../../components/suggestedPeople'; /** * Bare bones for suggested people consisting of: @@ -83,7 +84,8 @@ const SuggestedPeopleScreen: React.FC = () => { profileBodyHeight={0} screenType={screenType} /> - {/* TODO: Add MutualFriends here */} + {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends */} + diff --git a/src/types/types.ts b/src/types/types.ts index fe16fb8e..874b9eb7 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -109,7 +109,9 @@ export type PreviewType = | 'Search' | 'Recent' | 'Discover Users' - | 'Friend'; + | 'Friend' + | 'Suggested People Drawer' + | 'Suggested People Screen'; export enum ScreenType { Profile, -- cgit v1.2.3-70-g09d2 From d63929ef08530544ca238b15089b48f063301a0e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 12:53:28 -0800 Subject: displays correct +count val --- src/components/suggestedPeople/MutualFriends.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index df4e3ccd..6e5280ec 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -18,7 +18,7 @@ const MutualFriends: React.FC = () => { const friendsPreview = friends.slice(0, 4); const username = '@' + '12345678901234'; - const count = 4; + const count = friends.length - friendsPreview.length; const [drawerVisible, setDrawerVisible] = useState(false); @@ -35,7 +35,7 @@ const MutualFriends: React.FC = () => { profilePreview={profilePreview} /> ))} - {friends && friends.length > 0 && ( + {friends && friends.length > 4 && ( setDrawerVisible(true)}> + -- cgit v1.2.3-70-g09d2 From 24bc662227b19ce6209d8f5325c04febe0ad82d5 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 13:02:23 -0800 Subject: minor cosmetic changes --- src/components/profile/ProfilePreview.tsx | 5 +++-- src/components/suggestedPeople/MutualFriends.tsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx index 41792724..02ab94e7 100644 --- a/src/components/profile/ProfilePreview.tsx +++ b/src/components/profile/ProfilePreview.tsx @@ -18,6 +18,7 @@ import {PreviewType, ProfilePreviewType, ScreenType} from '../../types'; import { checkIfUserIsBlocked, fetchUserX, + isIPhoneX, normalize, SCREEN_WIDTH, userXInStore, @@ -365,8 +366,8 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - paddingRight: 25, - backgroundColor: 'transparent', + marginRight: 25, + width: isIPhoneX() ? 80 : 65, }, suggestedPeopleAvatar: { alignSelf: 'center', diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index 6e5280ec..bc0889fd 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -44,7 +44,7 @@ const MutualFriends: React.FC = () => { )} @@ -176,7 +176,7 @@ const styles = StyleSheet.create({ textAlign: 'center', }, scrollViewContainer: { - height: 130, + height: isIPhoneX() ? 153 : 135, shadowColor: 'rgb(125, 125, 125)', marginTop: '1%', }, -- cgit v1.2.3-70-g09d2 From 0c618a852836d146a5e01687eb11b831f3f5e6ba Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 13:07:30 -0800 Subject: comments --- src/components/suggestedPeople/MutualFriends.tsx | 7 +++++++ src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 4 +++- 2 files changed, 10 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index bc0889fd..32efd4a0 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -10,14 +10,21 @@ import {ProfilePreview} from '../profile'; import {normalize} from 'react-native-elements'; const MutualFriends: React.FC = () => { + // Requires user id of profile being viewed const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d'; + // Fetch mutual friends of user X let {friends} = userXId ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId]) : useSelector((state: RootState) => state.friends); + // Getting list of first 4 friends to display on suggested people screen const friendsPreview = friends.slice(0, 4); + + // Extract username of user whose profile is being viewed const username = '@' + '12345678901234'; + + // Count to be displayed after + symbol const count = friends.length - friendsPreview.length; const [drawerVisible, setDrawerVisible] = useState(false); diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index 5db4e5b6..4d8607a4 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -84,7 +84,9 @@ const SuggestedPeopleScreen: React.FC = () => { profileBodyHeight={0} screenType={screenType} /> - {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends */} + {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends + * Needs to be displayed only if userX !user himself + */} -- cgit v1.2.3-70-g09d2 From 8e0c670ff6bac6af6a74cbf2b952b79233ee8e12 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 17:26:52 -0800 Subject: displaying mutual friends only if they exist --- src/components/suggestedPeople/MutualFriends.tsx | 110 ++++++++++++----------- 1 file changed, 56 insertions(+), 54 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index 32efd4a0..d8b37bca 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -31,63 +31,65 @@ const MutualFriends: React.FC = () => { return ( <> - - - Mutual Friends - - {friendsPreview.map((profilePreview) => ( - - ))} - {friends && friends.length > 4 && ( - setDrawerVisible(true)}> - - + - {count} - - - )} - - - - - Mutual Friends - - {username} and you are both friends with - + {friends && friends.length > 0 && ( + + + Mutual Friends + + {friendsPreview.map((profilePreview) => ( + + ))} + {friends && friends.length > 4 && ( + setDrawerVisible(true)}> + + + + {count} - - - - {friends.map((profilePreview) => ( - - ))} - - - setDrawerVisible(false)}> - Cancel - - + )} + + + + + Mutual Friends + + {username} and you are both friends with + + + + + + {friends.map((profilePreview) => ( + + ))} + + + setDrawerVisible(false)}> + Cancel + + + + - - + + )} ); -- cgit v1.2.3-70-g09d2 From 2f3c621ec93b712b92919fcab95a8cb4eefe9337 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 17:27:13 -0800 Subject: adjusting padding around taggs bar --- src/components/taggs/Tagg.tsx | 13 ++++++++++++- src/components/taggs/TaggsBar.tsx | 2 +- 2 files changed, 13 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index bb450b64..66694132 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -141,7 +141,12 @@ const Tagg: React.FC = ({ setModalVisible={setModalVisible} completionCallback={linkNonIntegratedSocial} /> - + @@ -174,6 +179,12 @@ const Tagg: React.FC = ({ }; const styles = StyleSheet.create({ + spcontainer: { + justifyContent: 'space-between', + alignItems: 'center', + marginRight: 34, + height: normalize(60), + }, container: { justifyContent: 'space-between', alignItems: 'center', diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index e7bdb0f2..c23f56a9 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -148,7 +148,7 @@ const styles = StyleSheet.create({ shadowRadius: 10, shadowOffset: {width: 0, height: 2}, zIndex: 1, - paddingBottom: 5, + marginBottom: 25, }, container: { backgroundColor: 'white', -- cgit v1.2.3-70-g09d2 From 032bfc5d4d48eca542d2622df22ad353b594ef0b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 18 Feb 2021 10:25:07 -0800 Subject: iPhone 8 container height increased (cosmetic) --- src/components/suggestedPeople/MutualFriends.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index d8b37bca..3f9df4cd 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -52,7 +52,7 @@ const MutualFriends: React.FC = () => { )} @@ -138,7 +138,7 @@ const styles = StyleSheet.create({ flexDirection: 'column', backgroundColor: '#f9f9f9', width: SCREEN_WIDTH, - height: SCREEN_HEIGHT * 0.4, + height: isIPhoneX() ? SCREEN_HEIGHT * 0.4 : SCREEN_HEIGHT * 0.46, borderTopRightRadius: normalize(13), borderTopLeftRadius: normalize(13), borderWidth: 0.5, -- cgit v1.2.3-70-g09d2 From 6fb6afbf091457aaa5b7116cdc635f75162bcf5f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 18 Feb 2021 10:54:28 -0800 Subject: restyled cancel button to match EditProfile drawer --- src/components/suggestedPeople/MutualFriends.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx index 3f9df4cd..f99279c0 100644 --- a/src/components/suggestedPeople/MutualFriends.tsx +++ b/src/components/suggestedPeople/MutualFriends.tsx @@ -52,7 +52,7 @@ const MutualFriends: React.FC = () => { )} @@ -138,7 +138,7 @@ const styles = StyleSheet.create({ flexDirection: 'column', backgroundColor: '#f9f9f9', width: SCREEN_WIDTH, - height: isIPhoneX() ? SCREEN_HEIGHT * 0.4 : SCREEN_HEIGHT * 0.46, + height: SCREEN_HEIGHT * 0.46, borderTopRightRadius: normalize(13), borderTopLeftRadius: normalize(13), borderWidth: 0.5, @@ -196,14 +196,14 @@ const styles = StyleSheet.create({ }, cancelButton: { backgroundColor: '#F0F0F0', - height: '50%', + height: 100, flexDirection: 'row', justifyContent: 'center', }, cancelButtonText: { - top: isIPhoneX() ? '6%' : '5%', + top: isIPhoneX() ? '6%' : '7%', color: '#698DD3', - fontSize: normalize(17), + fontSize: normalize(16), fontWeight: '700', lineHeight: normalize(20), letterSpacing: normalize(0.1), -- cgit v1.2.3-70-g09d2