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/screens/main/NotificationsScreen.tsx | 36 ++++++++++++----- .../main/notification/EmptyNotificationView.tsx | 46 ++++++++++++++++++++++ 2 files changed, 72 insertions(+), 10 deletions(-) create mode 100644 src/screens/main/notification/EmptyNotificationView.tsx (limited to 'src/screens') 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/screens') 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/screens') 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/screens') 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/screens') 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/screens') 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 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/screens') 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 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/screens') 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 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/screens') 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