Common UI Modification

screens/Sidebar.js

@@ -16,9 +16,12 @@ const Sidebar = () => {
       }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");  
     
       }
 

screens/Signin.js

 import React, { useState, useEffect } from 'react';
-import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
+import { View, Text, TextInput, Button, StyleSheet,ImageBackground,ScrollView} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { firebase } from '../config';
 import { registerIndieID, unregisterIndieDevice } from 'native-notify';
@@ -140,7 +140,12 @@ useEffect(() => {
 }, []);
 
   return (
+    <ScrollView contentContainerStyle={styles.scrollViewContent}>
     <View style={styles.container}>
+       
+      <ImageBackground source={require("../assets/signup.png")} resizeMode="cover" style={styles.image}>
+      <View style={styles.overlay}>
+      <View style={styles.subcontainer}>
       <Text style={styles.label}>Email</Text>
       <TextInput
         style={styles.input}
@@ -157,11 +162,17 @@ useEffect(() => {
         onChangeText={(text) => setPassword(text)}
         secureTextEntry
       />
-
+      <View style={styles.subcontainerbut}>
       <Button title="Sign In" onPress={handleSignIn} />
       <Text style={styles.signUpText}>Don't have an account? Sign Up</Text>
       <Button title="Sign Up" onPress={goToSignUp} />
+      </View>
+      </View>
+      </View>
+      </ImageBackground>
+     
     </View>
+    </ScrollView>
   );
 };
 
@@ -169,21 +180,47 @@ useEffect(() => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
     alignItems: 'center',
-    margin: 20,
+  },
+
+  subcontainer:{
+    marginTop: -250,
+
+  },
+
+  
+  scrollViewContent: {
+    minHeight: '120%', // Set a minimum height to enable scrolling
+  },
+
+  subcontainerbut:{
+    marginTop: 20,
+    
+  },
+  image: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    padding: 80,
+    justifyContent: 'center',
+   
   },
   label: {
     fontSize: 16,
-    marginBottom: 5,
+   
+   
   },
   input: {
     width: '100%',
     height: 40,
     borderWidth: 1,
     borderColor: 'gray',
-    marginBottom: 10,
-    padding: 10,
+    marginTop: 10,
+    
   },
   signUpText: {
     marginTop: 10,