From 704c6c6bada682ec7e9008a775f4719fd1d0bd00 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 15:00:39 -0500 Subject: fixed isIPhoneX and adjusted spacing --- src/components/profile/ProfileHeader.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/components/profile/ProfileHeader.tsx') diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 8d502d97..9c91c079 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 {PROFILE_CUTOUT_TOP_Y} from '../../constants'; import {NO_MOMENTS} from '../../store/initialStates'; import {RootState} from '../../store/rootreducer'; import {ScreenType} from '../../types'; @@ -78,7 +79,7 @@ const ProfileHeader: React.FC = ({ const styles = StyleSheet.create({ container: { - top: SCREEN_HEIGHT / 2.4, + top: PROFILE_CUTOUT_TOP_Y * 0.96, width: '100%', position: 'absolute', }, -- cgit v1.2.3-70-g09d2 From 238bc768a1610b558263b449b2938e1244450b92 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 16:11:00 -0500 Subject: updated profile header styling --- src/components/profile/ProfileHeader.tsx | 32 +++++++++++++----------- src/components/profile/ProfileMoreInfoDrawer.tsx | 1 - src/components/profile/UniversityIcon.tsx | 7 ++++-- 3 files changed, 22 insertions(+), 18 deletions(-) (limited to 'src/components/profile/ProfileHeader.tsx') diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 9c91c079..8c7a3301 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -79,44 +79,46 @@ const ProfileHeader: React.FC = ({ const styles = StyleSheet.create({ container: { - top: PROFILE_CUTOUT_TOP_Y * 0.96, + top: PROFILE_CUTOUT_TOP_Y * 1.02, width: '100%', position: 'absolute', + // borderWidth: 1, }, row: { flexDirection: 'row', }, 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, + // borderWidth: 1, }, avatar: { - bottom: SCREEN_WIDTH / 80, - left: '10%', + marginLeft: '3%', + top: '-8%', }, name: { - marginLeft: SCREEN_WIDTH / 8, fontSize: 17, fontWeight: '500', alignSelf: 'center', + // borderWidth: 1, }, friends: { - alignSelf: 'flex-start', - marginRight: SCREEN_WIDTH / 20, + // borderWidth: 1, }, university: { - alignSelf: 'flex-end', - bottom: 3, + // borderWidth: 1, }, friendsAndUniversity: { flexDirection: 'row', - flex: 1, - marginLeft: SCREEN_WIDTH / 10, - marginTop: SCREEN_WIDTH / 40, + alignItems: 'center', + justifyContent: 'space-evenly', + width: '100%', + height: 50, + // borderWidth: 1, }, }); diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx index 76f0f27f..26a4756a 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/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx index 13586359..a901998f 100644 --- a/src/components/profile/UniversityIcon.tsx +++ b/src/components/profile/UniversityIcon.tsx @@ -38,19 +38,22 @@ const UniversityIcon: React.FC = ({ const styles = StyleSheet.create({ container: { - flex: 1, flexDirection: 'column', flexWrap: 'wrap', justifyContent: 'center', + alignItems: 'center', + height: '100%', }, univClass: { fontSize: 13, fontWeight: '500', }, icon: { - alignSelf: 'center', + // alignSelf: 'center', + // width: '5%', width: 17, height: 19, + // aspectRatio: 17 / 19, }, }); -- cgit v1.2.3-70-g09d2 From 27af1338ae8e735c831659fab8e51b795b368be4 Mon Sep 17 00:00:00 2001 From: Ivan Chen 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/ProfileHeader.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 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/ProfileHeader.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 = ({ : useSelector((state: RootState) => state.user); const [drawerVisible, setDrawerVisible] = useState(false); const [firstName, lastName] = [...name.split(' ')]; - return ( 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 From cf420db54deb32be1e6bc4092eef105cc23d93e4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 22 Jan 2021 18:31:55 -0500 Subject: fixed merge issue and addressed review --- src/components/profile/ProfileHeader.tsx | 9 +-------- src/screens/profile/MomentCommentsScreen.tsx | 3 +-- 2 files changed, 2 insertions(+), 10 deletions(-) (limited to 'src/components/profile/ProfileHeader.tsx') diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx index 7fc90257..7dad2a68 100644 --- a/src/components/profile/ProfileHeader.tsx +++ b/src/components/profile/ProfileHeader.tsx @@ -58,13 +58,8 @@ const ProfileHeader: React.FC = ({ )} - + @@ -101,8 +96,6 @@ const styles = StyleSheet.create({ fontWeight: '500', alignSelf: 'center', }, - friends: {}, - university: {}, friendsAndUniversity: { flexDirection: 'row', alignItems: 'center', diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index dee86e15..fa35a33b 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -13,8 +13,7 @@ import {AddComment} from '../../components/'; import {ProfileStackParams} from '../../routes/main'; import {logout} from '../../store/actions'; import {CommentType} from '../../types'; -import {SCREEN_WIDTH} from '../../utils'; -import {SCREEN_HEIGHT} from '../../utils/screenDimensions'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; /** * Comments Screen for an image uploaded -- cgit v1.2.3-70-g09d2