initial UIs

src/Components/Background/Background.tsx

@@ -2,15 +2,17 @@ import * as React from "react";
 import { View } from "react-native";
 import styles from "../../styles";
 
+
 export interface props {
-  children: React.ReactNode;
+  children: React.ReactNode;  
 }
 
 export default function Background(props: props) {
   return (
+
     <View style={styles.background}>
-      <View style={{ margin: 8 }} />
+      <View style={{ margin: 8 }} /> 
       {props.children}
-    </View>
+    </View> 
   );
 }

src/Routes/AddNote/AddNote.tsx

@@ -1,12 +1,44 @@
 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 AddNote() {
+  const [addnote, setNote] = useState("");
+  
+
   return (
     <Background>
       <Text style={{...styles.text_white, ...{fontSize: 32}}}>Add Note</Text>
+      <SafeAreaView>  
+      <View style={styles.addnotecont}> 
+      <View style={styles.tle}>
+      <TextInput 
+            style={styles.title}
+            placeholder="Title"
+            placeholderTextColor="white"
+            onChangeText={setNote} 
+            value={addnote}
+          />
+        </View>   
+        <View style={styles.typehere}> 
+        <TextInput 
+            style={styles.typeinput}
+            placeholder="Type here...."
+            placeholderTextColor="white"
+            onChangeText={setNote} 
+            value={addnote}
+          /> 
+       </View>
+      <TouchableOpacity style={styles.savebtn}>
+      <Text style={styles.savenote}>SAVE</Text>
+      </TouchableOpacity>
+      </View>
+      </SafeAreaView>
     </Background>
   );
 }

src/Routes/Home/Home.tsx

@@ -2,11 +2,13 @@ import * as React from 'react';
 import {View, Text} from 'react-native';
 import styles from '../../styles';
 import Background from '../../Components/Background/Background';
-import AppIcon from '../../Components/Icons/AppIcon/AppIcon';
+import AddIcon from '../../Components/Icons/AddIcon/AddIcon';
 
 export default function Home() {
+  //const navigation = ({ navigation}: {navigation:any}) => {
   return (
     <Background>
+      <Text style={{...styles.text_white, ...{fontSize: 25}}}>Clip Notes</Text>
       <View
         style={{
           display: 'flex',
@@ -14,12 +16,14 @@ export default function Home() {
           alignItems: 'center',
           justifyContent: 'center',
         }}>
-        <AppIcon size={64} color="white" />
-        <Text style={{...styles.text_white, ...{fontSize: 32}}}>
-          Clip Notes
-        </Text>
-      </View>
+          <View style={styles.homecont}> 
+        <View style={styles.addicon}> 
+        <AddIcon size={32} color="white" />
+        <Text style={styles.no}>No notes yet...</Text>
+        </View>
       <View style={{margin: 16}} />
+      </View>
+      </View>
     </Background>
   );
 }

src/Routes/Login/Login.tsx

@@ -8,7 +8,6 @@ import { useState } from "react";
 import {TouchableOpacity,} from "react-native";
 
 
-
 export default function Login() {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
@@ -17,7 +16,7 @@ export default function Login() {
     <Background>
        <Text style={{...styles.text_white, ...{fontSize: 32}}}></Text>
       <SafeAreaView>
-      <View style={styles.container}>
+      <View style={styles.container}> 
         <Text style ={styles.loginlabel}>Login to Clip Notes</Text>
       <StatusBar style="auto" />
       <View style={styles.inputView}>
@@ -29,7 +28,6 @@ export default function Login() {
             value={username}
           /> 
           </View>   
-        
         <View style={styles.inputView}>
         <TextInput
           style={styles.TextInput}

src/Routes/UserInfo/UserInfo.tsx

@@ -2,11 +2,18 @@ import * as React from 'react';
 import {View, Text} from 'react-native';
 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';
 
 export default function UserInfo() {
   return (
     <Background>
-      <Text style={{...styles.text_white, ...{fontSize: 32}}}>UserInfo</Text>
+      <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>
+      </SafeAreaView>
     </Background>
   );
 }

src/styles.tsx

@@ -1,11 +1,13 @@
 import {StyleSheet} from 'react-native';
 
 
+
 const styles = StyleSheet.create({
   background: {
-    backgroundColor: '#002d4c',
     height: '100%',
     width: '100%',
+    backgroundColor:'#002d4d',
+    position: 'absolute',
   },
   text_white: {
     color: 'white',
@@ -44,7 +46,6 @@ const styles = StyleSheet.create({
     width: "70%",
     height: 45,
     marginBottom: 20,
-    
   },
   TextInput: {
     color: 'white',
@@ -103,6 +104,116 @@ const styles = StyleSheet.create({
     marginBottom: 30,
     color: 'white',
   },
+  box:{
+    width: '100%',
+    height: 200,
+  },
+  userinfocont:{
+    marginTop: 10,
+    marginLeft: 50,
+    height: 80,
+    width: 300,
+    borderRadius: 25, 
+    backgroundColor: 'orange',
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  userlabel:{
+    fontWeight: 'bold',
+    fontSize: 25,
+    marginBottom: 10,
+    color: 'white', 
+  },
+  addnote:{
+    marginLeft: 180,
+    width: "10%",
+    borderRadius: 25,
+    height: 30,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "lightgreen",
+  },
+  addtext:{
+    fontSize: 20,
+    color: 'white',
+  },
+  addnotescont:{
+    marginTop: 20,
+    marginLeft: 20,
+    height: 200,
+    width: 350,
+    backgroundColor: 'blue',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  addicon:{ 
+    alignItems: 'center',
+    marginTop: 5,
+  },
+  no: {
+    fontSize: 20,
+    color: 'white',
+    marginTop: 20,
+    alignItems: 'center'
+  },
+  typehere:{
+    backgroundColor: "black",
+    borderRadius: 10,
+    width: "75%",
+    height: 300,
+    marginTop: 20, 
+  },
+  typeinput: {
+    color: 'white',
+    flex: 1,
+    paddingBottom: 250,
+    marginLeft: 5,
+  },
+  title:{
+    color: 'white',
+    flex: 1,
+    marginLeft: 5,
+  },
+  tle:{
+    backgroundColor: "black",
+    borderRadius: 10,
+    width: "80%",
+    height: 40,
+    marginTop: 20,
+  },
+  addnotecont:{
+    marginTop: 30,
+    marginLeft: 22,
+    height: 500,
+    width: 350,
+    borderRadius: 25, 
+    backgroundColor: '#7cb9e8',
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  savebtn:{
+    width: "50%",
+    borderRadius: 25,
+    height: 50,
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 40,
+    backgroundColor: "green",
+  },
+  savenote:{
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 20,
+  },
+  homecont:{
+    marginTop: 30,
+    height: 150,
+    width: 350,
+    borderRadius: 25, 
+    backgroundColor: '#7cb9e8',
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
 
 export default styles;