added taggs bar and white ring

1 files changed, 26 insertions, 15 deletions

diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index cba7777a..29b55786 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -5,6 +5,7 @@ import PurpleRingPlus from '../../assets/icons/purple_ring+.svg';
 import PurpleRing from '../../assets/icons/purple_ring.svg';
 import RingPlus from '../../assets/icons/ring+.svg';
 import Ring from '../../assets/icons/ring.svg';
+import WhiteRing from '../../assets/icons/ring-white.svg';
 import {
   INTEGRATED_SOCIAL_LIST,
   SOCIAL_ICON_SIZE_ADJUSTMENT,
@@ -16,7 +17,7 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {UserType} from '../../types';
+import {ScreenType, UserType} from '../../types';
 import {
   ERROR_LINK,
   ERROR_UNABLE_TO_FIND_PROFILE,
@@ -32,6 +33,7 @@ interface TaggProps {
   setSocialDataNeedUpdate: (social: string, username: string) => void;
   userXId: string | undefined;
   user: UserType;
+  screenType: ScreenType;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -42,6 +44,7 @@ const Tagg: React.FC<TaggProps> = ({
   setSocialDataNeedUpdate,
   userXId,
   user,
+  screenType,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
@@ -97,6 +100,8 @@ const Tagg: React.FC<TaggProps> = ({
 
   const pickTheRightRingHere = () => {
     if (youMayPass) {
+      if (screenType === ScreenType.SuggestedPeople)
+        return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
       if (social === 'Tagg') {
         return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
       } else {
@@ -140,21 +145,27 @@ const Tagg: React.FC<TaggProps> = ({
             <TouchableOpacity
               style={styles.iconTap}
               onPress={modalOrAuthBrowserOrPass}>
-              <SocialIcon style={styles.icon} social={social} />
-              {pickTheRightRingHere()}
-            </TouchableOpacity>
-            <View style={styles.smallIconContainer}>
-              <SmallSocialIcon
-                style={[
-                  styles.smallIcon,
-                  {
-                    height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
-                    width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
-                  },
-                ]}
+              <SocialIcon
+                style={styles.icon}
                 social={social}
+                screenType={ScreenType.Profile}
               />
-            </View>
+              {pickTheRightRingHere()}
+            </TouchableOpacity>
+            {screenType !== ScreenType.SuggestedPeople && (
+              <View style={styles.smallIconContainer}>
+                <SmallSocialIcon
+                  style={[
+                    styles.smallIcon,
+                    {
+                      height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+                      width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+                    },
+                  ]}
+                  social={social}
+                />
+              </View>
+            )}
           </View>
         </>
       )}
@@ -166,7 +177,7 @@ const styles = StyleSheet.create({
   container: {
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginHorizontal: 15,
+    marginRight: 34,
     height: normalize(90),
   },
   iconTap: {