diff options
| -rw-r--r-- | App.tsx | 116 |
1 files changed, 69 insertions, 47 deletions
@@ -45,41 +45,63 @@ const App = () => { barStyle='light-content' /> <View style={styles.container}> - <LinearGradient colors={['#8F00FF', '#6EE7E7']} style={styles.linearGradient} useAngle={true} angle={154.72} angleCenter={{x:0.5,y:0.5}}> - <Image - source={require('./src/assets/sign_in_logo.png')} - style={styles.logo} - /> - <TextInput - style={styles.credentials} - placeholder="Username" - placeholderTextColor='#FFFFFF' - returnKeyType='next' - onSubmitEditing={() => {passwordInput.current.focus()}} - blurOnSubmit={false} - autoCompleteType='username' - textContentType='username' - keyboardType='ascii-capable' - /> - <TextInput - ref={passwordInput} - style={styles.credentials} - placeholder="Password" - placeholderTextColor='#FFFFFF' - secureTextEntry={true} - autoCompleteType='password' - textContentType='password' - returnKeyType='go' - /> - <TouchableOpacity style={styles.forgotPassword} onPress={() => Alert.alert("tagg! You're it!")} accessibilityLabel="Forgot password button"> - <Text style={styles.forgotPasswordText}>Forgot password</Text> - </TouchableOpacity> - <TouchableOpacity style={styles.start} onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}> - <Text style={styles.startText}>Let's Start!</Text> - </TouchableOpacity> - <Text style={styles.newUser}> - New to tagg? <Text style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text> - </Text> + <LinearGradient + colors={['#8F00FF', '#6EE7E7']} + style={styles.linearGradient} + useAngle={true} + angle={154.72} + angleCenter={{x:0.5,y:0.5}}> + <Image + source={require('./src/assets/sign_in_logo.png')} + style={styles.logo} + /> + <TextInput + accessible={true} + accessibilityLabel="Username text entry box" + accessibilityHint="Enter your tagg username here" + style={styles.credentials} + placeholder="Username" + placeholderTextColor='#FFFFFF' + autoCompleteType='username' + textContentType='username' + returnKeyType='next' + keyboardType='ascii-capable' + onSubmitEditing={() => {passwordInput.current.focus()}} + blurOnSubmit={false} + /> + <TextInput + accessible={true} + accessibilityLabel="Password text entry box" + accessibilityHint="Enter your tagg password here" + style={styles.credentials} + placeholder="Password" + placeholderTextColor='#FFFFFF' + autoCompleteType='password' + textContentType='password' + returnKeyType='go' + onSubmitEditing={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")} + ref={passwordInput} + secureTextEntry={true} + /> + <TouchableOpacity + accessible={true} + accessibilityLabel="Forgot password button" + accessibilityHint="Select this if you forgot your tagg password" + style={styles.forgotPassword} + onPress={() => Alert.alert("tagg! You're it!")}> + <Text style={styles.forgotPasswordText}>Forgot password</Text> + </TouchableOpacity> + <TouchableOpacity + accessible={true} + accessibilityLabel="Let's start button" + accessibilityHint="Select this after entering your tagg username and password" + style={styles.start} + onPress={() => Alert.alert("My favorite Girl Scout Cookies are taggalongs!")}> + <Text style={styles.startText}>Let's Start!</Text> + </TouchableOpacity> + <Text accessible={true} accessibilityLabel="New to tagg?" style={styles.newUser}> + New to tagg? <Text accessible={true} accessibilityLabel="Get started" accessibilityHint="Select this if you do not have a tagg account" style={styles.getStarted} onPress={() => Alert.alert("I get the tagg flip it and tumble it.")}>Get started!</Text> + </Text> </LinearGradient> </View> </> @@ -89,7 +111,7 @@ const App = () => { const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: 'transparent' + backgroundColor: 'transparent', }, linearGradient: { flex: 1, @@ -98,50 +120,50 @@ const styles = StyleSheet.create({ logo: { top: 165, width: 215, - height: 149 + height: 149, }, credentials: { top: 215, + width: 248, + height: 40, + fontSize: 20, + color: '#FFFFFF', borderColor: '#FFFDFD', borderWidth: 2, borderRadius: 20, - width: 248, - height: 40, paddingLeft: 13, marginVertical: 15, - fontSize: 15, - color: '#FFFFFF' }, forgotPassword: { - top: 205, - left: -45, + top: 215, + left: -60, }, forgotPasswordText: { + fontSize: 15, color: '#FFFFFF', textDecorationLine: 'underline', - fontSize: 20 }, start: { top: 220, - backgroundColor: '#FFFFFF', width: 144, height: 36, justifyContent: 'center', alignItems: 'center', + backgroundColor: '#FFFFFF', borderRadius: 20, marginTop: 15 }, startText: { + fontSize: 15, color: '#78A0EF', fontWeight: 'bold', - fontSize: 15 }, getStarted: { color: '#FFFFFF', textDecorationLine: 'underline' }, newUser: { - top: 230, + top: 235, color: '#F4DDFF', } }); |