From 0cb19c5b173d4cf6ba67378cbffd61abac7f18c3 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <37447613+shravyaramesh@users.noreply.github.com>
Date: Tue, 8 Dec 2020 20:18:07 -0800
Subject: [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>
---
 src/components/profile/ProfileBody.tsx   | 27 +++++++++++++--------------
 src/components/profile/ProfileHeader.tsx |  1 +
 src/components/profile/ToggleButton.tsx  |  3 +--
 3 files changed, 15 insertions(+), 16 deletions(-)

(limited to 'src/components/profile')

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',
-- 
cgit v1.2.3-70-g09d2