added taggs bar and white ring

6 files changed, 68 insertions, 22 deletions

diff --git a/src/assets/icons/ring-white.svg b/src/assets/icons/ring-white.svg
new file mode 100644
index 00000000..c78e9418
--- /dev/null
+++ b/src/assets/icons/ring-white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M108,1.83A106.17,106.17,0,1,0,214.17,108,106.16,106.16,0,0,0,108,1.83Zm0,198.58A92.41,92.41,0,1,1,200.41,108,92.41,92.41,0,0,1,108,200.41Z"/></svg>
\ No newline at end of file
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 28000dd7..86d40f1b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -309,7 +309,9 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           isBlocked,
         }}
       />
-      <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
+      <View style={styles.taggsbarContainer}>
+        <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
+      </View>
       <View style={styles.momentsContainer}>
         {userXId && moments.length === 0 && (
           <View style={styles.plusIconContainer}>
@@ -382,6 +384,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    backgroundColor: '#fff',
   },
   momentsContainer: {
     backgroundColor: '#f2f2f2',
@@ -415,6 +418,7 @@ const styles = StyleSheet.create({
     color: 'gray',
     marginVertical: '8%',
   },
+  taggsbarContainer: {paddingHorizontal: 15},
 });
 
 export default Content;
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: {
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 76833d65..cc0c70a7 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -72,6 +72,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
               setSocialDataNeedUpdate={handleSocialUpdate}
+              screenType={screenType}
             />,
           );
           i++;
@@ -88,6 +89,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
                 setSocialDataNeedUpdate={handleSocialUpdate}
                 userXId={userXId}
                 user={user}
+                screenType={screenType}
               />,
             );
             i++;
@@ -122,7 +124,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   });
 
   return taggs.length > 0 ? (
-    <View style={[styles.container, {shadowOpacity, paddingTop}]}>
+    <View
+      style={
+        screenType === ScreenType.SuggestedPeople
+          ? [styles.spContainer]
+          : [styles.container, {shadowOpacity, paddingTop}]
+      }>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
@@ -136,6 +143,13 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
 };
 
 const styles = StyleSheet.create({
+  spContainer: {
+    shadowColor: '#000',
+    shadowRadius: 10,
+    shadowOffset: {width: 0, height: 2},
+    zIndex: 1,
+    paddingBottom: 5,
+  },
   container: {
     backgroundColor: 'white',
     shadowColor: '#000',
@@ -146,7 +160,6 @@ const styles = StyleSheet.create({
   },
   contentContainer: {
     alignItems: 'center',
-    paddingHorizontal: 5,
     paddingBottom: 5,
   },
 });
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 1b6bb389..45d417a6 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -12,7 +12,7 @@ import {
 } from '../../components';
 import {AVATAR_GRADIENT} from '../../constants';
 import {ProfileStackParams} from '../../routes';
-import {SimplePostType, TwitterPostType, SocialAccountType} from '../../types';
+import {SimplePostType, TwitterPostType, SocialAccountType, ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 01698ac5..13dc422b 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   StatusBar,
   StyleSheet,
@@ -7,10 +7,20 @@ import {
   View,
 } from 'react-native';
 import {Image} from 'react-native-animatable';
-import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {TabsGradient} from '../../components';
+import {
+  fetchUserX,
+  isIPhoneX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
+import {TabsGradient, TaggsBar} from '../../components';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {normalize} from '../../utils';
+import Animated from 'react-native-reanimated';
+import {ScreenType} from '../../types';
+import {useDispatch, useStore} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
 
 /**
  * Bare bones for suggested people consisting of:
@@ -51,6 +61,12 @@ const SuggestedPeopleScreen: React.FC = () => {
               </TouchableOpacity>
             </View>
             {/* TODO: Add TaggsBar here */}
+            <TaggsBar
+              y={Animated.useValue(0)}
+              userXId={''}
+              profileBodyHeight={0}
+              screenType={ScreenType.SuggestedPeople}
+            />
             {/* TODO: Add MutualFriends here */}
           </View>
         </View>
@@ -139,6 +155,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'flex-start',
+    marginBottom: '5%',
   },
   body: {},
 });