css fixes

mobile-ui/App.js

@@ -1,6 +1,7 @@
-import React from "react";
+import React,{useState} from "react";
 import {
-  NativeBaseProvider
+  NativeBaseProvider, 
+  Icon
 } from "native-base";
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
@@ -10,24 +11,28 @@ import Home from "./components/Home";
 import RecoverPassword from "./components/RecoverPassword";
 import Reservas from "./components/Reservas";
 import Profile from "./components/Profile"; 
+import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator(); 
 
 
+
 function HomeTab() {
 
+const [selected, setSelected] = useState(0);
+
   return (
     <Tab.Navigator initialRouteName="Comunicados" > 
     <Tab.Screen  name="Comunicados" component={Home} options={{headerStyle: {
       backgroundColor: "#D7A86E"
-    }}}/> 
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)} /> 
     <Tab.Screen  name="Reservas" component={Reservas } options={{headerStyle: {
       backgroundColor: "#D7A86E"
-    }}}/> 
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)}  /> 
     <Tab.Screen  name="Perfil" component={Profile} options={{headerStyle: {
       backgroundColor: "#D7A86E"
-    }}}/> 
+    }, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} /> 
   </Tab.Navigator>
   )
 }

mobile-ui/components/LogIn.js

@@ -113,7 +113,7 @@ export default function LogIn({navigation}) {
                
               </Link>
             </FormControl>
-            <Button  mt="2" colorScheme="primary" onPress={() => navigation.navigate('Comunicados')}
+            <Button  mt="2" backgroundColor="#D7A86E" onPress={() => navigation.navigate('Comunicados')}
             >
               <Text>Continuar</Text>
             </Button>

mobile-ui/components/Profile.js

@@ -1,15 +1,57 @@
 import React from "react";
 
 import {
-    Box
+    Box, 
+    Heading, 
+    VStack, 
+    FormControl, 
+    Input, 
+    Button,
+    Center
   } from "native-base";
 
 export default function Profile(){
 
     return (
-        <Box> 
-
+        <Center>
+             <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Welcome
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+          Sign up to continue!
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Nombre</FormControl.Label>
+            <Input />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Correo Electrónico</FormControl.Label>
+            <Input />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Teléfono</FormControl.Label>
+            <Input type="password" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Contraseña actual</FormControl.Label>
+            <Input type="password" />
+          </FormControl>
           
+          <Button mt="2" backgroundColor="orange.300">
+            Actualizar
+          </Button>
+          <Button mt="6" colorScheme="error">
+            Cerrar sesión
+          </Button>
+        </VStack>
       </Box>
+        </Center>
+       
     )
 }