navigations and polished user info, home and add note screen

src/Routes/AddNote/AddNote.tsx

@@ -5,11 +5,14 @@ import Background from '../../Components/Background/Background';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useState } from "react";
 import {TouchableOpacity,} from "react-native";
-
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
 
 export default function AddNote() {
   const [addnote, setNote] = useState("");
+  const [addtitle, setTitle] = useState("");
   
+  const navigation = useNavigation<RootDrawerParamList>();
 
   return (
     <Background>
@@ -21,8 +24,8 @@ export default function AddNote() {
             style={styles.title}
             placeholder="Title"
             placeholderTextColor="white"
-            onChangeText={setNote} 
-            value={addnote}
+            onChangeText={setTitle} 
+            value={addtitle}
           />
         </View>   
         <View style={styles.typehere}> 
@@ -31,13 +34,20 @@ export default function AddNote() {
             placeholder="Type here...."
             placeholderTextColor="white"
             onChangeText={setNote} 
-            value={addnote}
+            value={addnote} 
           /> 
        </View>
       <TouchableOpacity style={styles.savebtn}>
       <Text style={styles.savenote}>SAVE</Text>
       </TouchableOpacity>
+      <TouchableOpacity style={styles.cancelbtn}
+       onPress={() => {
+        navigation.navigate("Home");  
+      }}>
+      <Text style={styles.cancel}>CANCEL</Text>
+      </TouchableOpacity>
       </View>
+      
       </SafeAreaView>
     </Background>
   );

src/Routes/Home/Home.tsx

@@ -2,10 +2,13 @@ import * as React from 'react';
 import {View, Text} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
-import AddIcon from '../../Components/Icons/AddIcon/AddIcon';
+import { useNavigation } from "@react-navigation/native";
+import {TouchableOpacity,} from "react-native";
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
 
 export default function Home() {
-  //const navigation = ({ navigation}: {navigation:any}) => {
+    const navigation = useNavigation<RootDrawerParamList>();
+
   return (
     <Background>
       <Text style={{...styles.text_white, ...{fontSize: 25}}}>Clip Notes</Text>
@@ -16,13 +19,16 @@ export default function Home() {
           alignItems: 'center',
           justifyContent: 'center',
         }}>
-          <View style={styles.homecont}> 
-        <View style={styles.addicon}> 
-        <AddIcon size={32} color="white" />
-        <Text style={styles.no}>No notes yet...</Text>
-        </View>
+          <View style={styles.homecont}>
+          <TouchableOpacity     
+        onPress={() => {
+          navigation.navigate("Add Note");  
+        }}>
+          <Text style={styles.newnote}>+</Text>
+        </TouchableOpacity>
+        <Text style={styles.no}>New note...</Text>
       <View style={{margin: 16}} />
-      </View>
+       </View>
       </View>
     </Background>
   );

src/Routes/Login/Login.tsx

@@ -6,12 +6,14 @@ import { SafeAreaView} from "react-native";
 import { StatusBar } from "expo-status-bar";
 import { useState } from "react";
 import {TouchableOpacity,} from "react-native";
-
+import { RootDrawerParamList } from "../../Interfaces/Interfaces";
+import { useNavigation } from "@react-navigation/native";
 
 export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
+  const navigation = useNavigation<RootDrawerParamList>();
   return (
     <Background>
        <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
@@ -45,7 +47,10 @@ export default function Login() {
       <TouchableOpacity style={styles.loginBtn}>
       <Text style={styles.loginText}>LOGIN</Text>
       </TouchableOpacity>
-      <TouchableOpacity style={styles.registerbtn}>
+      <TouchableOpacity style={styles.registerbtn}
+      onPress={() => {
+        navigation.navigate("Register");  
+      }}>
       <Text style={styles.registertext}>REGISTER</Text>
       </TouchableOpacity>
       </View>

src/Routes/UserInfo/UserInfo.tsx

@@ -4,15 +4,35 @@ import styles from '../../styles';
 import Background from '../../Components/Background/Background';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import UserIcon from '../../Components/Icons/UserIcon/UserIcon';
+import {TouchableOpacity, TextInput} from "react-native";
+import { useState } from "react";
 
 export default function UserInfo() {
+  const [isEditable, setIsEditable] = useState(false);
   return (
     <Background>
       <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
       <SafeAreaView>
       <View style={styles.userinfocont}>  
         <Text style ={styles.userlabel} > <UserIcon size={32} color="white"/> USER INFO</Text>
+
         </View>
+      <View style={styles.form}>
+        <View style={styles.inputRow}>
+          <Text style={styles.label}>Username</Text>
+          <TextInput
+            style={[styles.inputUser, !isEditable && styles.disabledInput]}
+            editable={isEditable}
+          />
+          
+        </View>
+        <TouchableOpacity
+          style={styles.editButton}
+          onPress={() => setIsEditable(!isEditable)}
+        >
+          <Text style={styles.buttonText}>{isEditable ? "Save" : "Edit Profile"}</Text>
+        </TouchableOpacity>
+      </View>
       </SafeAreaView>
     </Background>
   );

src/styles.tsx

@@ -146,10 +146,6 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'center',
   },
-  addicon:{ 
-    alignItems: 'center',
-    marginTop: 5,
-  },
   no: {
     fontSize: 20,
     color: 'white',
@@ -192,12 +188,21 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   savebtn:{
-    width: "50%",
+    width: "40%",
     borderRadius: 25,
-    height: 50,
+    height: 40,
     alignItems: "center",
     justifyContent: "center",
-    marginTop: 40,
+    marginTop: 10,
+    backgroundColor: "green",
+  },
+  cancelbtn:{
+    width: "40%",
+    borderRadius: 25,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 10,
     backgroundColor: "green",
   },
   savenote:{
@@ -205,6 +210,11 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     fontSize: 20,
   },
+  cancel:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
   homecont:{
     marginTop: 30,
     height: 150,
@@ -214,6 +224,55 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  newnote:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 50,
+  },
+  //
+  form: {
+    flex: 1,
+    alignItems: "center",
+  },
+  inputRow: {
+    width: "60%",
+    height: 50,
+    marginTop: 50,
+    marginLeft:10,
+    justifyContent: "center",
+  },
+  label: {
+    marginBottom: 5,
+    marginLeft: 5,
+    fontSize: 20,
+    color: "white",
+  },
+  disabledInput: {
+    backgroundColor: "white",
+    borderRadius: 10,
+    
+  },
+  editButton: {
+    backgroundColor: "green",
+    width: "20%",
+    borderRadius: 25,
+    height: 40,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 20,
+    marginLeft: 20
+  },
+  buttonText:{
+    color: "white",
+  },
+  inputUser:{
+    marginLeft: 10,
+    height: 40,
+    width: "100%",
+    color: "black",
+    backgroundColor: "white",
+    borderRadius: 10,
+  }
 });
 
 export default styles;