fix css mobile issues

This commit is contained in:
Maria Sanchez 2022-08-15 23:16:44 -06:00
parent 4b08969ebe
commit 235e3f7bc9
1 changed files with 39 additions and 9 deletions

View File

@ -2,7 +2,6 @@ import React from "react";
import { import {
Text, Text,
Link, Link,
View,
Center, Center,
Heading, Heading,
VStack, VStack,
@ -10,12 +9,40 @@ import {
FormControl, FormControl,
Input, Input,
Button, Button,
Image, Image
TextInput
} from "native-base"; } from "native-base";
import logo from "../assets/logo-katoikia.png"; import logo from "../assets/logo-katoikia.png";
import { Entypo } from '@expo/vector-icons'; import { Entypo } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons'; import { MaterialCommunityIcons } from '@expo/vector-icons';
import { View, TextInput, StyleSheet } from "react-native";
const styles = StyleSheet.create({
input: {
height: 40,
margin: 10,
borderWidth: 0.5,
padding: 5,
flex: 1,
paddingTop: 10,
paddingRight: 10,
paddingBottom: 10,
paddingLeft: 0,
marginTop: 50,
marginBottom: 10
},
iconStyle: {
padding: 10,
},
viewSection: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
marginTop: 5
}
})
export default function LogIn({navigation}) { export default function LogIn({navigation}) {
return ( return (
@ -54,17 +81,17 @@ export default function LogIn({navigation}) {
<FormControl> <FormControl>
<FormControl.Label> Correo Electrónico </FormControl.Label> <FormControl.Label> Correo Electrónico </FormControl.Label>
<View> <View style={styles.viewSection}>
<Entypo name="email" size={20} color="grey" /> <Entypo name="email" size={20} color="grey" style={styles.iconStyle} />
<Input type="text" /> <TextInput type="text" style={styles.input} />
</View> </View>
</FormControl> </FormControl>
<FormControl> <FormControl>
<FormControl.Label> Contraseña </FormControl.Label> <FormControl.Label> Contraseña </FormControl.Label>
<View> <View style={styles.viewSection}>
<MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" /> <MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" style={styles.iconStyle}/>
<Input type="password" /> <TextInput type="password" style={styles.input} />
</View> </View>
<Link <Link
_text={{ _text={{
@ -91,4 +118,7 @@ export default function LogIn({navigation}) {
</Box> </Box>
</Center> </Center>
); );
} }