diff options
Diffstat (limited to 'src/screens')
| -rw-r--r-- | src/screens/onboarding/Login.tsx | 96 | ||||
| -rw-r--r-- | src/screens/onboarding/WelcomeScreen.tsx | 49 |
2 files changed, 34 insertions, 111 deletions
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index 63296ede..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, SubmitButton, TaggInput} from '../../components'; -import { - LOGIN_ENDPOINT, - TAGG_LIGHT_PURPLE, - usernameRegex, -} from '../../constants'; +import {Background, TaggInput, TaggSquareButton} from '../../components'; +import {LOGIN_ENDPOINT, usernameRegex} from '../../constants'; import { ERROR_DOUBLE_CHECK_CONNECTION, ERROR_FAILED_LOGIN_INFO, @@ -215,45 +210,6 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { </TouchableOpacity> ); - /** - * Login screen login button. - */ - const LoginButton = () => ( - <SubmitButton - text="Let's Start!" - color="#fff" - style={styles.button} - accessibilityLabel="Let's Start!" - accessibilityHint="Select this after entering your tagg username and password" - onPress={handleLogin} - /> - ); - - /** - * Login screen registration prompt. - */ - const RegistrationPrompt = () => ( - <View style={styles.newUserContainer}> - <Text - accessible={true} - accessibilityLabel="New to tagg?" - style={styles.newUser}> - New to tagg?{' '} - </Text> - <TouchableOpacity - accessibilityLabel="Get started." - accessibilityHint="Select this if you do not have a tagg account"> - <Text - accessible={true} - accessibilityLabel="Get started" - style={styles.getStarted} - onPress={startRegistrationProcess}> - Get started! - </Text> - </TouchableOpacity> - </View> - ); - return ( <Background centered @@ -300,9 +256,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { ref={inputRef} /> <ForgotPassword /> - <LoginButton /> + <TaggSquareButton + onPress={handleLogin} + title={'Login'} + mode={'normal'} + color={'white'} + /> + <TaggSquareButton + onPress={startRegistrationProcess} + title={'Sign up'} + mode={'normal'} + color={'purple'} + /> </KeyboardAvoidingView> - <RegistrationPrompt /> </Background> ); }; @@ -328,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 7e18cb99..bfb1a127 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<WelcomeScreenProps> = ({navigation}) => { /> <View> - <Text style={styles.header}>Welcome to Tagg!</Text> + <Text style={styles.header}>Welcome to TAGG!</Text> <Text style={styles.subtext}> 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! </Text> </View> - <TouchableOpacity onPress={handleNext} style={styles.nextButton}> - <Text style={styles.nextButtonLabel}>Next</Text> - </TouchableOpacity> + <TaggSquareButton + onPress={handleNext} + title={'Next'} + mode={'large'} + color={'purple'} + style={styles.nextButton} + /> </Background> ); }; @@ -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; |