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

8 files changed, 68 insertions, 81 deletions

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 0c8febcf..e928f7e0 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -80,7 +80,7 @@ const Moment: React.FC<MomentProps> = ({
             <LinearGradient
               colors={['rgba(105, 141, 211, 1)', 'rgba(105, 141, 211, 0.3)']}>
               <View style={styles.defaultImage}>
-                <BigPlusIcon width={50} height={50} />
+                <BigPlusIcon width={24} height={24} />
                 <Text style={styles.defaultImageText}>
                   Add a moment of your {title.toLowerCase()}!
                 </Text>
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
   },
   header: {
     flex: 1,
-    paddingHorizontal: 10,
+    paddingLeft: '3%',
     padding: 5,
     paddingTop: 20,
     backgroundColor: 'white',
@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
     color: TAGG_TEXT_LIGHT_BLUE,
   },
   scrollContainer: {
-    height: SCREEN_WIDTH / 2,
+    height: SCREEN_WIDTH / 3.25,
     backgroundColor: '#eee',
   },
   defaultImage: {
@@ -126,11 +126,11 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   defaultImageText: {
-    fontSize: 20,
-    paddingTop: 20,
+    fontSize: 14,
+    paddingTop: 10,
     color: 'white',
     fontWeight: 'bold',
-    width: '75%',
+    width: '80%',
     textAlign: 'center',
   },
 });
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index cc24c531..05ccfa15 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     flexDirection: 'column',
+    marginRight: 5,
   },
 });
 export default MomentTile;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index dbaf78c9..57800578 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -33,20 +33,19 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   } = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
-
+  
   const {biography, website} = profile;
-
   return (
     <View onLayout={onLayout} style={styles.container}>
       <Text style={styles.username}>{`@${username}`}</Text>
-      <Text style={styles.biography}>{`${biography}`}</Text>
-      <Text
-        style={styles.website}
-        onPress={() => {
+      {biography.length > 0 && (
+        <Text style={styles.biography}>{`${biography}`}</Text>
+      )}
+      {website.length > 0 && <Text style={styles.website} onPress={() => {
           Linking.openURL(
             website.startsWith('http') ? website : 'http://' + website,
           );
-        }}>{`${website}`}</Text>
+        }}>{`${website}`}</Text>}
       {userXId && !isOwnProfile ? (
         <View style={styles.toggleButtonContainer}>
           {!isBlocked && (
@@ -73,26 +72,26 @@ const styles = StyleSheet.create({
   toggleButtonContainer: {
     flexDirection: 'row',
     flex: 1,
+    paddingVertical: '1%',
   },
   container: {
-    paddingVertical: 5,
-    paddingHorizontal: 20,
+    paddingVertical: '1%',
+    paddingHorizontal: 18,
     backgroundColor: 'white',
   },
   username: {
     fontWeight: '600',
-    fontSize: 16,
-    marginBottom: 5,
+    fontSize: 16.5,
+    marginBottom: '1%',
   },
   biography: {
     fontSize: 16,
-    lineHeight: 22,
-    marginBottom: 5,
+    marginBottom: '0.5%',
   },
   website: {
     fontSize: 16,
     color: TAGG_DARK_BLUE,
-    marginBottom: 5,
+    marginBottom: '1%',
   },
 });
 
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 677728d2..b622510e 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -74,6 +74,7 @@ const styles = StyleSheet.create({
   },
   avatar: {
     bottom: SCREEN_HEIGHT / 80,
+    left: '10%',
   },
   name: {
     fontSize: 20,
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 4c8cb5b9..88eb9f8a 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -31,11 +31,10 @@ const styles = StyleSheet.create({
     width: SCREEN_WIDTH * 0.25,
     height: SCREEN_WIDTH * 0.1,
     borderRadius: 8,
-    marginTop: '3%',
     borderColor: TAGG_TEXT_LIGHT_BLUE,
     backgroundColor: 'white',
     borderWidth: 3,
-    marginHorizontal: '1%',
+    marginRight: '2%',
   },
   text: {
     fontWeight: 'bold',
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,
   },
 });
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 570018b2..c14068c1 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -1,9 +1,11 @@
-import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utils';
+import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX} from '../utils';
 
 export const CHIN_HEIGHT = 34;
 
 export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT / 2.3;
-export const PROFILE_CUTOUT_BOTTOM_Y = SCREEN_HEIGHT / 1.8;
+export const PROFILE_CUTOUT_BOTTOM_Y = isIPhoneX()
+  ? SCREEN_HEIGHT / 1.86
+  : SCREEN_HEIGHT / 1.76;
 export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH / 2.9;
 export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95;
 
@@ -15,7 +17,7 @@ export const AVATAR_DIM = 44;
 export const AVATAR_GRADIENT_DIM = 50;
 
 export const TAGG_ICON_DIM = 58;
-export const TAGG_RING_DIM = 75;
+export const TAGG_RING_DIM = 65;
 
 export const INTEGRATED_SOCIAL_LIST: string[] = [
   'Instagram',