From 77aa4790e5c384158baf5e379fcc495921057175 Mon Sep 17 00:00:00 2001 From: Tanmay Bhatia Date: Wed, 27 Jan 2021 15:31:27 -0800 Subject: Made changes in the onboarding screen --- src/screens/onboarding/WelcomeScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index 96d3f929..012e6766 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -29,7 +29,7 @@ const WelcomeScreen: React.FC = ({navigation}) => { /> - Welcome to TAGG! + Welcome to Tagg! Tagg is the new social networking platform for you! It will help you create your own personalized digital space where you can express who -- cgit v1.2.3-70-g09d2 From 951d85348acef13ec7830629205c30ad5f766bee Mon Sep 17 00:00:00 2001 From: Tanmay Bhatia Date: Fri, 29 Jan 2021 02:05:26 -0800 Subject: Fixed upper border for Iphone8 --- src/screens/onboarding/WelcomeScreen.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index 012e6766..3ad30163 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -71,7 +71,7 @@ const styles = StyleSheet.create({ fontSize: 16, fontWeight: '600', textAlign: 'center', - marginBottom: '15%', + marginBottom: '9.5%', marginHorizontal: '10%', }, nextButton: { @@ -89,6 +89,7 @@ const styles = StyleSheet.create({ fontSize: 30, fontWeight: '500', color: '#ddd', + }, }); export default WelcomeScreen; -- cgit v1.2.3-70-g09d2 From 0e86cd3c972e54cf700cca65bb2493e84056276c Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Fri, 29 Jan 2021 10:55:14 -0800 Subject: kind of works --- src/components/comments/CommentTile.tsx | 27 ++++++---- src/components/comments/CommentsContainer.tsx | 75 ++++++++++++++++++--------- src/components/notifications/Notification.tsx | 1 + src/routes/main/MainStackNavigator.tsx | 1 + src/screens/main/NotificationsScreen.tsx | 2 +- src/screens/profile/IndividualMoment.tsx | 9 ++-- src/screens/profile/MomentCommentsScreen.tsx | 5 +- 7 files changed, 77 insertions(+), 43 deletions(-) (limited to 'src/screens') diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx index b631a985..347954b5 100644 --- a/src/components/comments/CommentTile.tsx +++ b/src/components/comments/CommentTile.tsx @@ -6,7 +6,12 @@ import {Alert, Animated, StyleSheet} from 'react-native'; import ClockIcon from '../../assets/icons/clock-icon-01.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {RectButton, TouchableOpacity} from 'react-native-gesture-handler'; -import {getTimePosted, normalize, SCREEN_WIDTH} from '../../utils'; +import { + getTimePosted, + normalize, + SCREEN_HEIGHT, + SCREEN_WIDTH, +} from '../../utils'; import Arrow from '../../assets/icons/back-arrow-colored.svg'; import Trash from '../../assets/ionicons/trash-outline.svg'; import CommentsContainer from './CommentsContainer'; @@ -155,14 +160,16 @@ const CommentTile: React.FC = ({ {/*** Show replies if toggle state is true */} - {showReplies && ( - + {showReplies && comment_object.replies_count > 0 && ( + + + )} ); @@ -173,9 +180,9 @@ const styles = StyleSheet.create({ borderBottomWidth: 1, borderColor: 'lightgray', backgroundColor: 'white', - paddingTop: '3%', flexDirection: 'column', flex: 1, + paddingTop: '3%', marginLeft: '7%', }, swipeActions: { diff --git a/src/components/comments/CommentsContainer.tsx b/src/components/comments/CommentsContainer.tsx index d8134caf..d2f11b96 100644 --- a/src/components/comments/CommentsContainer.tsx +++ b/src/components/comments/CommentsContainer.tsx @@ -1,16 +1,17 @@ import React, {useEffect, useRef, useState} from 'react'; import {StyleSheet} from 'react-native'; -import {ScrollView} from 'react-native-gesture-handler'; +import {FlatList} from 'react-native-gesture-handler'; import {useDispatch, useSelector} from 'react-redux'; import {CommentTile} from '.'; import {getComments} from '../../services'; import {RootState} from '../../store/rootReducer'; import {CommentType, ScreenType, TypeOfComment} from '../../types'; +import {SCREEN_HEIGHT} from '../../utils'; export type CommentsContainerProps = { screenType: ScreenType; - //objectId can be either moment_id or comment_id objectId: string; + commentId?: string; setCommentsLength?: (count: number) => void; newCommentsAvailable: boolean; setNewCommentsAvailable: (value: boolean) => void; @@ -32,18 +33,21 @@ const CommentsContainer: React.FC = ({ typeOfComment, setCommentObjectInFocus, commentObjectInFocus, + commentId, }) => { const {username: loggedInUsername} = useSelector( (state: RootState) => state.user.user, ); const [commentsList, setCommentsList] = useState([]); const dispatch = useDispatch(); - const ref = useRef(null); + const ref = useRef>(null); + const [initialIndex, setInitialIndex] = useState(0); useEffect(() => { //Scroll only if a new comment and not a reply was posted const shouldScroll = () => - typeOfComment === 'Comment' && !commentObjectInFocus; + (typeOfComment === 'Comment' && !commentObjectInFocus) || + typeOfComment === 'Thread'; const loadComments = async () => { const comments = await getComments(objectId, typeOfComment === 'Thread'); setCommentsList(comments); @@ -55,9 +59,15 @@ const CommentsContainer: React.FC = ({ if (newCommentsAvailable) { loadComments(); if (shouldScroll()) { - setTimeout(() => { - ref.current?.scrollToEnd(); - }, 500); + if (commentId) { + const index = commentsList.findIndex( + (item) => item.comment_id === commentId, + ); + setInitialIndex(index); + } else { + setInitialIndex(commentsList.length - 1); + ref.current?.scrollToEnd({animated: true}); + } } } }, [ @@ -68,27 +78,44 @@ const CommentsContainer: React.FC = ({ setCommentsLength, typeOfComment, commentObjectInFocus, + commentId, + commentsList, ]); + const ITEM_HEIGHT = SCREEN_HEIGHT / 7.5; + + const renderComment = ({item}: {item: CommentType}) => ( + + ); + return ( - - {commentsList && - commentsList.map((comment: CommentType) => ( - - ))} - + keyExtractor={(item, index) => index.toString()} + decelerationRate={'fast'} + snapToAlignment={'start'} + snapToInterval={ITEM_HEIGHT} + renderItem={renderComment} + showsVerticalScrollIndicator={false} + initialScrollIndex={initialIndex} + contentContainerStyle={styles.scrollViewContent} + getItemLayout={(data, index) => ({ + length: ITEM_HEIGHT, + offset: ITEM_HEIGHT * index, + index, + })} + pagingEnabled + /> ); }; diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx index 94367304..c754f941 100644 --- a/src/components/notifications/Notification.tsx +++ b/src/components/notifications/Notification.tsx @@ -122,6 +122,7 @@ const Notification: React.FC = (props) => { navigation.push('MomentCommentsScreen', { moment_id: moment.moment_id, screenType, + comment_id: notification_object?.comment_id, }); }, 500); } diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index bd838ef2..663aeaea 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -37,6 +37,7 @@ export type MainStackParams = { moment_id: string; userXId: string | undefined; screenType: ScreenType; + comment_id?: string; }; FriendsListScreen: { userXId: string | undefined; diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx index 4bdee942..d9952aa8 100644 --- a/src/screens/main/NotificationsScreen.tsx +++ b/src/screens/main/NotificationsScreen.tsx @@ -70,7 +70,7 @@ const NotificationsScreen: React.FC = () => { //Called when user leaves the screen return () => resetNewNotificationFlag(); - }, [newNotificationReceived]), + }, [newNotificationReceived, dispatch, refreshNotifications]), ); // handles storing and fetching the "previously viewed" information diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx index ea0c8fb6..8c1dc327 100644 --- a/src/screens/profile/IndividualMoment.tsx +++ b/src/screens/profile/IndividualMoment.tsx @@ -4,12 +4,12 @@ import {StackNavigationProp} from '@react-navigation/stack'; import React from 'react'; import {FlatList, StyleSheet, View} from 'react-native'; import {useSelector} from 'react-redux'; -import {ProfileStackParams} from 'src/routes/main/ProfileStack'; import { IndividualMomentTitleBar, MomentPostContent, MomentPostHeader, } from '../../components'; +import {MainStackParams} from '../../routes'; import {RootState} from '../../store/rootreducer'; import {MomentType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; @@ -17,12 +17,9 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; /** * Individual moment view opened when user clicks on a moment tile */ -type IndividualMomentRouteProp = RouteProp< - ProfileStackParams, - 'IndividualMoment' ->; +type IndividualMomentRouteProp = RouteProp; type IndividualMomentNavigationProp = StackNavigationProp< - ProfileStackParams, + MainStackParams, 'IndividualMoment' >; interface IndividualMomentProps { diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 58422f0f..5c3b8579 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -28,7 +28,7 @@ interface MomentCommentsScreenProps { const MomentCommentsScreen: React.FC = ({route}) => { const navigation = useNavigation(); - const {moment_id, screenType} = route.params; + const {moment_id, screenType, comment_id} = route.params; //Receives comment length from child CommentsContainer const [commentsLength, setCommentsLength] = useState(0); @@ -55,6 +55,7 @@ const MomentCommentsScreen: React.FC = ({route}) => { Date: Mon, 1 Feb 2021 16:20:04 -0500 Subject: fixed layout issue --- src/screens/onboarding/WelcomeScreen.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index 3ad30163..a77316cd 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -55,8 +55,8 @@ const styles = StyleSheet.create({ alignItems: 'center', }, image: { - width: SCREEN_WIDTH, - height: SCREEN_WIDTH, + width: SCREEN_WIDTH * 0.9, + height: SCREEN_WIDTH * 0.9, }, header: { color: '#fff', @@ -71,7 +71,7 @@ const styles = StyleSheet.create({ fontSize: 16, fontWeight: '600', textAlign: 'center', - marginBottom: '9.5%', + marginBottom: '10%', marginHorizontal: '10%', }, nextButton: { @@ -89,7 +89,6 @@ const styles = StyleSheet.create({ fontSize: 30, fontWeight: '500', color: '#ddd', - }, }); export default WelcomeScreen; -- cgit v1.2.3-70-g09d2 From 324bd5430e68f9e1c4ae93246b0d7950047bd00f Mon Sep 17 00:00:00 2001 From: Ashm Walia Date: Tue, 2 Feb 2021 10:37:20 -0800 Subject: Done --- src/routes/Routes.tsx | 2 +- src/screens/onboarding/Login.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) (limited to 'src/screens') diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index a14f1576..536c7d04 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -33,7 +33,7 @@ const Routes: React.FC = () => { }); if (!userId) { - userLogin(dispatch, {userId: '', username: ''}); + // userLogin(dispatch, {userId: '', username: ''}); } else { SplashScreen.hide(); } diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 8974e000..63296ede 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -31,7 +31,7 @@ import { import {OnboardingStackParams} from '../../routes/onboarding'; import {fcmService} from '../../services'; import {BackgroundGradientType, UserType} from '../../types'; -import {userLogin} from '../../utils'; +import {normalize, userLogin} from '../../utils'; type VerificationScreenRouteProp = RouteProp; type VerificationScreenNavigationProp = StackNavigationProp< @@ -322,13 +322,16 @@ const styles = StyleSheet.create({ marginBottom: '10%', }, forgotPassword: { - marginTop: 10, - marginBottom: 15, + alignSelf: 'flex-start', + marginVertical: '1%', + borderBottomWidth: 1, + paddingBottom: '1%', + left: '3%', + borderBottomColor: 'white', }, forgotPasswordText: { - fontSize: 14, + fontSize: normalize(14), color: '#fff', - textDecorationLine: 'underline', }, start: { width: 144, -- cgit v1.2.3-70-g09d2 From 0b25ca8daba54293fdd24082e1b4fb684ac33421 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 2 Feb 2021 15:32:09 -0500 Subject: normalized --- src/screens/onboarding/WelcomeScreen.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index a77316cd..e7c835bb 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'; -import {SCREEN_WIDTH} from '../../utils'; +import {normalize, SCREEN_WIDTH} from '../../utils'; import {Background} from '../../components'; import {OnboardingStackParams} from '../../routes'; import {StackNavigationProp} from '@react-navigation/stack'; @@ -60,7 +60,7 @@ const styles = StyleSheet.create({ }, header: { color: '#fff', - fontSize: 32, + fontSize: normalize(32), fontWeight: '600', textAlign: 'center', marginBottom: '4%', @@ -68,7 +68,7 @@ const styles = StyleSheet.create({ }, subtext: { color: '#fff', - fontSize: 16, + fontSize: normalize(16), fontWeight: '600', textAlign: 'center', marginBottom: '10%', @@ -86,7 +86,7 @@ const styles = StyleSheet.create({ marginBottom: '15%', }, nextButtonLabel: { - fontSize: 30, + fontSize: normalize(30), fontWeight: '500', color: '#ddd', }, -- cgit v1.2.3-70-g09d2 From 116438009503359a78c3af7f36485e46cdd25bb6 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 2 Feb 2021 12:55:33 -0800 Subject: lineHeight, fontSize & weight changed as per figma --- src/screens/onboarding/WelcomeScreen.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index e7c835bb..7e18cb99 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -53,6 +53,7 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', + marginTop: '10%', }, image: { width: SCREEN_WIDTH * 0.9, @@ -60,19 +61,20 @@ const styles = StyleSheet.create({ }, header: { color: '#fff', - fontSize: normalize(32), - fontWeight: '600', + fontSize: normalize(28), + fontWeight: '700', textAlign: 'center', marginBottom: '4%', marginHorizontal: '10%', }, subtext: { color: '#fff', - fontSize: normalize(16), - fontWeight: '600', + fontSize: normalize(17), + fontWeight: '500', textAlign: 'center', marginBottom: '10%', marginHorizontal: '10%', + lineHeight: normalize(25), }, nextButton: { backgroundColor: '#8F01FF', @@ -86,8 +88,8 @@ const styles = StyleSheet.create({ marginBottom: '15%', }, nextButtonLabel: { - fontSize: normalize(30), - fontWeight: '500', + fontSize: normalize(20), + fontWeight: '700', color: '#ddd', }, }); -- cgit v1.2.3-70-g09d2 From bd9ed0712bae14729d18f4d34b891bb82d4550ff Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 1 Feb 2021 17:05:18 -0500 Subject: initial work --- src/components/common/TaggSquareButton.tsx | 80 ++++++++++++++++++++++++++++++ src/components/common/index.ts | 1 + src/screens/onboarding/Login.tsx | 30 ++++++----- src/screens/onboarding/WelcomeScreen.tsx | 49 +++++++----------- 4 files changed, 114 insertions(+), 46 deletions(-) create mode 100644 src/components/common/TaggSquareButton.tsx (limited to 'src/screens') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx new file mode 100644 index 00000000..41e0b891 --- /dev/null +++ b/src/components/common/TaggSquareButton.tsx @@ -0,0 +1,80 @@ +import React from 'react'; +import { + GestureResponderEvent, + StyleSheet, + Text, + TouchableOpacity, + ViewProps, + ViewStyle, +} from 'react-native'; +import {normalize} from '../../utils'; + +interface TaggSquareButtonProps extends ViewProps { + onPress: (event: GestureResponderEvent) => void; + title: string; + mode: 'normal' | 'large'; + color: 'purple' | 'white'; + style?: ViewStyle; +} + +const TaggSquareButton: React.FC = (props) => { + const color = (() => { + switch (props.color) { + case 'purple': + return '#8F01FF'; + case 'white': + default: + return 'white'; + } + })(); + switch (props.mode) { + case 'large': + return ( + + {props.title} + + ); + case 'normal': + default: + return ( + + {props.title} + + ); + } +}; + +const styles = StyleSheet.create({ + largeButton: { + justifyContent: 'center', + alignItems: 'center', + width: '70%', + height: '10%', + borderRadius: 5, + // marginBottom: '15%', + }, + largeLabel: { + fontSize: normalize(30), + fontWeight: '500', + color: '#ddd', + }, + normalButton: { + justifyContent: 'center', + alignItems: 'center', + width: '70%', + height: '10%', + borderRadius: 5, + // marginBottom: '15%', + }, + normalLabel: { + fontSize: normalize(24), + fontWeight: '500', + color: '#ddd', + }, +}); + +export default TaggSquareButton; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 61c7fa26..a5718c1e 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -20,3 +20,4 @@ export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer'; export {default as TaggPopUp} from './TaggPopup'; export {default as TaggPrompt} from './TaggPrompt'; export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; +export {default as TaggSquareButton} from './TaggSquareButton'; diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 63296ede..833e36cb 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -15,7 +15,7 @@ import { } from 'react-native'; import SplashScreen from 'react-native-splash-screen'; import {useDispatch} from 'react-redux'; -import {Background, SubmitButton, TaggInput} from '../../components'; +import {Background, TaggInput, TaggSquareButton} from '../../components'; import { LOGIN_ENDPOINT, TAGG_LIGHT_PURPLE, @@ -215,20 +215,6 @@ const Login: React.FC = ({navigation}: LoginProps) => { ); - /** - * Login screen login button. - */ - const LoginButton = () => ( - - ); - /** * Login screen registration prompt. */ @@ -300,7 +286,19 @@ const Login: React.FC = ({navigation}: LoginProps) => { ref={inputRef} /> - + + + {/* */} diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index 7e18cb99..541ca512 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -1,10 +1,10 @@ +import {StackNavigationProp} from '@react-navigation/stack'; import * as React from 'react'; -import {StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'; -import {normalize, SCREEN_WIDTH} from '../../utils'; -import {Background} from '../../components'; +import {Image, StyleSheet, Text, View} from 'react-native'; +import {Background, TaggSquareButton} from '../../components'; import {OnboardingStackParams} from '../../routes'; -import {StackNavigationProp} from '@react-navigation/stack'; import {BackgroundGradientType} from '../../types'; +import {SCREEN_WIDTH} from '../../utils'; type WelcomeScreenNavigationProps = StackNavigationProp< OnboardingStackParams, @@ -29,16 +29,20 @@ const WelcomeScreen: React.FC = ({navigation}) => { /> - Welcome to Tagg! + Welcome to TAGG! Tagg is the new social networking platform for you! It will help you create your own personalized digital space where you can express who you are, along with all the moments that comprehensively define you! - - Next - + ); }; @@ -53,44 +57,29 @@ const styles = StyleSheet.create({ flexDirection: 'column', justifyContent: 'center', alignItems: 'center', - marginTop: '10%', }, image: { - width: SCREEN_WIDTH * 0.9, - height: SCREEN_WIDTH * 0.9, + width: SCREEN_WIDTH, + height: SCREEN_WIDTH, }, header: { color: '#fff', - fontSize: normalize(28), - fontWeight: '700', + fontSize: 32, + fontWeight: '600', textAlign: 'center', marginBottom: '4%', marginHorizontal: '10%', }, subtext: { color: '#fff', - fontSize: normalize(17), - fontWeight: '500', + fontSize: 16, + fontWeight: '600', textAlign: 'center', - marginBottom: '10%', + marginBottom: '15%', marginHorizontal: '10%', - lineHeight: normalize(25), }, nextButton: { - backgroundColor: '#8F01FF', - justifyContent: 'center', - alignItems: 'center', - width: '70%', - height: '10%', - borderRadius: 5, - borderWidth: 1, - borderColor: '#8F01FF', marginBottom: '15%', }, - nextButtonLabel: { - fontSize: normalize(20), - fontWeight: '700', - color: '#ddd', - }, }); export default WelcomeScreen; -- cgit v1.2.3-70-g09d2 From 3797dd4dbabe2d25374c345c2079defb7fa80695 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 2 Feb 2021 19:02:55 -0500 Subject: adjusted styling --- src/components/common/TaggSquareButton.tsx | 29 ++++++------ src/screens/onboarding/Login.tsx | 76 +++--------------------------- src/screens/onboarding/WelcomeScreen.tsx | 2 +- 3 files changed, 21 insertions(+), 86 deletions(-) (limited to 'src/screens') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 41e0b891..4fe61b95 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -7,7 +7,7 @@ import { ViewProps, ViewStyle, } from 'react-native'; -import {normalize} from '../../utils'; +import {normalize, SCREEN_WIDTH} from '../../utils'; interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; @@ -18,13 +18,13 @@ interface TaggSquareButtonProps extends ViewProps { } const TaggSquareButton: React.FC = (props) => { - const color = (() => { + const buttonStyles = (() => { switch (props.color) { case 'purple': - return '#8F01FF'; + return {backgroundColor: '#8F01FF'}; case 'white': default: - return 'white'; + return {backgroundColor: 'white'}; } })(); switch (props.mode) { @@ -32,8 +32,8 @@ const TaggSquareButton: React.FC = (props) => { return ( - {props.title} + style={[styles.largeButton, buttonStyles, props.style]}> + {props.title} ); case 'normal': @@ -41,7 +41,7 @@ const TaggSquareButton: React.FC = (props) => { return ( + style={[styles.normalButton, buttonStyles, props.style]}> {props.title} ); @@ -55,25 +55,24 @@ const styles = StyleSheet.create({ width: '70%', height: '10%', borderRadius: 5, - // marginBottom: '15%', }, largeLabel: { - fontSize: normalize(30), + fontSize: normalize(26), fontWeight: '500', - color: '#ddd', + color: '#eee', }, normalButton: { justifyContent: 'center', alignItems: 'center', - width: '70%', - height: '10%', + width: SCREEN_WIDTH * 0.45, + aspectRatio: 3.7, borderRadius: 5, - // marginBottom: '15%', + marginBottom: '5%', }, normalLabel: { - fontSize: normalize(24), + fontSize: normalize(20), fontWeight: '500', - color: '#ddd', + color: '#78A0EF', }, }); diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 833e36cb..2db039c1 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -11,16 +11,11 @@ import { StyleSheet, Text, TouchableOpacity, - View, } from 'react-native'; import SplashScreen from 'react-native-splash-screen'; import {useDispatch} from 'react-redux'; import {Background, TaggInput, TaggSquareButton} from '../../components'; -import { - LOGIN_ENDPOINT, - TAGG_LIGHT_PURPLE, - usernameRegex, -} from '../../constants'; +import {LOGIN_ENDPOINT, usernameRegex} from '../../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, ERROR_FAILED_LOGIN_INFO, @@ -215,31 +210,6 @@ const Login: React.FC = ({navigation}: LoginProps) => { ); - /** - * Login screen registration prompt. - */ - const RegistrationPrompt = () => ( - - - New to tagg?{' '} - - - - Get started! - - - - ); - return ( = ({navigation}: LoginProps) => { onPress={handleLogin} title={'Login'} mode={'normal'} - color={'purple'} + color={'white'} /> - {/* */} - ); }; @@ -326,44 +294,12 @@ const styles = StyleSheet.create({ paddingBottom: '1%', left: '3%', borderBottomColor: 'white', + marginBottom: '8%', }, forgotPasswordText: { fontSize: normalize(14), color: '#fff', }, - start: { - width: 144, - height: 36, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#fff', - borderRadius: 18, - marginBottom: '15%', - }, - startDisabled: { - backgroundColor: '#ddd', - }, - startText: { - fontSize: 16, - color: '#78a0ef', - fontWeight: 'bold', - }, - newUserContainer: { - flexDirection: 'row', - color: '#fff', - }, - newUser: { - fontSize: 14, - color: TAGG_LIGHT_PURPLE, - }, - getStarted: { - fontSize: 14, - color: '#fff', - textDecorationLine: 'underline', - }, - button: { - marginVertical: '10%', - }, }); export default Login; diff --git a/src/screens/onboarding/WelcomeScreen.tsx b/src/screens/onboarding/WelcomeScreen.tsx index 541ca512..bfb1a127 100644 --- a/src/screens/onboarding/WelcomeScreen.tsx +++ b/src/screens/onboarding/WelcomeScreen.tsx @@ -39,7 +39,7 @@ const WelcomeScreen: React.FC = ({navigation}) => { -- cgit v1.2.3-70-g09d2