updating login

components/Login.js

@@ -1,8 +1,10 @@
 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 = () => {
@@ -12,7 +14,11 @@ let LoginForm = ()=>{
 
   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)}
@@ -21,6 +27,7 @@ let LoginForm = ()=>{
         autoCapitalize='none'
         autoComplete='email'
         autoCorrect={false}
+        mode="outlined"
       />
       <TextInput
         style={styles.input}
@@ -32,14 +39,14 @@ let LoginForm = ()=>{
         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');
         }}
-        title={"login"}
-      />
+      >submit</Button>
     </View>
   );
 }
@@ -48,16 +55,29 @@ export default LoginForm;
 
 const styles = StyleSheet.create({
   mainView: {
+    backgroundColor: 'white',
     flex: 1,
-    flexDirection:'column',
-    alignItems: 'center',
+    flexDirection: "column",
+    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:{
-    height: 40,
-    width: 300,
-    borderColor: 'gray',
-    borderWidth: 1,
-    margin: 10
-  },
+    backgroundColor: 'white'
+  }
 });