Login page and Register Page

src/Routes/Login/Login.tsx

@@ -5,36 +5,39 @@ import Background from '../../Components/Background/Background';
 import { SafeAreaView} from "react-native";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
-import {Button,TouchableOpacity,} from "react-native";
+import {TouchableOpacity,} from "react-native";
 
 
 
 export default function Login() {
-  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  
+
   return (
     <Background>
-       <Text style={{...styles.text_white, ...{fontSize: 32}}}>LOG IN</Text>
+       <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
       <SafeAreaView>
       <View style={styles.container}>
+        <Text style ={styles.loginlabel}>Login to Clip Notes</Text>
       <StatusBar style="auto" />
       <View style={styles.inputView}>
         <TextInput 
             style={styles.TextInput}
-            placeholder="Email."
+            placeholder="Username"
-            placeholderTextColor="#003f5c"
+            placeholderTextColor="white"
-            onChangeText={(email) => setEmail(email)}
+            onChangeText={setUsername} 
+            value={username}
           /> 
           </View>   
         
         <View style={styles.inputView}>
         <TextInput
           style={styles.TextInput}
-          placeholder="Password."
+          placeholder="Password"
-          placeholderTextColor="#003f5c"
+          placeholderTextColor="white"
           secureTextEntry={true}
-          onChangeText={(password) => setPassword(password)}
+          onChangeText={setPassword} 
+          value={password}
         />
       </View>
 
@@ -44,9 +47,12 @@ export default function Login() {
       <TouchableOpacity style={styles.loginBtn}>
       <Text style={styles.loginText}>LOGIN</Text>
       </TouchableOpacity>
+      <TouchableOpacity style={styles.registerbtn}>
+      <Text style={styles.registertext}>REGISTER</Text>
+      </TouchableOpacity>
       </View>
       </SafeAreaView>
     </Background>   
 ); 
-}
+};
  

src/Routes/Register/Register.tsx

@@ -1,12 +1,56 @@
 import * as React from 'react';
-import {View, Text} from 'react-native';
+import {View, Text, TextInput} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useState } from "react";
+import {TouchableOpacity} from "react-native";
 
 export default function Register() {
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>Register</Text>
+      <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
+      <SafeAreaView>
+      <View style={styles.container}>
+        <Text style ={styles.loginlabel}>Create an Account</Text>
+      <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Email"
+            placeholderTextColor="white"
+            onChangeText={setEmail} 
+            value={email}
+          /> 
+          </View>   
+          <View style={styles.inputView}>
+        <TextInput 
+            style={styles.TextInput}
+            placeholder="Username"
+            placeholderTextColor="white"
+            onChangeText={setUsername} 
+            value={username}
+          /> 
+          </View>   
+        <View style={styles.inputView}>
+        <TextInput
+          style={styles.TextInput}
+          placeholder="Password"
+          placeholderTextColor="white"
+          secureTextEntry={true}
+          onChangeText={setPassword} 
+          value={password}
+        />
+      </View>
+      <TouchableOpacity style={styles.registerbtn}>
+      <Text style={styles.registertext}>REGISTER</Text>
+      </TouchableOpacity>
+      </View>
+      </SafeAreaView>
     </Background>
+
   );
 }

src/styles.tsx

@@ -39,7 +39,7 @@ const styles = StyleSheet.create({
   },
  
   inputView: {
-    backgroundColor: "skyblue",
+    backgroundColor: "black",
     borderRadius: 30,
     width: "70%",
     height: 45,
@@ -47,6 +47,7 @@ const styles = StyleSheet.create({
     
   },
   TextInput: {
+    color: 'white',
     height: 50,
     flex: 1,
     padding: 10,
@@ -56,7 +57,7 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: 'white',
     height: 30,
-    marginBottom: 30,
+    marginBottom: 10,
   },
   loginBtn: {
     width: "50%",
@@ -64,20 +65,44 @@ const styles = StyleSheet.create({
     height: 50,
     alignItems: "center",
     justifyContent: "center",
-    marginTop: 30,
+    backgroundColor: "lightgreen",
-    backgroundColor: "skyblue",
+  },
+  registerbtn: {
+    width: "80%",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 40,
+    backgroundColor: "orange",
   },
   loginText:{
-    color: '#003f5c',
+    color: 'white',
     fontWeight: 'bold',
     fontSize: 20,
   },
+  registertext:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+    
+  },
   container: {
-    marginTop: 200,
+    marginTop: 30,
-    flex: 1,
+    marginLeft: 22,
+    height: 500,
+    width: 350,
+    borderRadius: 25, 
+    backgroundColor: 'blue',
     alignItems: "center",
     justifyContent: "center",
   },
+  loginlabel:{
+    fontWeight: 'bold',
+    fontSize: 25,
+    marginBottom: 30,
+    color: 'white',
+  },
 });
 
 export default styles;