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/profile/ProfilePreview.tsx | 59 +++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) (limited to 'src/components/profile') 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; -- 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/components/profile') 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 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/components/profile') 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