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 +++++---- src/components/profile/ProfileBody.tsx | 1 - src/components/profile/ProfileHeader.tsx | 3 ++- src/constants/constants.ts | 12 +++++++----- src/screens/search/SearchScreen.tsx | 8 +++++++- src/utils/statusBarHeight.ts | 13 ++++++------- 6 files changed, 27 insertions(+), 19 deletions(-) (limited to 'src') 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)); }, }, diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx index 6284ff59..0b00481b 100644 --- a/src/components/profile/ProfileBody.tsx +++ b/src/components/profile/ProfileBody.tsx @@ -162,7 +162,6 @@ const styles = StyleSheet.create({ fontWeight: '600', fontSize: 16.5, marginBottom: '1%', - marginTop: '-3%', }, biography: { fontSize: 16, 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', }, 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; diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx index 9f98b4d7..5072e13a 100644 --- a/src/screens/search/SearchScreen.tsx +++ b/src/screens/search/SearchScreen.tsx @@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-community/async-storage'; import {useFocusEffect} from '@react-navigation/native'; import React, {useCallback, useEffect, useState} from 'react'; import { + Dimensions, Keyboard, RefreshControl, ScrollView, @@ -24,7 +25,12 @@ 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 {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; +import { + isIPhoneX, + SCREEN_HEIGHT, + SCREEN_WIDTH, + StatusBarHeight, +} from '../../utils'; const NO_USER: UserType = { userId: '', username: '', diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts index b8eb7b33..c5509376 100644 --- a/src/utils/statusBarHeight.ts +++ b/src/utils/statusBarHeight.ts @@ -1,15 +1,14 @@ import {Platform, StatusBar} from 'react-native'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions'; -const X_WIDTH = 375; -const X_HEIGHT = 812; -const XSMAX_WIDTH = 414; -const XSMAX_HEIGHT = 896; - +/** + * Working as of Q1 2021, latest iPhone is 12 + * iPhone 8/SE has a logical screen ratio of about 1.77 + * Rest has a logical screen ratio of about 2.16 + */ export const isIPhoneX = () => Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS - ? (SCREEN_WIDTH === X_WIDTH && SCREEN_HEIGHT === X_HEIGHT) || - (SCREEN_WIDTH === XSMAX_WIDTH && SCREEN_HEIGHT === XSMAX_HEIGHT) + ? SCREEN_HEIGHT / SCREEN_WIDTH > 2 : false; // Taken from: https://github.com/react-navigation/react-navigation/issues/283 -- cgit v1.2.3-70-g09d2 From 8ed0b76529d4f176c89ad12330c909fef22697c8 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 15:04:35 -0500 Subject: trim bio --- src/screens/profile/EditProfile.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx index 3b3fa36e..c5ae8c6f 100644 --- a/src/screens/profile/EditProfile.tsx +++ b/src/screens/profile/EditProfile.tsx @@ -297,7 +297,7 @@ const EditProfile: React.FC = ({route, navigation}) => { if (form.bio) { if (form.isValidBio) { - request.append('biography', form.bio); + request.append('biography', form.bio.trim()); } else { setForm({...form, attemptedSubmit: false}); setTimeout(() => setForm({...form, attemptedSubmit: true})); -- 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') 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') 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 7f5a1a224a235da7c38c3f38c41bbdca71d14471 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 21 Jan 2021 16:17:40 -0500 Subject: merged utils to just layouts --- src/utils/index.ts | 3 +-- src/utils/layouts.ts | 31 +++++++++++++++++++++++++++++++ src/utils/screenDimensions.ts | 6 ------ src/utils/statusBarHeight.ts | 27 --------------------------- 4 files changed, 32 insertions(+), 35 deletions(-) create mode 100644 src/utils/layouts.ts delete mode 100644 src/utils/screenDimensions.ts delete mode 100644 src/utils/statusBarHeight.ts (limited to 'src') diff --git a/src/utils/index.ts b/src/utils/index.ts index f5352af1..629a0091 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,4 @@ -export * from './screenDimensions'; -export * from './statusBarHeight'; +export * from './layouts'; export * from './moments'; export * from './common'; export * from './users'; diff --git a/src/utils/layouts.ts b/src/utils/layouts.ts new file mode 100644 index 00000000..fbe32189 --- /dev/null +++ b/src/utils/layouts.ts @@ -0,0 +1,31 @@ +import {Platform, StatusBar} from 'react-native'; +import {Dimensions} from 'react-native'; + +export const {width: SCREEN_WIDTH, height: SCREEN_HEIGHT} = Dimensions.get( + 'window', +); + +/** + * Working as of Q1 2021, latest iPhone is 12 + * iPhone 8/SE has a logical screen ratio of about 1.77 + * Rest has a logical screen ratio of about 2.16 + */ +export const isIPhoneX = () => + Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS + ? SCREEN_HEIGHT / SCREEN_WIDTH > 2 + : false; + +// Taken from: https://github.com/react-navigation/react-navigation/issues/283 +export const HeaderHeight = Platform.select({ + ios: 44, + android: 56, + default: 64, +}); + +export const StatusBarHeight = Platform.select({ + ios: isIPhoneX() ? 44 : 20, + android: StatusBar.currentHeight, + default: 0, +}); + +export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; diff --git a/src/utils/screenDimensions.ts b/src/utils/screenDimensions.ts deleted file mode 100644 index 56277ddc..00000000 --- a/src/utils/screenDimensions.ts +++ /dev/null @@ -1,6 +0,0 @@ -import {Dimensions} from 'react-native'; - -const {width, height} = Dimensions.get('window'); - -export const SCREEN_WIDTH = width; -export const SCREEN_HEIGHT = height; diff --git a/src/utils/statusBarHeight.ts b/src/utils/statusBarHeight.ts deleted file mode 100644 index c5509376..00000000 --- a/src/utils/statusBarHeight.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {Platform, StatusBar} from 'react-native'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from './screenDimensions'; - -/** - * Working as of Q1 2021, latest iPhone is 12 - * iPhone 8/SE has a logical screen ratio of about 1.77 - * Rest has a logical screen ratio of about 2.16 - */ -export const isIPhoneX = () => - Platform.OS === 'ios' && !Platform.isPad && !Platform.isTVOS - ? SCREEN_HEIGHT / SCREEN_WIDTH > 2 - : false; - -// Taken from: https://github.com/react-navigation/react-navigation/issues/283 -export const HeaderHeight = Platform.select({ - ios: 44, - android: 56, - default: 64, -}); - -export const StatusBarHeight = Platform.select({ - ios: isIPhoneX() ? 44 : 20, - android: StatusBar.currentHeight, - default: 0, -}); - -export const AvatarHeaderHeight = (HeaderHeight + StatusBarHeight) * 1.3; -- 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') 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') 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 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') 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