Merge pull request #237 from shravyaramesh/tma255-taggs-bar

[TMA255] Suggested People: Taggs bar

1 files changed, 16 insertions, 3 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 76833d65..e7bdb0f2 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -72,11 +72,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
               setSocialDataNeedUpdate={handleSocialUpdate}
+              screenType={screenType}
             />,
           );
           i++;
         }
-        if (!userXId) {
+        if (!userXId && screenType !== ScreenType.SuggestedPeople) {
           for (let social of unlinkedSocials) {
             new_taggs.push(
               <Tagg
@@ -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,
   },
 });