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/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 = ({y, userXId, screenType}) => { const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState( false, ); - const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState< - boolean - >(false); + const [ + isStageThreePromptClosed, + setIsStageThreePromptClosed, + ] = useState(false); const onRefresh = useCallback(() => { const refrestState = async () => { @@ -284,7 +285,7 @@ const Content: React.FC = ({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 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 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 = ({ : 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