From 704c6c6bada682ec7e9008a775f4719fd1d0bd00 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 21 Jan 2021 15:00:39 -0500
Subject: fixed isIPhoneX and adjusted spacing

---
 src/components/profile/Content.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/components/profile/Content.tsx')

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index e7fb566b..82803a7a 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -113,9 +113,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
     false,
   );
-  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
-    boolean
-  >(false);
+  const [
+    isStageThreePromptClosed,
+    setIsStageThreePromptClosed,
+  ] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
@@ -284,7 +285,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 momentCategories.filter((mc) => mc !== category),
                 false,
               ),
-            )
+            );
             dispatch(deleteUserMomentsForCategory(category));
           },
         },
-- 
cgit v1.2.3-70-g09d2


From 27af1338ae8e735c831659fab8e51b795b368be4 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 21 Jan 2021 16:16:07 -0500
Subject: linting

---
 src/components/profile/Content.tsx           | 11 +----------
 src/components/profile/ProfileHeader.tsx     |  2 --
 src/screens/profile/MomentCommentsScreen.tsx |  2 +-
 3 files changed, 2 insertions(+), 13 deletions(-)

(limited to 'src/components/profile/Content.tsx')

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 82803a7a..a2bd3cf3 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -10,16 +10,7 @@ import {
   View,
 } from 'react-native';
 import Animated from 'react-native-reanimated';
-import {
-  CategorySelectionScreenType,
-  FriendshipStatusType,
-  MomentCategoryType,
-  MomentType,
-  ProfilePreviewType,
-  ProfileType,
-  ScreenType,
-  UserType,
-} from '../../types';
+import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
 import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {
   fetchUserX,
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 8c7a3301..26bbbc90 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -3,10 +3,8 @@ import {StyleSheet, Text, View} from 'react-native';
 import {useSelector} from 'react-redux';
 import {UniversityIcon} from '.';
 import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
-import {NO_MOMENTS} from '../../store/initialStates';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import Avatar from './Avatar';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ebe4da28..1d27929e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -4,7 +4,7 @@ import {ProfileStackParams} from '../../routes/main';
 import {CenteredView, CommentTile} from '../../components';
 import {CommentType} from '../../types';
 import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SCREEN_WIDTH} from '../../utils/screenDimensions';
+import {SCREEN_WIDTH} from '../../utils';
 import {Button} from 'react-native-elements';
 import {AddComment} from '../../components/';
 import {useEffect} from 'react';
-- 
cgit v1.2.3-70-g09d2


From d6714bec669becb4132035ffdf7b9b87e9c6ce7b Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 21 Jan 2021 16:59:30 -0500
Subject: normalize function and normalized all fonts on profile page

---
 src/components/moments/Moment.tsx         |  9 ++-------
 src/components/profile/Content.tsx        |  5 +++--
 src/components/profile/FriendsCount.tsx   |  5 +++--
 src/components/profile/ProfileBody.tsx    |  8 ++++----
 src/components/profile/ProfileHeader.tsx  | 16 ++++------------
 src/components/profile/UniversityIcon.tsx | 11 ++++-------
 src/constants/constants.ts                |  2 +-
 src/utils/layouts.ts                      | 21 +++++++++++++++++++--
 8 files changed, 40 insertions(+), 37 deletions(-)

(limited to 'src/components/profile/Content.tsx')

diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7905e8a9..b08eb574 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -13,7 +13,7 @@ import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
-import {SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
 
 interface MomentProps {
@@ -171,15 +171,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   titleText: {
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: 'bold',
     color: TAGG_TEXT_LIGHT_BLUE,
   },
-  // titleContainer: {
-  //   flex: 1,
-  //   flexDirection: 'row',
-  //   justifyContent: 'flex-end',
-  // },
   flexer: {
     flex: 1,
   },
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a2bd3cf3..140c911c 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -16,6 +16,7 @@ import {
   fetchUserX,
   getUserAsProfilePreviewType,
   moveCategory,
+  normalize,
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
@@ -424,7 +425,7 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   createCategoryButtonLabel: {
-    fontSize: 16,
+    fontSize: normalize(16),
     fontWeight: '500',
     color: 'white',
   },
@@ -435,7 +436,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 0b00481b..7bc927c1 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_TEXT_LIGHT_BLUE,
@@ -160,15 +160,15 @@ const styles = StyleSheet.create({
   },
   username: {
     fontWeight: '600',
-    fontSize: 16.5,
+    fontSize: normalize(12),
     marginBottom: '1%',
   },
   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 26bbbc90..7fc90257 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -5,6 +5,7 @@ import {UniversityIcon} from '.';
 import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
 import {RootState} from '../../store/rootreducer';
 import {ScreenType} from '../../types';
+import {normalize} from '../../utils';
 import Avatar from './Avatar';
 import FriendsCount from './FriendsCount';
 import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -30,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
@@ -80,7 +80,6 @@ const styles = StyleSheet.create({
     top: PROFILE_CUTOUT_TOP_Y * 1.02,
     width: '100%',
     position: 'absolute',
-    // borderWidth: 1,
   },
   row: {
     flexDirection: 'row',
@@ -92,31 +91,24 @@ const styles = StyleSheet.create({
     marginRight: '15%',
     marginLeft: '5%',
     flex: 1,
-    // borderWidth: 1,
   },
   avatar: {
     marginLeft: '3%',
     top: '-8%',
   },
   name: {
-    fontSize: 17,
+    fontSize: normalize(17),
     fontWeight: '500',
     alignSelf: 'center',
-    // borderWidth: 1,
-  },
-  friends: {
-    // borderWidth: 1,
-  },
-  university: {
-    // borderWidth: 1,
   },
+  friends: {},
+  university: {},
   friendsAndUniversity: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-evenly',
     width: '100%',
     height: 50,
-    // borderWidth: 1,
   },
 });
 
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index a901998f..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;
@@ -45,15 +45,12 @@ const styles = StyleSheet.create({
     height: '100%',
   },
   univClass: {
-    fontSize: 13,
+    fontSize: normalize(14),
     fontWeight: '500',
   },
   icon: {
-    // alignSelf: 'center',
-    // width: '5%',
-    width: 17,
-    height: 19,
-    // aspectRatio: 17 / 19,
+    width: normalize(17),
+    height: normalize(19),
   },
 });
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 0346c45f..557eef3a 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -6,7 +6,7 @@ export const CHIN_HEIGHT = 34;
 
 export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT * 0.435;
 export const PROFILE_CUTOUT_BOTTOM_Y = isIPhoneX()
-  ? SCREEN_HEIGHT * 0.54
+  ? SCREEN_HEIGHT * 0.55
   : SCREEN_HEIGHT * 0.58;
 export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH * 0.344;
 export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT * 0.513;
diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts
index fbe32189..e2f1f0b1 100644
--- a/src/utils/layouts.ts
+++ b/src/utils/layouts.ts
@@ -1,10 +1,12 @@
-import {Platform, StatusBar} from 'react-native';
+import {PixelRatio, Platform, StatusBar} from 'react-native';
 import {Dimensions} from 'react-native';
 
 export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get(
   'window',
 );
 
+export const SCREEN_RATIO = SCREEN_HEIGHT / SCREEN_WIDTH;
+
 /**
  * Working as of Q1 2021, latest iPhone is 12
  * iPhone 8/SE has a logical screen ratio of about 1.77
@@ -12,7 +14,7 @@ export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get(
  */
 export const isIPhoneX = () =>
   Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS
-    ? SCREEN_HEIGHT / SCREEN_WIDTH > 2
+    ? SCREEN_RATIO > 2
     : false;
 
 // Taken from: https://github.com/react-navigation/react-navigation/issues/283
@@ -29,3 +31,18 @@ export const StatusBarHeight = Platform.select({
 });
 
 export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3;
+
+/**
+ * This is a function for normalizing the font size for different devices, based on iphone 8.
+ *
+ * E.g. font size 13 on an iphone 8 is 13, but on an iPhone 11 is
+ * 14.5
+ */
+export const normalize = (fontSize: number) => {
+  // based on iphone 8 logical screen width
+  const scale = SCREEN_WIDTH / 375;
+  let newSize = fontSize * scale;
+  // round to the nearest 0.5
+  newSize = Math.round(PixelRatio.roundToNearestPixel(newSize) * 2) / 2;
+  return newSize;
+};
-- 
cgit v1.2.3-70-g09d2

