white ring on profile screen fixed

4 files changed, 20 insertions, 25 deletions

diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 8216b6ff..cb3b926b 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import {Image} from 'react-native';
-import {ScreenType} from '../../types';
 
 interface SocialIconProps {
   social: string;
   style: object;
-  screenType: ScreenType;
+  whiteRing: boolean | undefined;
 }
 /**
  * An image component that returns the <Image> of the icon for a specific social media platform.
@@ -13,12 +12,12 @@ interface SocialIconProps {
 const SocialIcon: React.FC<SocialIconProps> = ({
   social: social,
   style: style,
-  screenType,
+  whiteRing,
 }) => {
   switch (social) {
     case 'Instagram':
       var icon = require('../../assets/socials/instagram-icon.png');
-      if (screenType === ScreenType.SuggestedPeople) {
+      if (whiteRing) {
         icon = require('../../assets/socials/instagram-icon-white-bg.png');
       }
       break;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 66694132..50651f74 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Fragment, useContext, useEffect, useState} from 'react';
+import React, {Fragment, useState} from 'react';
 import {Alert, Linking, StyleSheet, TouchableOpacity, View} from 'react-native';
 import PurpleRingPlus from '../../assets/icons/purple_ring+.svg';
 import PurpleRing from '../../assets/icons/purple_ring.svg';
@@ -17,7 +17,7 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {ScreenType, UserType} from '../../types';
+import {UserType} from '../../types';
 import {
   ERROR_LINK,
   ERROR_UNABLE_TO_FIND_PROFILE,
@@ -33,7 +33,7 @@ interface TaggProps {
   setSocialDataNeedUpdate: (social: string, username: string) => void;
   userXId: string | undefined;
   user: UserType;
-  screenType: ScreenType;
+  whiteRing: boolean | undefined;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -44,7 +44,7 @@ const Tagg: React.FC<TaggProps> = ({
   setSocialDataNeedUpdate,
   userXId,
   user,
-  screenType,
+  whiteRing,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
@@ -100,8 +100,9 @@ const Tagg: React.FC<TaggProps> = ({
 
   const pickTheRightRingHere = () => {
     if (youMayPass) {
-      if (screenType === ScreenType.SuggestedPeople)
+      if (whiteRing) {
         return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
+      }
       if (social === 'Tagg') {
         return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
       } else {
@@ -141,23 +142,14 @@ const Tagg: React.FC<TaggProps> = ({
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}
           />
-          <View
-            style={
-              screenType === ScreenType.SuggestedPeople
-                ? styles.spcontainer
-                : styles.container
-            }>
+          <View style={whiteRing ? styles.spcontainer : styles.container}>
             <TouchableOpacity
               style={styles.iconTap}
               onPress={modalOrAuthBrowserOrPass}>
-              <SocialIcon
-                style={styles.icon}
-                social={social}
-                screenType={screenType}
-              />
+              <SocialIcon style={styles.icon} social={social} whiteRing />
               {pickTheRightRingHere()}
             </TouchableOpacity>
-            {screenType !== ScreenType.SuggestedPeople && (
+            {!whiteRing && (
               <View style={styles.smallIconContainer}>
                 <SmallSocialIcon
                   style={[
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index c23f56a9..aaf9a531 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -20,12 +20,14 @@ interface TaggsBarProps {
   profileBodyHeight: number;
   userXId: string | undefined;
   screenType: ScreenType;
+  whiteRing: boolean | undefined;
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
   profileBodyHeight,
   userXId,
   screenType,
+  whiteRing,
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
@@ -61,6 +63,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
         );
         let new_taggs = [];
         let i = 0;
+        console.log('whiteRing in taggsbar: ', whiteRing);
         for (let social of linkedSocials) {
           new_taggs.push(
             <Tagg
@@ -72,12 +75,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
               setSocialDataNeedUpdate={handleSocialUpdate}
-              screenType={screenType}
+              whiteRing={whiteRing ? whiteRing : undefined}
             />,
           );
           i++;
         }
-        if (!userXId && screenType !== ScreenType.SuggestedPeople) {
+        if (!userXId && !whiteRing) {
           for (let social of unlinkedSocials) {
             new_taggs.push(
               <Tagg
@@ -89,7 +92,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
                 setSocialDataNeedUpdate={handleSocialUpdate}
                 userXId={userXId}
                 user={user}
-                screenType={screenType}
+                whiteRing ={whiteRing ? whiteRing : undefined}
               />,
             );
             i++;
@@ -126,7 +129,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   return taggs.length > 0 ? (
     <View
       style={
-        screenType === ScreenType.SuggestedPeople
+        whiteRing
           ? [styles.spContainer]
           : [styles.container, {shadowOpacity, paddingTop}]
       }>
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 3437cd85..c81c4f8c 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -77,6 +77,7 @@ const SuggestedPeopleScreen: React.FC = () => {
             userXId={undefined}
             profileBodyHeight={0}
             screenType={ScreenType.SuggestedPeople}
+            whiteRing={true}
           />
           <MutualFriends />
         </View>