aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/icons/invite-friends-prompt-icon.pngbin0 -> 153479 bytes
-rw-r--r--src/components/common/TaggPrompt.tsx4
-rw-r--r--src/components/friends/InviteFriendTile.tsx27
-rw-r--r--src/components/notifications/NotificationPrompts.tsx58
-rw-r--r--src/components/notifications/index.ts1
-rw-r--r--src/screens/main/NotificationsScreen.tsx36
-rw-r--r--src/screens/profile/InviteFriendsScreen.tsx14
7 files changed, 98 insertions, 42 deletions
diff --git a/src/assets/icons/invite-friends-prompt-icon.png b/src/assets/icons/invite-friends-prompt-icon.png
new file mode 100644
index 00000000..b9422b9f
--- /dev/null
+++ b/src/assets/icons/invite-friends-prompt-icon.png
Binary files differ
diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index 75f3009b..d65e30c6 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';
+ logoType: 'plus' | 'tagg' | 'invite_friends';
hideCloseButton?: boolean;
noPadding?: boolean;
onClose: () => void;
@@ -29,6 +29,8 @@ const TaggPrompt: React.FC<TaggPromptProps> = ({
switch (logoType) {
case 'plus':
return require('../../assets/icons/plus-logo.png');
+ case 'invite_friends':
+ return require('../../assets/icons/invite-friends-prompt-icon.png');
case 'tagg':
default:
return require('../../assets/images/logo-purple.png');
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx
index 3fbf2e73..95ebf16a 100644
--- a/src/components/friends/InviteFriendTile.tsx
+++ b/src/components/friends/InviteFriendTile.tsx
@@ -58,10 +58,17 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => {
</View>
<TouchableOpacity
disabled={invited}
- style={styles.button}
+ style={[
+ styles.button,
+ invited ? styles.pendingButton : styles.inviteButton,
+ ]}
onPress={handleInviteFriend}>
- <Text style={styles.buttonTitle}>
- {invited ? 'Invited' : 'Invite'}
+ <Text
+ style={[
+ styles.buttonTitle,
+ invited ? styles.pendingButtonTitle : styles.inviteButtonTitle,
+ ]}>
+ {invited ? 'Pending' : 'Invite'}
</Text>
</TouchableOpacity>
</View>
@@ -98,14 +105,18 @@ const styles = StyleSheet.create({
alignItems: 'center',
width: 82,
height: 25,
- borderColor: TAGG_LIGHT_BLUE,
borderWidth: 2,
borderRadius: 2,
padding: 0,
+ borderColor: TAGG_LIGHT_BLUE,
+ },
+ pendingButton: {
+ backgroundColor: TAGG_LIGHT_BLUE,
+ },
+ inviteButton: {
backgroundColor: 'transparent',
},
buttonTitle: {
- color: TAGG_LIGHT_BLUE,
padding: 0,
fontSize: normalize(11),
fontWeight: '700',
@@ -113,6 +124,12 @@ const styles = StyleSheet.create({
letterSpacing: normalize(0.6),
paddingHorizontal: '3.8%',
},
+ pendingButtonTitle: {
+ color: 'white',
+ },
+ inviteButtonTitle: {
+ color: TAGG_LIGHT_BLUE,
+ },
});
export default InviteFriendTile;
diff --git a/src/components/notifications/NotificationPrompts.tsx b/src/components/notifications/NotificationPrompts.tsx
new file mode 100644
index 00000000..03502b27
--- /dev/null
+++ b/src/components/notifications/NotificationPrompts.tsx
@@ -0,0 +1,58 @@
+import React, {Fragment} from 'react';
+import {Image, StyleSheet, Text} from 'react-native';
+import {TaggPrompt} from '../common';
+
+export const InviteFriendsPrompt: React.FC = () => {
+ return (
+ <TaggPrompt
+ messageHeader={'Invite Friends To Tagg!'}
+ messageBody={
+ 'A new feature that lets you invite your friends to Tagg. \nClick on yourfriends list to do so!'
+ }
+ logoType={'invite_friends'}
+ hideCloseButton={true}
+ noPadding={true}
+ onClose={() => {}}
+ />
+ );
+};
+
+interface SPPromptNotificationProps {
+ showSPNotifyPopUp: boolean;
+}
+
+export const SPPromptNotification: React.FC<SPPromptNotificationProps> = ({
+ showSPNotifyPopUp,
+}) => {
+ return showSPNotifyPopUp ? (
+ <TaggPrompt
+ messageHeader={'New Suggested People Page!'}
+ messageBody={
+ <>
+ <Text>
+ A new page where you can discover new profiles. Just press the new{' '}
+ </Text>
+ <Image
+ style={styles.icon}
+ source={require('../../assets/navigationIcons/home.png')}
+ />
+ <Text> button on the tab bar to check it out!</Text>
+ </>
+ }
+ logoType={'tagg'}
+ hideCloseButton={true}
+ noPadding={true}
+ onClose={() => {}}
+ />
+ ) : (
+ <Fragment />
+ );
+};
+
+const styles = StyleSheet.create({
+ icon: {
+ width: 20,
+ height: 20,
+ tintColor: 'grey',
+ },
+});
diff --git a/src/components/notifications/index.ts b/src/components/notifications/index.ts
index 0260ce24..733b56f1 100644
--- a/src/components/notifications/index.ts
+++ b/src/components/notifications/index.ts
@@ -1 +1,2 @@
export {default as Notification} from './Notification';
+export {InviteFriendsPrompt} from './NotificationPrompts';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 57dea6f5..68437f2b 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -21,7 +21,10 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import {TabsGradient, TaggPrompt} from '../../components';
-import {Notification} from '../../components/notifications';
+import {
+ InviteFriendsPrompt,
+ Notification,
+} from '../../components/notifications';
import {
loadUserNotifications,
updateNewNotificationReceived,
@@ -252,30 +255,6 @@ const NotificationsScreen: React.FC = () => {
return null;
};
- const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
- <TaggPrompt
- messageHeader={'New Suggested People Page!'}
- messageBody={
- <>
- <Text>
- A new page where you can discover new profiles. Just press the new{' '}
- </Text>
- <Image
- style={styles.icon}
- source={require('../../assets/navigationIcons/home.png')}
- />
- <Text> button on the tab bar to check it out!</Text>
- </>
- }
- logoType={'tagg'}
- hideCloseButton={true}
- noPadding={true}
- onClose={() => {}}
- />
- ) : (
- <Fragment />
- );
-
return (
<View style={styles.background}>
<SafeAreaView>
@@ -291,7 +270,7 @@ const NotificationsScreen: React.FC = () => {
renderItem={renderNotification}
renderSectionHeader={renderSectionHeader}
renderSectionFooter={renderSectionFooter}
- ListHeaderComponent={SPPromptNotification}
+ ListHeaderComponent={<InviteFriendsPrompt />}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
@@ -359,11 +338,6 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: 'center',
},
- icon: {
- width: 20,
- height: 20,
- tintColor: 'grey',
- },
});
export default NotificationsScreen;
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
index 36aa8ada..53e6b221 100644
--- a/src/screens/profile/InviteFriendsScreen.tsx
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -90,14 +90,18 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
if (query.length > 0) {
const searchResultsUsers = usersFromContacts.filter(
(item: ProfilePreviewType) =>
- item.first_name.toLowerCase().includes(query) ||
- item.last_name.toLowerCase().includes(query) ||
- item.username.toLowerCase().includes(query),
+ (item.first_name + ' ' + item.last_name)
+ .toLowerCase()
+ .startsWith(query) ||
+ item.username.toLowerCase().startsWith(query) ||
+ item.last_name.toLowerCase().startsWith(query),
);
const searchResultsNonUsers = nonUsersFromContacts.filter(
(item) =>
- item.firstName.toLowerCase().includes(query) ||
- item.lastName.toLowerCase().includes(query),
+ (item.firstName + ' ' + item.lastName)
+ .toLowerCase()
+ .startsWith(query) ||
+ item.lastName.toLowerCase().startsWith(query),
);
const sanitizedResult = {
usersFromContacts: searchResultsUsers,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:05:48 +0000