[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>

2 files changed, 41 insertions, 56 deletions

diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 8158cbac..4c8f8226 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -8,7 +8,6 @@ import Ring from '../../assets/icons/ring.svg';
 import {
   INTEGRATED_SOCIAL_LIST,
   SOCIAL_ICON_SIZE_ADJUSTMENT,
-  TAGG_ICON_DIM,
   TAGG_RING_DIM,
 } from '../../constants';
 import {
@@ -17,9 +16,7 @@ import {
   registerNonIntegratedSocialLink,
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {useSelector} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {ScreenType} from '../../types';
+import {UserType} from '../../types';
 
 interface TaggProps {
   social: string;
@@ -28,7 +25,7 @@ interface TaggProps {
   setTaggsNeedUpdate: (_: boolean) => void;
   setSocialDataNeedUpdate: (social: string, username: string) => void;
   userXId: string;
-  screenType: ScreenType;
+  user: UserType;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -38,14 +35,12 @@ const Tagg: React.FC<TaggProps> = ({
   setTaggsNeedUpdate,
   setSocialDataNeedUpdate,
   userXId,
-  screenType,
+  user,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
   const youMayPass = isLinked || userXId;
-  const {user} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+
   /*
   case isProfileView:
     case linked:
@@ -160,27 +155,28 @@ const Tagg: React.FC<TaggProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
     marginHorizontal: 15,
+    height: 90,
   },
   iconTap: {
     justifyContent: 'center',
     alignItems: 'center',
   },
   icon: {
-    width: TAGG_ICON_DIM,
-    height: TAGG_ICON_DIM,
-    borderRadius: TAGG_ICON_DIM / 2,
+    width: '77%',
+    height: '77%',
+    borderRadius: 30,
     position: 'absolute',
   },
   smallIconContainer: {
-    height: 35,
-    width: 35,
+    height: 20,
+    width: 20,
     position: 'absolute',
     justifyContent: 'center',
     alignItems: 'center',
-    bottom: -35,
+    bottom: 0,
   },
   smallIcon: {
     borderRadius: 1000,
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,
   },
 });