Merge pull request #196 from IvanIFChen/tma552-adjust-styles-and-sizes

[TMA-552] Adjust Styles and Sizes

1 files changed, 15 insertions, 29 deletions

diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 8d502d97..7dad2a68 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -2,10 +2,10 @@ 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 {PROFILE_CUTOUT_TOP_Y} from '../../constants';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize} from '../../utils';
 import Avatar from './Avatar';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -31,7 +31,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
     : useSelector((state: RootState) => state.user);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [firstName, lastName] = [...name.split(' ')];
-
   return (
     <View style={styles.container}>
       <ProfileMoreInfoDrawer
@@ -59,13 +58,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
             </View>
           )}
           <View style={styles.friendsAndUniversity}>
-            <FriendsCount
-              style={styles.friends}
-              screenType={screenType}
-              userXId={userXId}
-            />
+            <FriendsCount screenType={screenType} userXId={userXId} />
             <UniversityIcon
-              style={styles.university}
               university="brown"
               university_class={university_class}
             />
@@ -78,7 +72,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    top: SCREEN_HEIGHT / 2.4,
+    top: PROFILE_CUTOUT_TOP_Y * 1.02,
     width: '100%',
     position: 'absolute',
   },
@@ -87,35 +81,27 @@ const styles = StyleSheet.create({
   },
   header: {
     flexDirection: 'column',
-    justifyContent: 'center',
+    justifyContent: 'space-evenly',
     alignItems: 'center',
-    marginTop: SCREEN_WIDTH / 18.2,
-    marginLeft: SCREEN_WIDTH / 8,
-    marginBottom: SCREEN_WIDTH / 50,
+    marginRight: '15%',
+    marginLeft: '5%',
+    flex: 1,
   },
   avatar: {
-    bottom: SCREEN_WIDTH / 80,
-    left: '10%',
+    marginLeft: '3%',
+    top: '-8%',
   },
   name: {
-    marginLeft: SCREEN_WIDTH / 8,
-    fontSize: 17,
+    fontSize: normalize(17),
     fontWeight: '500',
     alignSelf: 'center',
   },
-  friends: {
-    alignSelf: 'flex-start',
-    marginRight: SCREEN_WIDTH / 20,
-  },
-  university: {
-    alignSelf: 'flex-end',
-    bottom: 3,
-  },
   friendsAndUniversity: {
     flexDirection: 'row',
-    flex: 1,
-    marginLeft: SCREEN_WIDTH / 10,
-    marginTop: SCREEN_WIDTH / 40,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    width: '100%',
+    height: 50,
   },
 });