Merge branch 'ALL_UI_2' into 'master'

All ui 2

See merge request !20

screens/Sidebar.js

-import React, { useState } from "react";
+/*import React, { useState } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 
@@ -11,13 +11,15 @@ const Sidebar = () => {
     if (tabIndex === 0) {
         navigation.navigate("Profile"); 
       }if (tabIndex === 1){
-        navigation.navigate("Prescription"); 
+        navigation.navigate("MedicineWelcome"); 
       }if (tabIndex === 2){
         navigation.navigate("WelcomeScreen"); 
       }if (tabIndex === 3){
-        navigation.navigate("bmi"); 
+        navigation.navigate("NutritionWelcome"); 
       }if (tabIndex === 4){
-        navigation.navigate("UsImage"); 
+        navigation.navigate("USWelcome"); 
+      }if (tabIndex === 5){
+        navigation.navigate("MoodWelcome"); 
     
       }
 
@@ -58,6 +60,13 @@ const Sidebar = () => {
       >
         <Text style={styles.tabText}>Baby Growth</Text>
       </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.tab, activeTab === 5 && styles.activeTab]}
+        onPress={() => handleTabPress(5)}
+      >
+        <Text style={styles.tabText}>Mood Detection</Text>
+      </TouchableOpacity>
     </View>
   );
 };
@@ -86,3 +95,108 @@ const styles = StyleSheet.create({
 });
 
 export default Sidebar;
+*/
+
+
+import React, { useState } from "react";
+import { View, TouchableOpacity, Text, StyleSheet, ImageBackground } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import backgroundImage from '../assets/nav.png';
+
+
+const Sidebar = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const navigation = useNavigation();
+
+  const handleTabPress = (tabIndex) => {
+    setActiveTab(tabIndex);
+    if (tabIndex === 0) {
+      navigation.navigate("Profile"); 
+    }if (tabIndex === 1){
+      navigation.navigate("MedicineWelcome"); 
+    }if (tabIndex === 2){
+      navigation.navigate("WelcomeScreen"); 
+    }if (tabIndex === 3){
+      navigation.navigate("NutritionWelcome"); 
+    }if (tabIndex === 4){
+      navigation.navigate("USWelcome"); 
+    }if (tabIndex === 5){
+      navigation.navigate("MoodWelcome"); 
+  
+    }
+
+  };
+
+  return (
+    <ImageBackground source={backgroundImage} style={styles.backgroundImage}>
+      <View style={styles.sidebar}>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 0 && styles.activeTab]}
+          onPress={() => handleTabPress(0)}
+        >
+          <Text style={styles.tabText}>Profile</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 1 && styles.activeTab]}
+          onPress={() => handleTabPress(1)}
+        >
+          <Text style={styles.tabText}>My Medicines</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 2 && styles.activeTab]}
+          onPress={() => handleTabPress(2)}
+        >
+          <Text style={styles.tabText}>Chat</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 3 && styles.activeTab]}
+          onPress={() => handleTabPress(3)}
+        >
+          <Text style={styles.tabText}>Food Plans</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 4 && styles.activeTab]}
+          onPress={() => handleTabPress(4)}
+        >
+          <Text style={styles.tabText}>Baby Growth</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          style={[styles.tab, activeTab === 5 && styles.activeTab]}
+          onPress={() => handleTabPress(5)}
+        >
+          <Text style={styles.tabText}>Mood Detection</Text>
+        </TouchableOpacity>
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  backgroundImage: {
+    flex: 1,
+    resizeMode: "cover", // or "contain" for different resizing options
+  },
+  sidebar: {
+    flex: 1,
+    paddingTop: 40,
+    paddingHorizontal: 20,
+  },
+  tab: {
+    paddingVertical: 10,
+    marginBottom: 10,
+    borderRadius: 5,
+  },
+  activeTab: {
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderColor: '#FF9DD2', // Pink border color
+  },
+  tabText: {
+    fontSize: 18,
+    fontWeight: "bold",
+    textAlign: "left",
+  },
+});
+
+export default Sidebar;

screens/Signup.js

 import React, { useState, useEffect } from 'react';
-import { View, TextInput, Button, StyleSheet, Text, ScrollView } from 'react-native';
+import { View, TextInput, Button, StyleSheet, Text, ScrollView ,ImageBackground} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { firebase } from "../config";
 import { Alert } from 'react-native';
@@ -80,8 +80,12 @@ const Signup = ({ route }) => {
 
   return (
     <View style={styles.body}>
-      <ScrollView>
-        <Text style={styles.pageTitle}>Sign Up</Text>
+   
+    <ImageBackground source={require("../assets/signup.png")} resizeMode="cover" style={styles.image}>
+    <View style={styles.overlay}>
+     
+
+       
         <View style={styles.container}>
           <TextInput
             placeholder="User Name"
@@ -121,23 +125,40 @@ const Signup = ({ route }) => {
           <Button title="Sign Up" onPress={saveUserData} />
         </View>
         <View>
-          <Button title="Sign In" onPress={handleSignIn} />
+          <Button title="Sign In"   style={ styles.signin} onPress={handleSignIn} />
         </View>
-      </ScrollView>
+     
+      </View>
+    </ImageBackground>
+   
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: "#e5e5e5",
+   
     padding: 15,
     borderRadius: 15,
-    margin: 5,
-    marginHorizontal: 10,
     flexDirection: "row",
     alignItems: "center",
   },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+
+
+  signin: {
+    marginTop: 20
+  },
+  
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 20,
+    justifyContent: 'center',
+  },
   input: {
     borderWidth: 1,
     borderColor: 'gray',