changed insta icon + added extra prop for switch

8 files changed, 34 insertions, 10 deletions

diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 3c9deb6d..0cd5d2a7 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');
+      var icon = require('../../assets/socials/instagram-icon-white-bg.png');
+      if (screenType === ScreenType.SuggestedPeople) {
+        icon = require('../../assets/socials/instagram-icon.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 d3bc3945..0bd5a0a5 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';
@@ -48,7 +49,11 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
                 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{' '}
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index a6b553b1..10cf6070 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -5,7 +5,7 @@ import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
-import {MomentType, ScreenType} from 'src/types';
+import {MomentType, ScreenType} from '../../types';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
 import DownIcon from '../../assets/icons/down_icon.svg';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 69701192..96eb35b6 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -1,7 +1,7 @@
 import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
-import {MomentType, ScreenType} from 'src/types';
+import {MomentType, ScreenType} from '../../types';
 
 interface MomentTileProps {
   moment: MomentType;
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index 8938b9a0..f3915752 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -18,7 +18,7 @@ import {
   handlePressForAuthBrowser,
   registerNonIntegratedSocialLink,
 } from '../../services';
-import {LinkerType} from '../../types';
+import {LinkerType, ScreenType} from '../../types';
 import SocialIcon from '../common/SocialIcon';
 
 interface SocialMediaLinkerProps extends TouchableOpacityProps {
@@ -91,7 +91,11 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
       activeOpacity={0.7}
       onPress={modelOrAuthBrowser}
       style={styles.container}>
-      <SocialIcon social={label} style={styles.icon} />
+      <SocialIcon
+        social={label}
+        style={styles.icon}
+        screenType={ScreenType.Profile}
+      />
       <Text style={[styles.label, {color: font_color}]}>{label}</Text>
       {authenticated && (
         <Image
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
index da637f99..559a2990 100644
--- a/src/components/onboarding/SocialMediaLinker.tsx
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -6,7 +6,7 @@ import {
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
-import {LinkerType} from 'src/types';
+import {LinkerType, ScreenType} from '../../types';
 import {SOCIAL_FONT_COLORS} from '../../constants/constants';
 import {handlePressForAuthBrowser} from '../../services';
 import SocialIcon from '../common/SocialIcon';
@@ -66,7 +66,11 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
       activeOpacity={0.7}
       onPress={handlePress}
       style={styles.container}>
-      <SocialIcon social={label} style={styles.icon} />
+      <SocialIcon
+        social={label}
+        style={styles.icon}
+        screenType={ScreenType.Profile}
+      />
       <Text style={[styles.label, {color: font_color}]}>{label}</Text>
       {state.socialLinked && (
         <Image
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index bdbd5773..bebf6bcf 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -6,7 +6,7 @@ import {
   StyleSheet,
   TouchableOpacityProps,
 } from 'react-native';
-import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
+import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
 
diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx
index c25d0297..46e651f9 100644
--- a/src/components/taggs/SocialMediaInfo.tsx
+++ b/src/components/taggs/SocialMediaInfo.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {StyleSheet, Text, View} from 'react-native';
+import { ScreenType } from '../../types';
 import {SocialIcon} from '..';
 import {handleOpenSocialUrlOnBrowser} from '../../utils';
 
@@ -30,7 +31,11 @@ const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
       )}
       <View style={styles.row}>
         <View />
-        <SocialIcon style={styles.icon} social={type} />
+        <SocialIcon
+          style={styles.icon}
+          social={type}
+          screenType={ScreenType.Profile}
+        />
         <Text
           style={styles.name}
           onPress={() => {