From 7932e2238515d3038bf37abbc10352be855eaadf Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:06:21 -0800 Subject: notification view changes --- src/assets/images/empty_notifications.png | Bin 0 -> 7787 bytes src/constants/constants.ts | 2 + src/constants/strings.ts | 6 ++- src/screens/main/NotificationsScreen.tsx | 36 +++++++++++----- .../main/notification/EmptyNotificationView.tsx | 46 +++++++++++++++++++++ 5 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/empty_notifications.png create mode 100644 src/screens/main/notification/EmptyNotificationView.tsx (limited to 'src') diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png new file mode 100644 index 00000000..5a5828e4 Binary files /dev/null and b/src/assets/images/empty_notifications.png differ diff --git a/src/constants/constants.ts b/src/constants/constants.ts index f58aa686..611fd748 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -75,6 +75,8 @@ export const AVATAR_GRADIENT = { end: '#215151', }; +export const NOTIFICATION_GRADIENT = ['rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)'] + export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, FACEBOOK: FACEBOOK_FONT_COLOR, diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 9680320a..3d8cbfe7 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -53,4 +53,8 @@ export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n con export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; -export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; \ No newline at end of file +export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; + +//Notifications +export const UP_TO_DATE = 'Up-to-Date!'; +export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; \ No newline at end of file diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 266ba3f9..6fa1a272 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -13,6 +13,7 @@ import { import {SafeAreaView} from 'react-native-safe-area-context'; import {useDispatch, useSelector} from 'react-redux'; import {Notification} from '../../components/notifications'; +import EmptyNotificationView from './notification/EmptyNotificationView'; import { loadUserNotifications, updateNewNotificationReceived, @@ -29,6 +30,7 @@ const NotificationsScreen: React.FC = () => { (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); + const [noActivity, setNoActivity] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( undefined, @@ -128,6 +130,9 @@ const NotificationsScreen: React.FC = () => { {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ]); + setNoActivity( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + ); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -152,16 +157,24 @@ const NotificationsScreen: React.FC = () => { Notifications - index.toString()} - renderItem={renderNotification} - renderSectionHeader={renderSectionHeader} - refreshControl={ - - } - /> + {noActivity === true && ( + + + + )} + + {noActivity === false && ( + index.toString()} + renderItem={renderNotification} + renderSectionHeader={renderSectionHeader} + refreshControl={ + + } + /> + )} ); }; @@ -195,6 +208,9 @@ const styles = StyleSheet.create({ marginBottom: '2%', fontSize: 15, }, + emptyViewContainer: { + marginTop: '22%', + }, }); export default NotificationsScreen; diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx new file mode 100644 index 00000000..194b16d0 --- /dev/null +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; +import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; +const EmptyNotificationView: React.FC = () => { + return ( + + + + + + {UP_TO_DATE} + + + {NO_NEW_NOTIFICATIONS} + + + ); +}; + +const style = StyleSheet.create({ + container: {alignItems: 'center'}, + topMargin: {marginTop: 43}, + upperTextStyle: { + fontWeight: '700', + fontSize: 23, + fontStyle: 'normal', + lineHeight: 40, + }, + bottomTextStyle: { + color: '#2D3B45', + fontWeight: '600', + fontSize: 20, + fontStyle: 'normal', + lineHeight: 40, + }, +}); + +export default EmptyNotificationView; -- cgit v1.2.3-70-g09d2 From 2f507b898fe7f366d0ad714273ebe1cb86587394 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:11:37 -0800 Subject: notification view variable changes --- src/screens/main/NotificationsScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 6fa1a272..4979c8d8 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -30,7 +30,7 @@ const NotificationsScreen: React.FC = () => { (state: RootState) => state.user, ); const [refreshing, setRefreshing] = useState(false); - const [noActivity, setNoActivity] = useState(false); + const [noNotification, setNoNotification] = useState(false); // used for figuring out which ones are unread const [lastViewed, setLastViewed] = useState( undefined, @@ -130,7 +130,7 @@ const NotificationsScreen: React.FC = () => { {title: 'Yesterday', data: yesterdays}, {title: 'This Week', data: thisWeeks}, ]); - setNoActivity( + setNoNotification( todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, ); }, [lastViewed, notifications]); @@ -157,13 +157,13 @@ const NotificationsScreen: React.FC = () => { Notifications - {noActivity === true && ( + {noNotification === true && ( )} - {noActivity === false && ( + {noNotification === false && ( Date: Mon, 15 Feb 2021 13:49:03 -0800 Subject: changes in style variable --- src/constants/constants.ts | 5 ++++- src/screens/main/notification/EmptyNotificationView.tsx | 15 +++++++++------ 2 files changed, 13 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 611fd748..3c43fb6c 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -75,7 +75,10 @@ export const AVATAR_GRADIENT = { end: '#215151', }; -export const NOTIFICATION_GRADIENT = ['rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)'] +export const NOTIFICATION_GRADIENT = [ + 'rgba(247, 248, 248, 1)', + 'rgba(247, 248, 248, 0)', +]; export const SOCIAL_FONT_COLORS = { INSTAGRAM: INSTAGRAM_FONT_COLOR, diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index 194b16d0..34649f26 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -5,9 +5,9 @@ import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; const EmptyNotificationView: React.FC = () => { return ( - + @@ -15,17 +15,17 @@ const EmptyNotificationView: React.FC = () => { source={require('../../../assets/images/empty_notifications.png')} /> - - {UP_TO_DATE} + + {UP_TO_DATE} - {NO_NEW_NOTIFICATIONS} + {NO_NEW_NOTIFICATIONS} ); }; -const style = StyleSheet.create({ +const styles = StyleSheet.create({ container: {alignItems: 'center'}, topMargin: {marginTop: 43}, upperTextStyle: { @@ -41,6 +41,9 @@ const style = StyleSheet.create({ fontStyle: 'normal', lineHeight: 40, }, + backgroundLinearView: { + borderRadius: 135.5, + }, }); export default EmptyNotificationView; -- cgit v1.2.3-70-g09d2 From 2eaa9718131dcd9cb498f9b9e3c6b30dbbe3551c Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 13:50:28 -0800 Subject: SignedCommit Changes --- src/screens/main/notification/EmptyNotificationView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx index 34649f26..b76a955b 100644 --- a/src/screens/main/notification/EmptyNotificationView.tsx +++ b/src/screens/main/notification/EmptyNotificationView.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +import {Image, Text, StyleSheet, View} from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings'; import {NOTIFICATION_GRADIENT} from '../../../constants/constants'; -- cgit v1.2.3-70-g09d2 From db2ebf4e73a491f2818f4d2575c10515d2a21614 Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 15:05:36 -0800 Subject: TMA-551: PR updates --- src/constants/strings.ts | 6 +- src/screens/main/NotificationsScreen.tsx | 72 +++++++++++----------- .../main/notification/EmptyNotificationView.tsx | 13 ++-- 3 files changed, 45 insertions(+), 46 deletions(-) (limited to 'src') diff --git a/src/constants/strings.ts b/src/constants/strings.ts index 3d8cbfe7..5a9be5fc 100644 --- a/src/constants/strings.ts +++ b/src/constants/strings.ts @@ -44,17 +44,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓'; export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`; export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones'; +export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on'; export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`; export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!'; export const SUCCESS_PWD_RESET = 'Your password was reset successfully!'; export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code'; +export const UP_TO_DATE = 'Up-to-Date!'; export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!'; export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile'; export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'; export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category'; export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; - -//Notifications -export const UP_TO_DATE = 'Up-to-Date!'; -export const NO_NEW_NOTIFICATIONS = 'You have no new notifications'; \ No newline at end of file diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 4979c8d8..d9e5a57f 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -97,42 +97,44 @@ const NotificationsScreen: React.FC = () => { // handles sectioning notifications to "date age" // mark notifications as read or unread useEffect(() => { - const sortedNotifications = (notifications ?? []) - .slice() - .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); - let todays = []; - let yesterdays = []; - let thisWeeks = []; - for (const n of sortedNotifications) { - const notificationDate = moment(n.timestamp); - const dateAge = getDateAge(notificationDate); - if (dateAge === 'unknown') { - continue; - } - const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false; - const newN = {...n, unread}; - switch (dateAge) { - case 'today': - todays.push(newN); - continue; - case 'yesterday': - yesterdays.push(newN); - continue; - case 'thisWeek': - thisWeeks.push(newN); - continue; - default: + if (notifications?.length > 0) { + const sortedNotifications = (notifications ?? []) + .slice() + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + let todays = []; + let yesterdays = []; + let thisWeeks = []; + for (const n of sortedNotifications) { + const notificationDate = moment(n.timestamp); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { continue; + } + const unread = lastViewed + ? lastViewed.diff(notificationDate) < 0 + : false; + const newN = {...n, unread}; + switch (dateAge) { + case 'today': + todays.push(newN); + continue; + case 'yesterday': + yesterdays.push(newN); + continue; + case 'thisWeek': + thisWeeks.push(newN); + continue; + default: + continue; + } } + setSectionedNotifications([ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ]); } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); - setNoNotification( - todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, - ); + setNoNotification(notifications && notifications.length === 0); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( @@ -157,13 +159,13 @@ const NotificationsScreen: React.FC = () => { Notifications - {noNotification === true && ( + {noNotification && ( )} - {noNotification === false && ( + {!noNotification && ( { return ( @@ -27,19 +28,17 @@ const EmptyNotificationView: React.FC = () => { const styles = StyleSheet.create({ container: {alignItems: 'center'}, - topMargin: {marginTop: 43}, + topMargin: {marginTop: SCREEN_HEIGHT * 0.025}, upperTextStyle: { fontWeight: '700', - fontSize: 23, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(23), + lineHeight: normalize(40), }, bottomTextStyle: { color: '#2D3B45', fontWeight: '600', - fontSize: 20, - fontStyle: 'normal', - lineHeight: 40, + fontSize: normalize(20), + lineHeight: normalize(40), }, backgroundLinearView: { borderRadius: 135.5, -- cgit v1.2.3-70-g09d2 From a9b60f95f8f863249c79de8e4ae07301f75005de Mon Sep 17 00:00:00 2001 From: ankit-thanekar007 Date: Mon, 15 Feb 2021 16:30:16 -0800 Subject: TMA-551: PR updates --- src/screens/main/NotificationsScreen.tsx | 68 ++++++++++++++++---------------- 1 file changed, 33 insertions(+), 35 deletions(-) (limited to 'src') diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index d9e5a57f..ca921f75 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -97,44 +97,42 @@ const NotificationsScreen: React.FC = () => { // handles sectioning notifications to "date age" // mark notifications as read or unread useEffect(() => { - if (notifications?.length > 0) { - const sortedNotifications = (notifications ?? []) - .slice() - .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); - let todays = []; - let yesterdays = []; - let thisWeeks = []; - for (const n of sortedNotifications) { - const notificationDate = moment(n.timestamp); - const dateAge = getDateAge(notificationDate); - if (dateAge === 'unknown') { + const sortedNotifications = (notifications ?? []) + .slice() + .sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1)); + let todays = []; + let yesterdays = []; + let thisWeeks = []; + for (const n of sortedNotifications) { + const notificationDate = moment(n.timestamp); + const dateAge = getDateAge(notificationDate); + if (dateAge === 'unknown') { + continue; + } + const unread = lastViewed ? lastViewed.diff(notificationDate) < 0 : false; + const newN = {...n, unread}; + switch (dateAge) { + case 'today': + todays.push(newN); + continue; + case 'yesterday': + yesterdays.push(newN); + continue; + case 'thisWeek': + thisWeeks.push(newN); + continue; + default: continue; - } - const unread = lastViewed - ? lastViewed.diff(notificationDate) < 0 - : false; - const newN = {...n, unread}; - switch (dateAge) { - case 'today': - todays.push(newN); - continue; - case 'yesterday': - yesterdays.push(newN); - continue; - case 'thisWeek': - thisWeeks.push(newN); - continue; - default: - continue; - } } - setSectionedNotifications([ - {title: 'Today', data: todays}, - {title: 'Yesterday', data: yesterdays}, - {title: 'This Week', data: thisWeeks}, - ]); } - setNoNotification(notifications && notifications.length === 0); + setSectionedNotifications([ + {title: 'Today', data: todays}, + {title: 'Yesterday', data: yesterdays}, + {title: 'This Week', data: thisWeeks}, + ]); + setNoNotification( + todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0, + ); }, [lastViewed, notifications]); const renderNotification = ({item}: {item: NotificationType}) => ( -- cgit v1.2.3-70-g09d2 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 0aae17cd2668905fefdbbaf9859a9c031e6ea531 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 17 Feb 2021 19:14:21 -0800 Subject: restyles accept/reject buttons and headings --- src/components/common/AcceptDeclineButtons.tsx | 18 ++++++++++-------- src/components/notifications/Notification.tsx | 18 +++++++++++++----- src/screens/main/NotificationsScreen.tsx | 16 ++++++++-------- 3 files changed, 31 insertions(+), 21 deletions(-) (limited to 'src') diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx index 9caaffca..167148f0 100644 --- a/src/components/common/AcceptDeclineButtons.tsx +++ b/src/components/common/AcceptDeclineButtons.tsx @@ -4,6 +4,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants'; import {ProfilePreviewType} from '../../types'; import {SCREEN_WIDTH} from '../../utils'; import {TouchableOpacity} from 'react-native-gesture-handler'; +import {normalize} from '../../utils'; interface AcceptDeclineButtonsProps { requester: ProfilePreviewType; @@ -40,18 +41,17 @@ const AcceptDeclineButtons: React.FC = ({ const styles = StyleSheet.create({ container: { - flex: 1, + height: '100%', flexDirection: 'column', + justifyContent: 'space-around', }, genericButtonStyle: { justifyContent: 'center', alignItems: 'center', - width: SCREEN_WIDTH * 0.14, - height: SCREEN_WIDTH * 0.06, - borderRadius: 5, + width: SCREEN_WIDTH * 0.16, + height: SCREEN_WIDTH * 0.0525, + borderRadius: 3, padding: 0, - marginTop: 8, - marginRight: '3%', }, acceptButton: { padding: 0, @@ -70,8 +70,10 @@ const styles = StyleSheet.create({ }, buttonTitle: { padding: 0, - fontSize: 14, - fontWeight: '800', + fontWeight: '700', + fontSize: normalize(11), + lineHeight: normalize(13), + letterSpacing: normalize(0.1), }, }); diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 1073a479..f83abcbc 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -24,7 +24,12 @@ import { ThreadNotificationType, UserType, } from '../../types'; -import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils'; +import { + fetchUserX, + SCREEN_HEIGHT, + SCREEN_WIDTH, + userXInStore, +} from '../../utils'; import AcceptDeclineButtons from '../common/AcceptDeclineButtons'; interface NotificationProps { @@ -251,12 +256,14 @@ const styles = StyleSheet.create({ container: { flexDirection: 'row', height: Math.round(SCREEN_HEIGHT / 10), + width: SCREEN_WIDTH * 0.9, flex: 1, + alignSelf: 'center', alignItems: 'center', }, avatarContainer: { - marginLeft: '8%', - flex: 1, + height: 42, + width: 42, justifyContent: 'center', }, avatar: { @@ -270,7 +277,6 @@ const styles = StyleSheet.create({ height: '80%', flexDirection: 'column', justifyContent: 'space-around', - marginRight: '15%', }, actorName: { fontSize: 15, @@ -282,7 +288,9 @@ const styles = StyleSheet.create({ width: 42, right: '5%', }, - buttonsContainer: {}, + buttonsContainer: { + height: '80%', + }, }); export default Notification; diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index ca921f75..511680ea 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -21,6 +21,7 @@ import { import {RootState} from '../../store/rootReducer'; import {NotificationType, ScreenType} from '../../types'; import {getDateAge, SCREEN_HEIGHT} from '../../utils'; +import {normalize} from '../../utils'; const NotificationsScreen: React.FC = () => { const {moments: loggedInUserMoments} = useSelector( @@ -155,7 +156,6 @@ const NotificationsScreen: React.FC = () => { Notifications - {noNotification && ( @@ -187,12 +187,9 @@ const styles = StyleSheet.create({ flexDirection: 'column', }, headerText: { - fontWeight: 'bold', - fontSize: 16, - }, - underline: { - borderWidth: 2, - borderColor: '#8F01FF', + fontWeight: '700', + fontSize: normalize(18), + lineHeight: normalize(21), }, container: { paddingBottom: '20%', @@ -206,7 +203,10 @@ const styles = StyleSheet.create({ marginLeft: '8%', marginTop: '5%', marginBottom: '2%', - fontSize: 15, + fontWeight: '600', + fontSize: normalize(12), + lineHeight: normalize(14), + color: '#828282', }, emptyViewContainer: { marginTop: '22%', -- 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