[HOTFIX] Accomodate large names and match figma (#167)

* HOTFIX : Accomodate large names and match figma

* Fix

1 files changed, 27 insertions, 13 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 5c14b374..8d502d97 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -2,6 +2,7 @@ import React, {useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {UniversityIcon} from '.';
+import {NO_MOMENTS} from '../../store/initialStates';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
@@ -28,8 +29,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   } = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
     : useSelector((state: RootState) => state.user);
-
   const [drawerVisible, setDrawerVisible] = useState(false);
+  const [firstName, lastName] = [...name.split(' ')];
 
   return (
     <View style={styles.container}>
@@ -49,8 +50,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           screenType={screenType}
         />
         <View style={styles.header}>
-          <Text style={styles.name}>{name}</Text>
-
+          {name.length <= 16 ? (
+            <Text style={styles.name}>{name}</Text>
+          ) : (
+            <View>
+              <Text style={styles.name}>{firstName}</Text>
+              <Text style={styles.name}>{lastName}</Text>
+            </View>
+          )}
           <View style={styles.friendsAndUniversity}>
             <FriendsCount
               style={styles.friends}
@@ -81,28 +88,35 @@ const styles = StyleSheet.create({
   header: {
     flexDirection: 'column',
     justifyContent: 'center',
-    marginTop: SCREEN_HEIGHT / 40,
-    marginLeft: SCREEN_WIDTH / 10,
-    marginBottom: SCREEN_HEIGHT / 50,
+    alignItems: 'center',
+    marginTop: SCREEN_WIDTH / 18.2,
+    marginLeft: SCREEN_WIDTH / 8,
+    marginBottom: SCREEN_WIDTH / 50,
   },
   avatar: {
-    bottom: SCREEN_HEIGHT / 80,
+    bottom: SCREEN_WIDTH / 80,
     left: '10%',
   },
   name: {
-    marginHorizontal: '20%',
-    fontSize: 20,
+    marginLeft: SCREEN_WIDTH / 8,
+    fontSize: 17,
     fontWeight: '500',
     alignSelf: 'center',
-    marginBottom: SCREEN_HEIGHT / 80,
   },
   friends: {
-    marginRight: SCREEN_HEIGHT / 80,
+    alignSelf: 'flex-start',
+    marginRight: SCREEN_WIDTH / 20,
   },
   university: {
-    marginLeft: SCREEN_HEIGHT / 50,
+    alignSelf: 'flex-end',
+    bottom: 3,
+  },
+  friendsAndUniversity: {
+    flexDirection: 'row',
+    flex: 1,
+    marginLeft: SCREEN_WIDTH / 10,
+    marginTop: SCREEN_WIDTH / 40,
   },
-  friendsAndUniversity: {flexDirection: 'row', flex: 1, marginLeft: '20%'},
 });
 
 export default ProfileHeader;