[TMA-338, TMA-400] Zoom out on profile page and adjust follow/block button touchable opacity (#132)

* changed dimensions of username, bio, website, moment tiles; Changed padding in profile body; Added padding between moment tiles;

* adjusted spacing between profile cutout and body

* adjusting space below profile cutout accoring to device

* Ensuring userId exists before loading taggs

* Made tagg icons responsive according to device dimensions

* shoft profile picture to the left

* Fix bug

* small

* flex

* flex remove

* Shrunk taggs bar icons and readjusted padding around it

Co-authored-by: Ashm Walia <ashmwalia@outlook.com>

1 files changed, 29 insertions, 40 deletions

diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 082743d0..68061e03 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useContext} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector} from 'react-redux';
@@ -8,7 +8,6 @@ import {
   SOCIAL_LIST,
 } from '../../constants';
 import {getLinkedSocials} from '../../services';
-import {StatusBarHeight} from '../../utils';
 import Tagg from './Tagg';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
@@ -67,7 +66,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               key={i}
               social={social}
               userXId={userXId}
-              screenType={screenType}
+              user={user}
               isLinked={true}
               isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
               setTaggsNeedUpdate={setTaggsNeedUpdate}
@@ -76,27 +75,30 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
           );
           i++;
         }
-        for (let social of unlinkedSocials) {
-          new_taggs.push(
-            <Tagg
-              key={i}
-              social={social}
-              userXId={userXId}
-              screenType={screenType}
-              isLinked={false}
-              isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
-              setTaggsNeedUpdate={setTaggsNeedUpdate}
-              setSocialDataNeedUpdate={handleSocialUpdate}
-            />,
-          );
-          i++;
+        if (!userXId) {
+          for (let social of unlinkedSocials) {
+            new_taggs.push(
+              <Tagg
+                key={i}
+                social={social}
+                isLinked={false}
+                isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
+                setTaggsNeedUpdate={setTaggsNeedUpdate}
+                setSocialDataNeedUpdate={handleSocialUpdate}
+                userXId={userXId}
+                user={user}
+              />,
+            );
+            i++;
+          }
         }
         setTaggs(new_taggs);
         setTaggsNeedUpdate(false);
       });
     };
-
-    loadData();
+    if (user.userId) {
+      loadData();
+    }
   }, [taggsNeedUpdate, user]);
 
   const shadowOpacity: Animated.Node<number> = interpolate(y, {
@@ -107,34 +109,18 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
     outputRange: [0, 0.2],
     extrapolate: Extrapolate.CLAMP,
   });
-  const paddingTop: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      0,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-    ],
-    outputRange: [20, 20, StatusBarHeight],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  const paddingBottom: Animated.Node<number> = interpolate(y, {
-    inputRange: [
-      0,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight - 30,
-      PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight,
-    ],
-    outputRange: [30, 30, 15],
-    extrapolate: Extrapolate.CLAMP,
-  });
-  return (
+
+  return taggs.length > 0 ? (
     <View style={[styles.container, {shadowOpacity}]}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}
-        style={{paddingTop, paddingBottom}}
         contentContainerStyle={styles.contentContainer}>
         {taggs}
       </ScrollView>
     </View>
+  ) : (
+    <View style={{height: 0, backgroundColor: 'lightpink'}} />
   );
 };
 
@@ -145,10 +131,13 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     shadowOffset: {width: 0, height: 2},
     zIndex: 1,
+    paddingBottom: 5,
+    paddingTop: 10,
   },
   contentContainer: {
     alignItems: 'center',
-    paddingHorizontal: 10,
+    paddingHorizontal: 5,
+    paddingBottom: 5,
   },
 });