updating login

components/Login.js

@@ -1,63 +1,83 @@
 import { StatusBar } from 'expo-status-bar';
 import React, { useState } from 'react';
-import { Text, View, TextInput, Button, StyleSheet } from 'react-native';
+import { Text, View, StyleSheet, Image } from 'react-native';
+import { TextInput, Button } from 'react-native-paper';
 import API from './../API.js';
 import { useNavigation } from '@react-navigation/native';
+import GlobalState from '../contexts/GlobalState.js';
 
 
-let LoginForm = ()=>{
+let LoginForm = () => {
   let [email, setEmail] = useState('');
   let [password, setPassword] = useState('');
   const navigation = useNavigation();
 
   return (
     <View style={styles.mainView}>
-      <Text>Log in</Text>
+      <Image
+        style={styles.logo}
+        source={require('./../assets/icon.png')}
+      />
+      <Text style={styles.header}>Login</Text>
       <TextInput
         style={styles.input}
         onChangeText={text => setEmail(text)}
         defaultValue={email}
-        placeholder=" email"
+        placeholder="email"
         autoCapitalize='none'
         autoComplete='email'
         autoCorrect={false}
+        mode="outlined"
       />
       <TextInput
         style={styles.input}
         onChangeText={text => setPassword(text)}
         defaultValue={password}
-        placeholder=" password"
+        placeholder="password"
         textContentType="password"
         secureTextEntry={true}
         autoCapitalize='none'
         autoComplete='email'
         autoCorrect={false}
+        mode="outlined"
       />
       <Button
         onPress={async () => {
           let r = await API.logIn(email, password);
-            if(r.status === "ok") navigation.navigate('Feed');
+          if (r.status === "ok") navigation.navigate('Feed');
         }}
-        title={"login"}
+      >submit</Button>
-      />
     </View>
   );
 }
 
 export default LoginForm;
 
-const styles = StyleSheet.create ({
+const styles = StyleSheet.create({
-  mainView:{
+  mainView: {
+    backgroundColor: 'white',
     flex: 1,
-    flexDirection:'column',
+    flexDirection: "column",
-    alignItems: 'center',
+    justifyContent: "flex-start",
+    padding: 15,
+    width: "100%",
+    alignContent: 'center'
+  },
+  header: {
+    fontFamily: 'Helvetica-Bold',
+    fontSize: 42,
+    textAlign: "left",
+    paddingBottom: 15,
+    color: '#777',
+    alignContent: 'center'
+  },
+  logo:{
+    width: 250, 
+    height: 250,
     justifyContent: 'center',
+    alignItems: 'center',
   },
-  input: {
+  input:{
-    height: 40,
+    backgroundColor: 'white'
-    width: 300,
+  }
-    borderColor: 'gray',
-    borderWidth: 1,
-    margin: 10
-  },
 });