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

[TMA-552] Adjust Styles and Sizes

7 files changed, 47 insertions, 62 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index eb60a005..a35a5820 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -43,6 +43,7 @@ import {
   fetchUserX,
   getUserAsProfilePreviewType,
   moveCategory,
+  normalize,
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
@@ -426,7 +427,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   createCategoryButtonLabel: {
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: '500',
     color: 'white',
   },
@@ -437,7 +438,7 @@ const styles = StyleSheet.create({
     marginVertical: '10%',
   },
   noMomentsText: {
-    fontSize: 14,
+    fontSize: normalize(14),
     fontWeight: 'bold',
     color: 'gray',
     marginVertical: '8%',
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 23a24787..9647710e 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -5,6 +5,7 @@ import {useNavigation} from '@react-navigation/native';
 import {RootState} from '../../store/rootReducer';
 import {useSelector} from 'react-redux';
 import {ScreenType} from '../../types';
+import {normalize} from '../../utils';
 
 interface FriendsCountProps extends ViewProps {
   userXId: string | undefined;
@@ -55,11 +56,11 @@ const styles = StyleSheet.create({
   },
   count: {
     fontWeight: '700',
-    fontSize: 13,
+    fontSize: normalize(14),
   },
   label: {
     fontWeight: '500',
-    fontSize: 13,
+    fontSize: normalize(14),
   },
 });
 
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index a45e9e43..d10e2e15 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
-import {Button} from 'react-native-elements';
+import {Button, normalize} from 'react-native-elements';
 import {
   TAGG_DARK_BLUE,
   TAGG_LIGHT_BLUE,
@@ -160,16 +160,15 @@ const styles = StyleSheet.create({
   },
   username: {
     fontWeight: '600',
-    fontSize: 16.5,
+    fontSize: normalize(12),
     marginBottom: '1%',
-    marginTop: '-3%',
   },
   biography: {
-    fontSize: 16,
+    fontSize: normalize(12),
     marginBottom: '1.5%',
   },
   website: {
-    fontSize: 16,
+    fontSize: normalize(12),
     color: TAGG_DARK_BLUE,
     marginBottom: '1%',
   },
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,
   },
 });
 
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 9fe36ae1..daa83eb3 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -107,7 +107,6 @@ const styles = StyleSheet.create({
   more: {
     position: 'absolute',
     right: '5%',
-    marginTop: '4%',
     zIndex: 1,
   },
 });
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index b2c0a24d..389ca367 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -1,27 +1,26 @@
-import React, {useEffect, useState, useContext} from 'react';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
 import {
-  View,
-  Text,
+  Alert,
   Image,
   StyleSheet,
-  ViewProps,
+  Text,
   TouchableOpacity,
-  Alert,
+  View,
+  ViewProps,
 } from 'react-native';
-import {useNavigation} from '@react-navigation/native';
-import RNFetchBlob from 'rn-fetch-blob';
-import AsyncStorage from '@react-native-community/async-storage';
-import {PROFILE_PHOTO_THUMBNAIL_ENDPOINT} from '../../constants';
-import {UserType, PreviewType} from '../../types';
-import {isUserBlocked, loadAvatar} from '../../services';
-import {useSelector, useDispatch, useStore} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
+import {loadAvatar} from '../../services';
 import {RootState} from '../../store/rootreducer';
-import {logout} from '../../store/actions';
+import {
+  PreviewType,
+  ProfilePreviewType,
+  ScreenType,
+  UserType,
+} from '../../types';
 import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
-import {SearchResultsBackground} from '../search';
-import NavigationBar from 'src/routes/tabs';
-import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 
 const NO_USER: UserType = {
   userId: '',
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 13586359..95aef8b9 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {StyleSheet, ViewProps} from 'react-native';
 import {Image, Text, View} from 'react-native-animatable';
-import {getUniversityClass} from '../../utils';
+import {getUniversityClass, normalize} from '../../utils';
 
 export interface UniversityIconProps extends ViewProps {
   university: string;
@@ -38,19 +38,19 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     flexDirection: 'column',
     flexWrap: 'wrap',
     justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
   },
   univClass: {
-    fontSize: 13,
+    fontSize: normalize(14),
     fontWeight: '500',
   },
   icon: {
-    alignSelf: 'center',
-    width: 17,
-    height: 19,
+    width: normalize(17),
+    height: normalize(19),
   },
 });