[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, 13 insertions, 14 deletions

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%',
   },
 });