diff options
| -rw-r--r-- | src/components/common/TaggSquareButton.tsx | 29 | ||||
| -rw-r--r-- | src/screens/onboarding/Login.tsx | 76 | ||||
| -rw-r--r-- | src/screens/onboarding/WelcomeScreen.tsx | 2 |
3 files changed, 21 insertions, 86 deletions
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<TaggSquareButtonProps> = (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<TaggSquareButtonProps> = (props) => { return ( <TouchableOpacity onPress={props.onPress} - style={[styles.normalButton, {backgroundColor: color}, props.style]}> - <Text style={styles.normalLabel}>{props.title}</Text> + style={[styles.largeButton, buttonStyles, props.style]}> + <Text style={styles.largeLabel}>{props.title}</Text> </TouchableOpacity> ); case 'normal': @@ -41,7 +41,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { return ( <TouchableOpacity onPress={props.onPress} - style={[styles.normalButton, {backgroundColor: color}, props.style]}> + style={[styles.normalButton, buttonStyles, props.style]}> <Text style={styles.normalLabel}>{props.title}</Text> </TouchableOpacity> ); @@ -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<LoginProps> = ({navigation}: LoginProps) => { </TouchableOpacity> ); - /** - * 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 @@ -290,17 +260,15 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => { onPress={handleLogin} title={'Login'} mode={'normal'} - color={'purple'} + color={'white'} /> <TaggSquareButton - onPress={handleLogin} - title={'Login'} + onPress={startRegistrationProcess} + title={'Sign up'} mode={'normal'} - color={'white'} + color={'purple'} /> - {/* <LoginButton /> */} </KeyboardAvoidingView> - <RegistrationPrompt /> </Background> ); }; @@ -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<WelcomeScreenProps> = ({navigation}) => { <TaggSquareButton onPress={handleNext} title={'Next'} - mode={'normal'} + mode={'large'} color={'purple'} style={styles.nextButton} /> |