2 files changed, 15 insertions, 3 deletions
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 3c9deb6d..8216b6ff 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import {Image} from 'react-native';
+import {ScreenType} from '../../types';
 
 interface SocialIconProps {
   social: string;
   style: object;
+  screenType: ScreenType;
 }
 /**
  * An image component that returns the <Image> of the icon for a specific social media platform.
@@ -11,10 +13,14 @@ interface SocialIconProps {
 const SocialIcon: React.FC<SocialIconProps> = ({
   social: social,
   style: style,
+  screenType,
 }) => {
   switch (social) {
     case 'Instagram':
       var icon = require('../../assets/socials/instagram-icon.png');
+      if (screenType === ScreenType.SuggestedPeople) {
+        icon = require('../../assets/socials/instagram-icon-white-bg.png');
+      }
       break;
     case 'Facebook':
       var icon = require('../../assets/socials/facebook-icon.png');
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 67a3f074..20061cd0 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
+import {ScreenType} from '../../types';
 import {SocialIcon} from '.';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {normalize, SCREEN_WIDTH} from '../../utils';
@@ -46,7 +47,11 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
             <TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
               <CloseIcon height={'100%'} width={'100%'} color={'grey'} />
             </TouchableOpacity>
-            <SocialIcon style={styles.icon} social={social} />
+            <SocialIcon
+              style={styles.icon}
+              social={social}
+              screenType={ScreenType.Profile}
+            />
             <Text style={styles.titleLabel}>{social}</Text>
             <Text style={styles.descriptionLabel}>
               Insert your {social.toLowerCase()} username to link your{' '}
@@ -64,8 +69,9 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
             <TaggSquareButton
               title={'Submit'}
               onPress={onSubmit}
-              mode={'gradient'}
-              color={'white'}
+              buttonStyle={'gradient'}
+              buttonColor={'white'}
+              labelColor={'white'}
             />
           </View>
         </CenteredView>