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/constants/constants.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) (limited to 'src/constants') diff --git a/src/constants/constants.ts b/src/constants/constants.ts index b96d9438..0346c45f 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,13 +1,15 @@ import {ReactText} from 'react'; import {BackgroundGradientType, ExploreSectionType} from './../types/'; -import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../utils'; +import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX} from '../utils'; export const CHIN_HEIGHT = 34; -export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT / 2.3; -export const PROFILE_CUTOUT_BOTTOM_Y = SCREEN_HEIGHT / 1.76; -export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH / 2.9; -export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT / 1.95; +export const PROFILE_CUTOUT_TOP_Y = SCREEN_HEIGHT * 0.435; +export const PROFILE_CUTOUT_BOTTOM_Y = isIPhoneX() + ? SCREEN_HEIGHT * 0.54 + : SCREEN_HEIGHT * 0.58; +export const PROFILE_CUTOUT_CORNER_X = SCREEN_WIDTH * 0.344; +export const PROFILE_CUTOUT_CORNER_Y = SCREEN_HEIGHT * 0.513; export const IMAGE_WIDTH = SCREEN_WIDTH; export const IMAGE_HEIGHT = SCREEN_WIDTH; -- 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/constants') 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 ad321571af78b5ea58a8e3e35820d5c3cf1c607b Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 17:13:21 -0500 Subject: linting and normalizing tagg icons --- src/components/profile/ProfilePreview.tsx | 33 ++++++++++++++-------------- src/components/search/Explore.tsx | 4 ++-- src/components/search/ExploreSection.tsx | 3 ++- src/components/search/ExploreSectionUser.tsx | 6 ++--- src/components/taggs/Tagg.tsx | 3 ++- src/constants/constants.ts | 4 ++-- src/screens/search/SearchScreen.tsx | 7 +----- 7 files changed, 28 insertions(+), 32 deletions(-) (limited to 'src/constants') 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/search/Explore.tsx b/src/components/search/Explore.tsx index c07c66b8..4a71249b 100644 --- a/src/components/search/Explore.tsx +++ b/src/components/search/Explore.tsx @@ -4,6 +4,7 @@ import {useSelector} from 'react-redux'; import {EXPLORE_SECTION_TITLES} from '../../constants'; import {RootState} from '../../store/rootReducer'; import {ExploreSectionType} from '../../types'; +import {normalize} from '../../utils'; import ExploreSection from './ExploreSection'; const Explore: React.FC = () => { @@ -21,11 +22,10 @@ const Explore: React.FC = () => { const styles = StyleSheet.create({ container: { zIndex: 0, - // margin: '5%', }, header: { fontWeight: '700', - fontSize: 22, + fontSize: normalize(22), color: '#fff', marginBottom: '2%', margin: '5%', diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx index 8e8b4988..17079e77 100644 --- a/src/components/search/ExploreSection.tsx +++ b/src/components/search/ExploreSection.tsx @@ -1,6 +1,7 @@ import React, {Fragment} from 'react'; import {ScrollView, StyleSheet, Text, View} from 'react-native'; import {ProfilePreviewType} from '../../types'; +import {normalize} from '../../utils'; import ExploreSectionUser from './ExploreSectionUser'; /** @@ -34,7 +35,7 @@ const styles = StyleSheet.create({ }, header: { fontWeight: '600', - fontSize: 20, + fontSize: normalize(18), color: '#fff', marginLeft: '5%', marginBottom: '5%', diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx index 0bf68a20..68e077e3 100644 --- a/src/components/search/ExploreSectionUser.tsx +++ b/src/components/search/ExploreSectionUser.tsx @@ -12,7 +12,7 @@ import {useDispatch, useSelector, useStore} from 'react-redux'; import {loadAvatar} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType} from '../../types'; -import {fetchUserX, userXInStore} from '../../utils'; +import {fetchUserX, normalize, userXInStore} from '../../utils'; /** * Search Screen for user recommendations and a search @@ -110,13 +110,13 @@ const styles = StyleSheet.create({ name: { fontWeight: '600', flexWrap: 'wrap', - fontSize: 16, + fontSize: normalize(16), color: '#fff', textAlign: 'center', }, username: { fontWeight: '400', - fontSize: 14, + fontSize: normalize(14), color: '#fff', }, }); diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 82ac07df..5fa8b395 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -22,6 +22,7 @@ import { ERROR_UNABLE_TO_FIND_PROFILE, SUCCESS_LINK, } from '../../constants/strings'; +import {normalize} from '../../utils'; interface TaggProps { social: string; @@ -165,7 +166,7 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', alignItems: 'center', marginHorizontal: 15, - height: 90, + height: normalize(90), }, iconTap: { justifyContent: 'center', diff --git a/src/constants/constants.ts b/src/constants/constants.ts index 557eef3a..9abfc702 100644 --- a/src/constants/constants.ts +++ b/src/constants/constants.ts @@ -1,6 +1,6 @@ import {ReactText} from 'react'; import {BackgroundGradientType, ExploreSectionType} from './../types/'; -import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX} from '../utils'; +import {SCREEN_WIDTH, SCREEN_HEIGHT, isIPhoneX, normalize} from '../utils'; export const CHIN_HEIGHT = 34; @@ -19,7 +19,7 @@ export const AVATAR_DIM = 44; export const AVATAR_GRADIENT_DIM = 50; export const TAGG_ICON_DIM = 58; -export const TAGG_RING_DIM = 65; +export const TAGG_RING_DIM = normalize(60); export const INTEGRATED_SOCIAL_LIST: string[] = [ 'Instagram', diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 5072e13a..f1bdbea2 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -25,12 +25,7 @@ import {SEARCH_ENDPOINT, TAGG_TEXT_LIGHT_BLUE} from '../../constants'; import {loadRecentlySearched, resetScreenType} from '../../store/actions'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType, ScreenType, UserType} from '../../types'; -import { - isIPhoneX, - SCREEN_HEIGHT, - SCREEN_WIDTH, - StatusBarHeight, -} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; const NO_USER: UserType = { userId: '', username: '', -- cgit v1.2.3-70-g09d2