eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

navigation and more components

This commit is contained in:
Maria Sanchez 2022-08-12 21:56:58 -06:00
parent ec0d604e34
commit 4b08969ebe
4 changed files with 69 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
mobile-ui/components/Home.js
View File

@ -2,7 +2,6 @@ import React from "react";
import { import {
Text, Text,
HStack, HStack,
NativeBaseProvider,
IconButton, IconButton,
Box, Box,
StatusBar, StatusBar,
@ -14,10 +13,10 @@ import {
export default function Home(){ export default function Home(){
return ( return (
<Center w="100%"> <Center width={"100%"} marginTop={"auto"}>
<StatusBar bg="#D7A86E" barStyle="light-content" /> <StatusBar bg="#D7A86E" barStyle="light-content" />
<Box safeAreaTop bg="#D7A86E" /> <Box safeAreaTop bg="#D7A86E" />
<HStack bg="#6200ee" px="1" py="3" justifyContent="space-between" alignItems="center" w="100%" maxW="350"> <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
<HStack alignItems="center"> <HStack alignItems="center">
<IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} /> <IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
<Text color="white" fontSize="20" fontWeight="bold"> <Text color="white" fontSize="20" fontWeight="bold">

32
mobile-ui/components/LogIn.js
View File

@ -2,22 +2,20 @@ import React from "react";
import { import {
Text, Text,
Link, Link,
HStack, View,
Center, Center,
Heading, Heading,
Switch,
useColorMode,
NativeBaseProvider,
extendTheme,
VStack, VStack,
Box, Box,
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 { MaterialCommunityIcons } from '@expo/vector-icons';
export default function LogIn({navigation}) { export default function LogIn({navigation}) {
return ( return (
@ -54,12 +52,20 @@ export default function LogIn({navigation}) {
<VStack space={3} mt="5"> <VStack space={3} mt="5">
<FormControl> <FormControl>
<FormControl.Label> Correo Electrónico</FormControl.Label> <FormControl.Label> Correo Electrónico </FormControl.Label>
<Input />
<View>
<Entypo name="email" size={20} color="grey" />
<Input type="text" />
</View>
</FormControl> </FormControl>
<FormControl> <FormControl>
<FormControl.Label> Contraseña </FormControl.Label> <FormControl.Label> Contraseña </FormControl.Label>
<Input type="password" /> <View>
<MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" />
<Input type="password" />
</View>
<Link <Link
_text={{ _text={{
fontSize: "xs", fontSize: "xs",
@ -69,7 +75,9 @@ export default function LogIn({navigation}) {
alignSelf="flex-end" alignSelf="flex-end"
mt="1" mt="1"
onPress={() => navigation.navigate('Password')} onPress={() => navigation.navigate('Password')}
> >
Recuperar contraseña Recuperar contraseña
</Link> </Link>
@ -82,7 +90,5 @@ export default function LogIn({navigation}) {
</VStack> </VStack>
</Box> </Box>
</Center> </Center>
); );
} }

0
mobile-ui/components/Profile.js Normal file
View File

51
mobile-ui/components/RecoverPassword.js
View File

@ -1,13 +1,56 @@
import { Center } from "native-base";
import React from "react"; import React from "react";
import {
Text,
Link,
Center,
Heading,
VStack,
Box,
FormControl,
Input,
Button
} from "native-base";
export default function RecoverPassword () { export default function RecoverPassword () {
return ( return (
<Center w="100%">
<Box safeArea p="2" py="8" w="90%" maxW="290">
<Heading
size="lg"
fontWeight="600"
color="coolGray.800"
_dark={{
color: "warmGray.50",
}}
>
Recupere su contraseña
</Heading>
<Heading
mt="1"
_dark={{
color: "warmGray.200",
}}
color="coolGray.600"
fontWeight="medium"
size="xs"
>
Se le enviaran las instrucciones al correo electrónico
</Heading>
<Center> <VStack space={3} mt="5">
<FormControl>
<FormControl.Label> Correo Electrónico</FormControl.Label>
<Input />
</FormControl>
<Button mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
>
<Text>Recuperar contraseña</Text>
</Button>
</VStack>
</Box>
</Center>
</Center>
) )
} }