From c32197f793005a81a0a06c6d755ed374078624c3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 8 Feb 2021 14:43:20 -0800 Subject: navigation bar to go to suggested people --- src/components/common/NavigationIcon.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) (limited to 'src/components/common') diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx index 4bf35360..1a9934f2 100644 --- a/src/components/common/NavigationIcon.tsx +++ b/src/components/common/NavigationIcon.tsx @@ -8,7 +8,13 @@ import { } from 'react-native'; interface NavigationIconProps extends TouchableOpacityProps { - tab: 'Home' | 'Search' | 'Upload' | 'Notifications' | 'Profile'; + tab: + | 'Home' + | 'Search' + | 'Upload' + | 'Notifications' + | 'Profile' + | 'SuggestedPeople'; disabled?: boolean; newIcon?: boolean; } @@ -43,6 +49,11 @@ const NavigationIcon = (props: NavigationIconProps) => { ? require('../../assets/navigationIcons/profile.png') : require('../../assets/navigationIcons/profile-clicked.png'); break; + case 'SuggestedPeople': + imgSrc = props.disabled + ? require('../../assets/navigationIcons/suggested-people.png') + : require('../../assets/navigationIcons/suggested-people-clicked.png'); + break; default: imgSrc = null; } -- cgit v1.2.3-70-g09d2 From dbbbcfd6c73979632d42429479f0ce2e5c9987a4 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 9 Feb 2021 13:47:35 -0500 Subject: using centered view, updated TaggSquareButton styles --- src/assets/images/logo-purple.png | Bin 0 -> 12702 bytes src/components/common/SocialLinkModal.tsx | 80 +++++++++++++---------------- src/components/common/TaggSquareButton.tsx | 41 ++++++++++----- src/screens/onboarding/Login.tsx | 12 +++-- src/screens/onboarding/WelcomeScreen.tsx | 5 +- 5 files changed, 76 insertions(+), 62 deletions(-) create mode 100644 src/assets/images/logo-purple.png (limited to 'src/components/common') diff --git a/src/assets/images/logo-purple.png b/src/assets/images/logo-purple.png new file mode 100644 index 00000000..48768f67 Binary files /dev/null and b/src/assets/images/logo-purple.png differ diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index d3bc3945..67a3f074 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -4,6 +4,7 @@ import {TextInput} from 'react-native-gesture-handler'; import {SocialIcon} from '.'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {normalize, SCREEN_WIDTH} from '../../utils'; +import CenteredView from './CenteredView'; import TaggSquareButton from './TaggSquareButton'; interface SocialLinkModalProps { @@ -34,55 +35,46 @@ const SocialLinkModal: React.FC = ({ }; return ( - <> - - {}}> - - - - - - - {social} - - Insert your {social.toLowerCase()} username to link your{' '} - {social.toLowerCase()} account to your profile! - - - - + + {}}> + + + + + + + {social} + + Insert your {social.toLowerCase()} username to link your{' '} + {social.toLowerCase()} account to your profile! + + + - - - + + + ); }; const styles = StyleSheet.create({ - centeredView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, modalView: { width: SCREEN_WIDTH * 0.8, backgroundColor: 'white', diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 78a90554..817a2690 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -3,6 +3,7 @@ import { GestureResponderEvent, StyleSheet, Text, + TextStyle, TouchableOpacity, ViewProps, ViewStyle, @@ -14,14 +15,16 @@ import {normalize, SCREEN_WIDTH} from '../../utils'; interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; title: string; - mode: 'normal' | 'large' | 'gradient'; - color: 'purple' | 'white'; + buttonStyle: 'normal' | 'large' | 'gradient'; + buttonColor: 'purple' | 'white'; + labelColor: 'white' | 'blue'; style?: ViewStyle; + labelStyle?: TextStyle; } const TaggSquareButton: React.FC = (props) => { - const buttonStyles = (() => { - switch (props.color) { + const buttonColor = (() => { + switch (props.buttonColor) { case 'purple': return {backgroundColor: TAGG_PURPLE}; case 'white': @@ -29,24 +32,37 @@ const TaggSquareButton: React.FC = (props) => { return {backgroundColor: 'white'}; } })(); - switch (props.mode) { + const labelColor = (() => { + switch (props.labelColor) { + case 'white': + return {color: 'white'}; + case 'blue': + default: + return {color: '#78A0EF'}; + } + })(); + switch (props.buttonStyle) { case 'large': return ( - {props.title} + style={[styles.largeButton, buttonColor, props.style]}> + + {props.title} + ); case 'gradient': return ( - + - {props.title} + + {props.title} + ); @@ -55,8 +71,10 @@ const TaggSquareButton: React.FC = (props) => { return ( - {props.title} + style={[styles.normalButton, buttonColor, props.style]}> + + {props.title} + ); } @@ -86,7 +104,6 @@ const styles = StyleSheet.create({ normalLabel: { fontSize: normalize(20), fontWeight: '500', - color: '#78A0EF', }, gradientButton: { marginTop: '8%', diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 4d1fb09a..450c5039 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -28,6 +28,7 @@ import {fcmService} from '../../services'; import {RootState} from '../../store/rootReducer'; import {BackgroundGradientType, UserType} from '../../types'; import {normalize, userLogin} from '../../utils'; +import UpdateRequired from './UpdateRequired'; type VerificationScreenRouteProp = RouteProp; type VerificationScreenNavigationProp = StackNavigationProp< @@ -212,6 +213,7 @@ const Login: React.FC = ({navigation}: LoginProps) => { gradientType={BackgroundGradientType.Light}> {/* */} + @@ -255,14 +257,16 @@ const Login: React.FC = ({navigation}: LoginProps) => { diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index bfb1a127..ae31f933 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -39,8 +39,9 @@ const WelcomeScreen: React.FC = ({navigation}) => { -- cgit v1.2.3-70-g09d2 From c9a8f87a29e12bfb78939fa9a94b6f8919b04836 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 4 Feb 2021 16:58:40 -0500 Subject: refactored header styles # Conflicts: # src/components/common/FriendsButton.tsx # src/screens/profile/FriendsListScreen.tsx # src/screens/profile/MomentCommentsScreen.tsx --- src/assets/icons/back-arrow.svg | 2 +- src/components/common/FriendsButton.tsx | 1 - src/routes/main/MainStackScreen.tsx | 59 +++++++++++++++++++++++++--- src/screens/profile/FriendsListScreen.tsx | 36 +++++------------ src/screens/profile/MomentCommentsScreen.tsx | 27 +++++++------ 5 files changed, 79 insertions(+), 46 deletions(-) (limited to 'src/components/common') diff --git a/src/assets/icons/back-arrow.svg b/src/assets/icons/back-arrow.svg index aa203dea..16beae5a 100644 --- a/src/assets/icons/back-arrow.svg +++ b/src/assets/icons/back-arrow.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx index c7f56e2d..243a551d 100644 --- a/src/components/common/FriendsButton.tsx +++ b/src/components/common/FriendsButton.tsx @@ -78,7 +78,6 @@ const styles = StyleSheet.create({ borderRadius: 3, marginRight: '2%', marginLeft: '1%', - padding: 0, backgroundColor: 'transparent', }, requestedButtonTitle: { diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index c0cef3ea..0141a418 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -20,6 +20,10 @@ import { import {ScreenType} from '../../types'; import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils'; import {MainStack, MainStackParams} from './MainStackNavigator'; +import BackIcon from '../../assets/icons/back-arrow.svg'; +import {StyleSheet, Text} from 'react-native'; +import {normalize} from 'react-native-elements'; +import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types'; /** * 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. @@ -185,6 +189,9 @@ const MainStackScreen: React.FC = ({route}) => { name="MomentCommentsScreen" component={MomentCommentsScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Comments'), + }} /> = ({route}) => { name="FriendsListScreen" component={FriendsListScreen} initialParams={{screenType}} + options={{ + ...headerBarOptions('black', 'Friends'), + }} /> ); }; +export const headerBarOptions: ( + color: 'white' | 'black', + title: string, +) => StackNavigationOptions = (color, title) => ({ + headerShown: true, + headerTransparent: true, + headerBackTitleVisible: false, + headerBackImage: () => ( + + ), + headerTitle: () => ( + {title} + ), +}); + +const styles = StyleSheet.create({ + backButton: { + marginLeft: 30, + }, + headerTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + }, + whiteHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'white', + }, + blackHeaderTitle: { + fontSize: normalize(16), + letterSpacing: normalize(1.3), + fontWeight: '700', + color: 'black', + }, +}); + export default MainStackScreen; diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx index b2123f44..7abe289f 100644 --- a/src/screens/profile/FriendsListScreen.tsx +++ b/src/screens/profile/FriendsListScreen.tsx @@ -1,7 +1,12 @@ -import React from 'react'; +import React, {Fragment, useEffect} from 'react'; import {RouteProp, useNavigation} from '@react-navigation/native'; import {TabsGradient, Friends} from '../../components'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + HeaderHeight, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; import { SafeAreaView, StyleSheet, @@ -24,7 +29,6 @@ interface FriendsListScreenProps { const FriendsListScreen: React.FC = ({route}) => { const {userXId, screenType} = route.params; - const navigation = useNavigation(); const {friends} = userXId ? useSelector((state: RootState) => state.userX[screenType][userXId]) @@ -55,31 +59,11 @@ const styles = StyleSheet.create({ backgroundColor: 'white', height: '100%', }, - header: { - flexDirection: 'column', - justifyContent: 'center', - height: SCREEN_HEIGHT * 0.05, - padding: '3%', - paddingBottom: 0, - marginTop: '1%', - }, - headerText: { - position: 'absolute', - alignSelf: 'center', - fontSize: normalize(18), - fontWeight: '700', - lineHeight: normalize(21.48), - letterSpacing: normalize(1.3), - }, - headerButton: { - width: '5%', - aspectRatio: 1, - padding: 0, - marginLeft: '5%', - alignSelf: 'flex-start', - marginBottom: '1%', + backButton: { + marginLeft: 10, }, body: { + marginTop: HeaderHeight, width: SCREEN_WIDTH, height: SCREEN_HEIGHT * 0.8, }, diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index ec193db5..4a902e9e 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -1,5 +1,5 @@ import {RouteProp, useNavigation} from '@react-navigation/native'; -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; import BackIcon from '../../assets/icons/back-arrow.svg'; @@ -7,9 +7,14 @@ import {TabsGradient} from '../../components'; import {AddComment} from '../../components/'; import CommentsContainer from '../../components/comments/CommentsContainer'; import {ADD_COMMENT_TEXT} from '../../constants/strings'; -import {MainStackParams} from '../../routes/main'; +import {headerBarOptions, MainStackParams} from '../../routes/main'; import {CommentType} from '../../types'; -import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import { + HeaderHeight, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; /** * Comments Screen for an image uploaded @@ -39,19 +44,15 @@ const MomentCommentsScreen: React.FC = ({route}) => { CommentType | undefined >(undefined); + useEffect(() => { + navigation.setOptions({ + ...headerBarOptions('black', `${commentsLength} Comments`), + }); + }, [commentsLength, navigation]); + return ( - - { - navigation.pop(); - }}> - - - {commentsLength + ' Comments'} - Date: Thu, 11 Feb 2021 13:38:53 -0800 Subject: updated instagram icon --- src/components/common/SocialIcon.tsx | 4 ++-- src/components/taggs/Tagg.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src/components/common') diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx index 0cd5d2a7..8216b6ff 100644 --- a/src/components/common/SocialIcon.tsx +++ b/src/components/common/SocialIcon.tsx @@ -17,9 +17,9 @@ const SocialIcon: React.FC = ({ }) => { switch (social) { case 'Instagram': - var icon = require('../../assets/socials/instagram-icon-white-bg.png'); + var icon = require('../../assets/socials/instagram-icon.png'); if (screenType === ScreenType.SuggestedPeople) { - icon = require('../../assets/socials/instagram-icon.png'); + icon = require('../../assets/socials/instagram-icon-white-bg.png'); } break; case 'Facebook': diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 29b55786..bb450b64 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -148,7 +148,7 @@ const Tagg: React.FC = ({ {pickTheRightRingHere()} -- cgit v1.2.3-70-g09d2