navigation and more components

mobile-ui/components/Home.js

@@ -2,7 +2,6 @@ import React from "react";
 import {
     Text,
     HStack,
-    NativeBaseProvider,
     IconButton,
     Box,
     StatusBar,
@@ -14,10 +13,10 @@ import {
 export default function Home(){
 
     return (
-        <Center w="100%">
+        <Center width={"100%"} marginTop={"auto"}>
              <StatusBar bg="#D7A86E" barStyle="light-content" />
       <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">
           <IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
           <Text color="white" fontSize="20" fontWeight="bold">

mobile-ui/components/LogIn.js

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

mobile-ui/components/RecoverPassword.js

@@ -1,13 +1,56 @@
-import { Center } from "native-base";
 import React from "react";
-
+import {
+    Text,
+    Link,
+    Center,
+    Heading,
+    VStack,
+    Box,
+    FormControl,
+    Input,
+    Button
+  } from "native-base";
 export default function RecoverPassword () {
 
 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>
+
 )
 }