From ad98ad617d78c7b68ffc37327f21a8769fcaab57 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:49:58 -0400 Subject: Fix styling, Cleanup imports --- .../moments/IndividualMomentTitleBar.tsx | 53 ---------------------- src/components/moments/MomentPost.tsx | 5 +- src/components/moments/index.ts | 1 - src/routes/main/MainStackScreen.tsx | 19 +++++--- src/screens/suggestedPeople/index.ts | 1 + 5 files changed, 14 insertions(+), 65 deletions(-) delete mode 100644 src/components/moments/IndividualMomentTitleBar.tsx (limited to 'src') diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx deleted file mode 100644 index c6bf1423..00000000 --- a/src/components/moments/IndividualMomentTitleBar.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import {StyleSheet, Text, View, ViewProps} from 'react-native'; -import {normalize, SCREEN_WIDTH} from '../../utils'; - -interface IndividualMomentTitleBarProps extends ViewProps { - title: string; -} -const IndividualMomentTitleBar: React.FC = ({ - title, -}) => { - return ( - - - 18 ? normalize(14) : normalize(16), - }, - ]}> - {title} - - - - ); -}; - -const styles = StyleSheet.create({ - title: { - textAlign: 'center', - color: 'white', - fontSize: normalize(18), - fontWeight: '700', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - }, - titleContainer: { - width: '80%', - position: 'absolute', - left: '10%', - right: '10%', - height: normalize(70), - }, - mainContainer: { - flex: 1, - width: SCREEN_WIDTH * 0.6, - flexDirection: 'row', - justifyContent: 'flex-end', - marginVertical: '2%', - }, -}); - -export default IndividualMomentTitleBar; diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 921f7693..2257f8ac 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -134,10 +134,7 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', ''), - headerTitle: () => ( - - ), + ...headerBarOptions('white', moment.moment_category), }), [moment.moment_id], ); diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts index 3f33ec53..4c1c509e 100644 --- a/src/components/moments/index.ts +++ b/src/components/moments/index.ts @@ -1,4 +1,3 @@ -export {default as IndividualMomentTitleBar} from './IndividualMomentTitleBar'; export {default as CaptionScreenHeader} from './CaptionScreenHeader'; export {default as Moment} from './Moment'; export {default as TagFriendsFooter} from './TagFriendsFoooter'; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 064e9725..ccfc4cbd 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -2,25 +2,28 @@ import {RouteProp} from '@react-navigation/native'; import {StackNavigationOptions} from '@react-navigation/stack'; import React from 'react'; import {StyleSheet, Text} from 'react-native'; -import {normalize} from 'react-native-elements'; import BackIcon from '../../assets/icons/back-arrow.svg'; import { AccountType, AnimatedTutorial, BadgeSelection, + CameraScreen, CaptionScreen, CategorySelection, ChatListScreen, ChatScreen, + ChoosingCategoryScreen, CommentReactionScreen, CreateCustomCategory, DiscoverUsers, + EditMedia, EditProfile, FriendsListScreen, IndividualMoment, InviteFriendsScreen, MomentCommentsScreen, MomentUploadPromptScreen, + MutualBadgeHolders, NewChatModal, NotificationsScreen, PrivacyScreen, @@ -31,16 +34,17 @@ import { SuggestedPeopleScreen, SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, - TagSelectionScreen, TagFriendsScreen, - CameraScreen, - EditMedia, + TagSelectionScreen, } from '../../screens'; -import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; -import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils'; +import { + AvatarHeaderHeight, + ChatHeaderHeight, + normalize, + SCREEN_WIDTH, +} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; -import ChoosingCategoryScreen from '../../screens/profile/ChoosingCategoryScreen'; /** * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited. @@ -413,6 +417,7 @@ const styles = StyleSheet.create({ shadowOffset: {width: 0, height: 0}, }, headerTitle: { + textAlign: 'center', letterSpacing: normalize(1.3), fontWeight: '700', }, diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts index 8c06d81e..be2393b5 100644 --- a/src/screens/suggestedPeople/index.ts +++ b/src/screens/suggestedPeople/index.ts @@ -1,2 +1,3 @@ export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen'; export {default as AnimatedTutorial} from './AnimatedTutorial'; +export {default as MutualBadgeHolders} from './MutualBadgeHolders'; -- cgit v1.2.3-70-g09d2 From fbaa7d6ee05d1486152175471ef21e8b4638754d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 14:52:02 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 2257f8ac..123ee5f4 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -43,7 +43,6 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; import CommentsCount from '../comments/CommentsCount'; import {GradientProgressBar, MomentTags} from '../common'; import {MomentMoreInfoDrawer, TaggAvatar} from '../profile'; -import IndividualMomentTitleBar from './IndividualMomentTitleBar'; interface MomentPostProps { moment: MomentPostType; userXId: string | undefined; -- cgit v1.2.3-70-g09d2 From 97b7c29fe22f0d31a1a6b095de0ea76a3067e115 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 27 Jul 2021 15:15:46 -0400 Subject: Clean up styling in tagg friends screen --- src/screens/moments/TagFriendsScreen.tsx | 85 +++++++++++++------------------- 1 file changed, 34 insertions(+), 51 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index d11f8049..677ceefa 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -10,15 +10,13 @@ import { View, } from 'react-native'; import Video from 'react-native-video'; -import {MainStackParams} from 'src/routes'; -import BackArrow from '../../assets/icons/back-arrow.svg'; import {MomentTags} from '../../components'; import {TagFriendsFooter} from '../../components/moments'; +import {headerBarOptions, MainStackParams} from '../../routes'; import {MomentTagType} from '../../types'; import { HeaderHeight, isIPhoneX, - normalize, SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; @@ -48,6 +46,36 @@ const TagFriendsScreen: React.FC = ({route}) => { setTags(selectedTags ? selectedTags : []); }, [selectedTags]); + useEffect(() => { + const title = media.isVideo + ? '' + : tags.length === 0 + ? 'Tap on photo to tag friends!' + : 'Press and drag to move'; + navigation.setOptions({ + ...headerBarOptions('white', title), + headerRight: () => ( + + + Done + + + ), + }); + }, [tags]); + /* * Navigate back to Tag Users Screen, send selected users */ @@ -174,49 +202,8 @@ const TagFriendsScreen: React.FC = ({route}) => { onLayout={(event) => { const {y, height} = event.nativeEvent.layout; setTopHeight(y + height); - }}> - { - navigation.goBack(); - }} - style={styles.backArrow}> - - - - - {!media.isVideo ? ( - - {tags.length === 0 ? ( - Tap on photo to tag friends! - ) : ( - Press and drag to move - )} - - ) : ( - - )} - - - Done - - - + }} + /> {tags.length !== 0 && !media.isVideo && ( Date: Thu, 29 Jul 2021 14:02:59 -0400 Subject: Fix header styling --- src/components/moments/MomentPost.tsx | 36 +++++++++++++++++++++++++++++++++-- src/routes/main/MainStackScreen.tsx | 3 +++ 2 files changed, 37 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 123ee5f4..ecd2e66f 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -34,6 +34,7 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, + isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, @@ -133,7 +134,22 @@ const MomentPost: React.FC = ({ useEffect( () => navigation.setOptions({ - ...headerBarOptions('white', moment.moment_category), + ...headerBarOptions('white', ''), + headerTitle: () => ( + 18 + ? normalize(14) + : normalize(16), + }, + ]}> + {moment.moment_category} + + ), }), [moment.moment_id], ); @@ -499,7 +515,23 @@ const styles = StyleSheet.create({ position: 'absolute', top: -2.5, }, - profilePreviewContainer: {paddingHorizontal: '3%'}, + progressBaContainer: { + position: 'absolute', + top: isIPhoneX() ? 75 : 70, + }, + profilePreviewContainer: { + paddingHorizontal: '3%', + }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index ccfc4cbd..35e1f8e0 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -382,6 +382,7 @@ export const headerBarOptions: ( ), headerTitle: () => ( Date: Thu, 29 Jul 2021 14:05:41 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index ecd2e66f..19d25739 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -505,20 +505,6 @@ const styles = StyleSheet.create({ height: 3, marginHorizontal: 2, }, - progressDot: { - backgroundColor: '#fff', - width: 10, - height: 10, - borderRadius: 10, - borderWidth: 0.3, - borderColor: TAGG_PURPLE, - position: 'absolute', - top: -2.5, - }, - progressBaContainer: { - position: 'absolute', - top: isIPhoneX() ? 75 : 70, - }, profilePreviewContainer: { paddingHorizontal: '3%', }, -- cgit v1.2.3-70-g09d2 From 5c99a5a581dd93f89db248d853d9785e83e608ae Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Thu, 29 Jul 2021 11:01:44 -0700 Subject: Remove unused styles --- src/screens/moments/TagFriendsScreen.tsx | 19 ------------------- 1 file changed, 19 deletions(-) (limited to 'src') diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index 677ceefa..c55721ed 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -231,31 +231,12 @@ const styles = StyleSheet.create({ height: SCREEN_HEIGHT, alignContent: 'center', }, - backArrow: { - marginTop: isIPhoneX() ? HeaderHeight : '10%', - zIndex: 9999, - }, - backArrowContainer: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignContent: 'center', - }, button: { zIndex: 9999, }, buttonContainer: { right: 20, }, - headerContainer: { - width: SCREEN_WIDTH, - flexDirection: 'row', - justifyContent: 'center', - zIndex: 9999, - }, - headerPlaceholder: { - width: SCREEN_WIDTH * 0.5, - }, shareButtonTitle: { fontWeight: 'bold', fontSize: 18, -- cgit v1.2.3-70-g09d2 From 2947fb74da4f990ac9c15cb352ef254592a3c6ab Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:09:34 -0400 Subject: Lint --- src/components/moments/MomentPost.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index 19d25739..eae95fe2 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,6 @@ import Video from 'react-native-video'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TaggedUsersDrawer} from '.'; import PauseIcon from '../../assets/icons/pause-icon.svg'; -import {TAGG_PURPLE} from '../../constants/constants'; import {headerBarOptions} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; @@ -34,7 +33,6 @@ import {RootState} from '../../store/rootReducer'; import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types'; import { getTimePosted, - isIPhoneX, navigateToProfile, normalize, SCREEN_HEIGHT, -- cgit v1.2.3-70-g09d2 From 7c33718ecf68982b362f0756fe3df793ce97f6fd Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Jul 2021 14:27:45 -0400 Subject: Cleaned up logic, Add logic to check if long title --- src/components/moments/MomentPost.tsx | 42 +++++++++-------------------------- src/routes/main/MainStackScreen.tsx | 27 ++++++++++++++++++++++ 2 files changed, 38 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx index eae95fe2..d95d6f3a 100644 --- a/src/components/moments/MomentPost.tsx +++ b/src/components/moments/MomentPost.tsx @@ -25,7 +25,7 @@ import Video from 'react-native-video'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TaggedUsersDrawer} from '.'; import PauseIcon from '../../assets/icons/pause-icon.svg'; -import {headerBarOptions} from '../../routes'; +import {headerBarOptions, multilineHeaderTitle} from '../../routes'; import {MomentContext} from '../../screens/profile/IndividualMoment'; import {deleteMomentTag, loadMomentTags} from '../../services'; import {loadUserMoments} from '../../store/actions'; @@ -129,28 +129,18 @@ const MomentPost: React.FC = ({ } }; - useEffect( - () => + useEffect(() => { + if (moment.moment_category.length > 20) { navigation.setOptions({ ...headerBarOptions('white', ''), - headerTitle: () => ( - 18 - ? normalize(14) - : normalize(16), - }, - ]}> - {moment.moment_category} - - ), - }), - [moment.moment_id], - ); + ...multilineHeaderTitle(moment.moment_category), + }); + } else { + navigation.setOptions({ + ...headerBarOptions('white', moment.moment_category), + }); + } + }, [moment.moment_id]); /* * Determines if an image is 9:16 to set aspect ratio of current image and @@ -506,16 +496,6 @@ const styles = StyleSheet.create({ profilePreviewContainer: { paddingHorizontal: '3%', }, - multilineHeaderTitle: { - width: SCREEN_WIDTH * 0.7, - height: normalize(70), - marginTop: normalize(90) / 2, - textAlign: 'center', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - fontWeight: '700', - color: 'white', - }, }); export default MomentPost; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 35e1f8e0..64060554 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -393,6 +393,23 @@ export const headerBarOptions: ( ), }); +export const multilineHeaderTitle: (title: string) => StackNavigationOptions = ( + title, +) => ({ + headerTitle: () => ( + 18 ? normalize(14) : normalize(16), + }, + ]}> + {title} + + ), +}); + export const modalStyle: StackNavigationOptions = { cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'}, gestureDirection: 'vertical', @@ -424,6 +441,16 @@ const styles = StyleSheet.create({ letterSpacing: normalize(1.3), fontWeight: '700', }, + multilineHeaderTitle: { + width: SCREEN_WIDTH * 0.7, + height: normalize(70), + marginTop: normalize(90) / 2, + textAlign: 'center', + lineHeight: normalize(21.48), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, }); export default MainStackScreen; -- cgit v1.2.3-70-g09d2