4 files changed, 84 insertions, 6 deletions
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';