From 9a890f1d9795f4ff071d50ea5863b80811f840ec Mon Sep 17 00:00:00 2001 From: brian-tagg Date: Fri, 7 May 2021 15:21:43 -0700 Subject: Changes to make messaging update top notification --- .../notificationPrompts/message_notification-07.png | Bin 0 -> 569424 bytes src/components/common/TaggPrompt.tsx | 11 ++++++++--- src/components/notifications/NotificationPrompts.tsx | 15 +++++++++++++++ src/screens/main/NotificationsScreen.tsx | 4 ++-- 4 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 src/assets/icons/notificationPrompts/message_notification-07.png (limited to 'src') diff --git a/src/assets/icons/notificationPrompts/message_notification-07.png b/src/assets/icons/notificationPrompts/message_notification-07.png new file mode 100644 index 00000000..b0db08ea Binary files /dev/null and b/src/assets/icons/notificationPrompts/message_notification-07.png differ diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx index 6b59d4a5..20901e65 100644 --- a/src/components/common/TaggPrompt.tsx +++ b/src/components/common/TaggPrompt.tsx @@ -7,7 +7,7 @@ import {normalize, SCREEN_HEIGHT} from '../../utils'; type TaggPromptProps = { messageHeader: string; messageBody: string | Element; - logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts'; + logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts' | 'chat'; hideCloseButton?: boolean; noPadding?: boolean; onClose: () => void; @@ -33,6 +33,8 @@ const TaggPrompt: React.FC = ({ return require('../../assets/icons/notificationPrompts/invite-friends-prompt-icon.png'); case 'private_accounts': return require('../../assets/icons/notificationPrompts/private-accounts-prompt-icon.png'); + case 'chat': + return require('../../assets/icons/notificationPrompts/message_notification-07.png'); case 'tagg': default: return require('../../assets/images/logo-purple.png'); @@ -76,8 +78,11 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, icon: { - width: normalize(40), - height: normalize(40), + // Original, prior to chat notification + // width: normalize(40), + // height: normalize(40), + width: normalize(350), + height: normalize(70), }, header: { color: 'black', diff --git a/src/components/notifications/NotificationPrompts.tsx b/src/components/notifications/NotificationPrompts.tsx index 386b45e6..0fb580e6 100644 --- a/src/components/notifications/NotificationPrompts.tsx +++ b/src/components/notifications/NotificationPrompts.tsx @@ -32,6 +32,21 @@ export const PrivateAccountsPrompt: React.FC = () => { ); }; +export const NewChatPrompt: React.FC = () => { + const handWaveRegex = `\u{1F44B}` + const message = `Introducing messaging, another way to engage with\nfriends on campus! Send a ${handWaveRegex} to a friend now!` + return ( + {}} + /> + ); +}; + interface SPPromptNotificationProps { showSPNotifyPopUp: boolean; } diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 3efd9af8..2f8e8e7d 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -20,7 +20,7 @@ import {useDispatch, useSelector} from 'react-redux'; import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg'; import {TabsGradient} from '../../components'; import {Notification} from '../../components/notifications'; -import {PrivateAccountsPrompt} from '../../components/notifications/NotificationPrompts'; +import {NewChatPrompt} from '../../components/notifications/NotificationPrompts'; import { loadUserNotifications, updateNewNotificationReceived, @@ -297,7 +297,7 @@ const NotificationsScreen: React.FC = () => { renderItem={renderNotification} renderSectionHeader={renderSectionHeader} renderSectionFooter={renderSectionFooter} - ListHeaderComponent={} + ListHeaderComponent={} refreshControl={ } -- cgit v1.2.3-70-g09d2 From 2510736eef1a66ff3c5b220ac42ca6cc0bce366d Mon Sep 17 00:00:00 2001 From: brian-tagg Date: Fri, 7 May 2021 15:51:35 -0700 Subject: Made TaggPrompt changes cleaner, added logoLink to NotificationPrompts type, made image in chat notification a link to the Chat screen --- src/components/common/TaggPrompt.tsx | 20 ++++++++++++++++---- src/components/notifications/NotificationPrompts.tsx | 4 ++++ 2 files changed, 20 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx index 20901e65..236501ff 100644 --- a/src/components/common/TaggPrompt.tsx +++ b/src/components/common/TaggPrompt.tsx @@ -3,11 +3,13 @@ import {StyleSheet, Text, TouchableOpacity} from 'react-native'; import {Image, View} from 'react-native-animatable'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {normalize, SCREEN_HEIGHT} from '../../utils'; +import {useNavigation} from '@react-navigation/core'; type TaggPromptProps = { messageHeader: string; messageBody: string | Element; logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts' | 'chat'; + logoLink: string | null; hideCloseButton?: boolean; noPadding?: boolean; onClose: () => void; @@ -17,6 +19,7 @@ const TaggPrompt: React.FC = ({ messageHeader, messageBody, logoType, + logoLink, hideCloseButton, noPadding, onClose, @@ -44,9 +47,17 @@ const TaggPrompt: React.FC = ({ const topPadding = {paddingTop: noPadding ? 0 : SCREEN_HEIGHT / 10}; const bottomPadding = {paddingBottom: noPadding ? 0 : SCREEN_HEIGHT / 50}; + const navigation = useNavigation(); + return ( - + {logoLink + ? + navigation.navigate(logoLink)}> + + + : } {messageHeader} {messageBody} {!hideCloseButton && ( @@ -78,9 +89,10 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, icon: { - // Original, prior to chat notification - // width: normalize(40), - // height: normalize(40), + width: normalize(40), + height: normalize(40), + }, + chat: { width: normalize(350), height: normalize(70), }, diff --git a/src/components/notifications/NotificationPrompts.tsx b/src/components/notifications/NotificationPrompts.tsx index 0fb580e6..6c6da11e 100644 --- a/src/components/notifications/NotificationPrompts.tsx +++ b/src/components/notifications/NotificationPrompts.tsx @@ -10,6 +10,7 @@ export const InviteFriendsPrompt: React.FC = () => { 'A new feature that lets you invite your friends to Tagg. \nClick on your friends list to do so!' } logoType={'invite_friends'} + logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} @@ -25,6 +26,7 @@ export const PrivateAccountsPrompt: React.FC = () => { 'You can now choose to make your account private!\nHead over to the privacy tab in settings to check it out' } logoType={'private_accounts'} + logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} @@ -40,6 +42,7 @@ export const NewChatPrompt: React.FC = () => { messageHeader={'Chat!'} messageBody={message} logoType={'chat'} + logoLink={"ChatList"} hideCloseButton={true} noPadding={true} onClose={() => {}} @@ -70,6 +73,7 @@ export const SPPromptNotification: React.FC = ({ } logoType={'tagg'} + logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} -- cgit v1.2.3-70-g09d2 From a3bae91f19400373dc396fc60d5f29d3b4506d23 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 7 May 2021 16:26:35 -0700 Subject: cleaning --- src/components/common/TaggPrompt.tsx | 31 +++++++++++++--------- .../notifications/NotificationPrompts.tsx | 16 ++++++----- 2 files changed, 28 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx index 236501ff..0bf25c3c 100644 --- a/src/components/common/TaggPrompt.tsx +++ b/src/components/common/TaggPrompt.tsx @@ -1,5 +1,11 @@ import React from 'react'; -import {StyleSheet, Text, TouchableOpacity} from 'react-native'; +import { + ImageStyle, + StyleProp, + StyleSheet, + Text, + TouchableOpacity, +} from 'react-native'; import {Image, View} from 'react-native-animatable'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {normalize, SCREEN_HEIGHT} from '../../utils'; @@ -9,7 +15,8 @@ type TaggPromptProps = { messageHeader: string; messageBody: string | Element; logoType: 'plus' | 'tagg' | 'invite_friends' | 'private_accounts' | 'chat'; - logoLink: string | null; + logoLink?: string; + externalStyles?: Record>; hideCloseButton?: boolean; noPadding?: boolean; onClose: () => void; @@ -20,6 +27,7 @@ const TaggPrompt: React.FC = ({ messageBody, logoType, logoLink, + externalStyles, hideCloseButton, noPadding, onClose, @@ -51,13 +59,14 @@ const TaggPrompt: React.FC = ({ return ( - {logoLink - ? - navigation.navigate(logoLink)}> - - - : } + logoLink && navigation.navigate(logoLink)}> + + {messageHeader} {messageBody} {!hideCloseButton && ( @@ -92,10 +101,6 @@ const styles = StyleSheet.create({ width: normalize(40), height: normalize(40), }, - chat: { - width: normalize(350), - height: normalize(70), - }, header: { color: 'black', fontSize: normalize(16), diff --git a/src/components/notifications/NotificationPrompts.tsx b/src/components/notifications/NotificationPrompts.tsx index 6c6da11e..06f6ecc6 100644 --- a/src/components/notifications/NotificationPrompts.tsx +++ b/src/components/notifications/NotificationPrompts.tsx @@ -1,5 +1,6 @@ import React, {Fragment} from 'react'; import {Image, StyleSheet, Text} from 'react-native'; +import {normalize, SCREEN_WIDTH} from '../../utils'; import {TaggPrompt} from '../common'; export const InviteFriendsPrompt: React.FC = () => { @@ -10,7 +11,6 @@ export const InviteFriendsPrompt: React.FC = () => { 'A new feature that lets you invite your friends to Tagg. \nClick on your friends list to do so!' } logoType={'invite_friends'} - logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} @@ -26,7 +26,6 @@ export const PrivateAccountsPrompt: React.FC = () => { 'You can now choose to make your account private!\nHead over to the privacy tab in settings to check it out' } logoType={'private_accounts'} - logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} @@ -35,14 +34,20 @@ export const PrivateAccountsPrompt: React.FC = () => { }; export const NewChatPrompt: React.FC = () => { - const handWaveRegex = `\u{1F44B}` - const message = `Introducing messaging, another way to engage with\nfriends on campus! Send a ${handWaveRegex} to a friend now!` + const handWaveRegex = '\u{1F44B}'; + const message = `Introducing messaging, another way to engage with\nfriends on campus! Send a ${handWaveRegex} to a friend now!`; return ( {}} @@ -73,7 +78,6 @@ export const SPPromptNotification: React.FC = ({ } logoType={'tagg'} - logoLink={null} hideCloseButton={true} noPadding={true} onClose={() => {}} -- cgit v1.2.3-70-g09d2