Sisi skyler merge branch update design

StudyBuddy2.0/src/screens/HomePage.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { View, Text, TextInput, Button, StyleSheet, FlatList, TouchableOpacity, Modal} from 'react-native';
+import { View, Text, TextInput, Button, StyleSheet, FlatList, TouchableOpacity, Modal,ImageBackground} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 global.messages = global.messages || [];
@@ -51,6 +51,10 @@ const HomePage = () => {
 
 
   return (
+    <ImageBackground
+      source={require('./images/HomePage.png')} // Replace with your image path
+      style={styles.backgroundImage}
+    >
     <View style={styles.container}>
       <View style={styles.header}>
       <TouchableOpacity onPress={() => setModalVisible(true)} style={styles.button}>
@@ -75,7 +79,13 @@ const HomePage = () => {
       renderItem={({ item }) => (
         <View style={styles.groupItem}>
           <Text>{item.name}</Text>
-          <Button title="Join" onPress={() => handleJoinGroup(item)} />
+          <TouchableOpacity
+  style={styles.borderedButton}
+  onPress={() => handleJoinGroup(item)}
+>
+  <Text style={styles.joinbuttonText}>Join</Text>
+</TouchableOpacity>
+
         </View>
       )}
     />
@@ -104,12 +114,14 @@ const HomePage = () => {
         </View>
       </Modal>
     </View>
+    </ImageBackground>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+
   },
   header: {
     flexDirection: 'row',
@@ -126,14 +138,16 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: -20,
     textAlign: 'center', // Center the text
+    color: 'white',
   },
   searchBar: {
     borderWidth: 1,
     borderColor: '#ddd',
-    borderRadius: 5,
+    borderRadius: 20,
     padding: 10,
     margin: 10,
     bottom: -17,
+    backgroundColor: 'white',
   },
   groupItem: {
     backgroundColor: 'white',
@@ -145,6 +159,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     borderWidth: 1,
     borderColor: '#ddd',
+    top: 30,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 5 },
+    shadowOpacity: .20,
+    shadowRadius: 3.84,
+
+    // Elevation for Android
+    elevation: 5,
   },
   // ... other styles
   centeredView: {
@@ -175,14 +197,42 @@ const styles = StyleSheet.create({
     padding: 10,
     width: 200,
   },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
   // button: {
   //   backgroundColor: 'lightblue', // or any color you want
   //   padding: 8,
   //   borderRadius: 5,
   // },
   buttonText: {
-    // color: 'white', // choose a text color that suits your app
+    color: 'white', // choose a text color that suits your app
+
+  },
+  borderedButton: {
+    padding: 10,
+    // borderWidth: 1, // Specify border width
+    borderColor: '#000', // Specify border color
+    borderRadius: 20, // Rounded corners
+    alignItems: 'center', // Center the text inside the button
+    justifyContent: 'center', // Center button content vertically
+    backgroundColor: '#75B2B1', // Transparent background
+    width:80, 
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 5 },
+    shadowOpacity: .40,
+    shadowRadius: 3.84,
+
+    // Elevation for Android
+    elevation: 5,
   },
+  joinbuttonText:{
+    color: 'white',
+   fontSize: 15,
+  }
   // ... other styles
 });
 

StudyBuddy2.0/src/screens/MatchingScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput, ScrollView, Button } from 'react-native';
+import { View, Text, StyleSheet, Image, TouchableOpacity, TextInput, ScrollView, Button, ImageBackground } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useNavigation } from '@react-navigation/native';
 
@@ -105,6 +105,10 @@ const MatchingScreen = () => {
 {/* FIRST BUDDY BADGE FUNCTION WILL GO -- CHECK BUDDY COUNT -- CAN CALL OUT OF FOLDER */}
 
   return (
+    <ImageBackground
+      source={require('./images/Matching.png')} // Replace with your image path
+      style={styles.backgroundImage}
+    >
     <ScrollView style={styles.container}>
       {/* Search Bar */}
       <TextInput
@@ -123,11 +127,11 @@ const MatchingScreen = () => {
         <View style={styles.profileSection}>
           <Image source={{ uri: currentUser.profilePic }} style={styles.profilePic} />
           <View style={styles.userInfo}>
-            <Text>Classes: {currentUser.classes.join(', ')}</Text>
-            <Text>Likes: {currentUser.likes.join(', ')}</Text>
-            <Text>Skills: {currentUser.skills.join(', ')}</Text>
-            <Text>Weaknesses: {currentUser.weaknesses.join(', ')}</Text>
-            <Text>Strengths: {currentUser.strengths.join(', ')}</Text>
+            <Text style = {styles.userStuff}>Classes: {currentUser.classes.join(', ')}</Text>
+            <Text style = {styles.userStuff}>Likes: {currentUser.likes.join(', ')}</Text>
+            <Text style = {styles.userStuff}>Skills: {currentUser.skills.join(', ')}</Text>
+            <Text style = {styles.userStuff}>Weaknesses: {currentUser.weaknesses.join(', ')}</Text>
+            <Text style = {styles.userStuff}>Strengths: {currentUser.strengths.join(', ')}</Text>
           </View>
         </View>
 
@@ -178,6 +182,7 @@ const MatchingScreen = () => {
       )}
 
     </ScrollView>
+    </ImageBackground>
   );
 };
 
@@ -195,28 +200,41 @@ const styles = StyleSheet.create({
     backgroundColor: '#fff',
     height: 425,
     justifyContent: 'space-between', // This will distribute the children evenly
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: .30,
+    shadowRadius: 3.84,
+
+    // Elevation for Android
+    elevation: 5,
 
   },
   fullName: {
-    fontSize: 20,
+    fontSize: 24,
     fontWeight: 'bold',
+    textDecorationLine: 'underline',
+    color: '#6DB4CA'
   },
   profileSection: {
     flexDirection: 'row',
     alignItems: 'flex-start',
   },
   profilePic: {
     width: 100,
-    height: 100,
-    borderRadius: 50,
+    height: 125,
+    borderRadius: 30,
     marginRight: 20,
-    bottom: 150
+    bottom: 60,
+    borderWidth:1,
+    borderColor: '#6DB4CA'
   },
   userInfo: {
     flex: 1,
      // Allow text to wrap within the container
     alignContent: 'space-between', // Evenly distribute wrapped lines
-    bottom: 150
+    bottom: 150,
+    // size: 50,
+    width: 40,
   },
   connectButton: {
     backgroundColor: 'black',
@@ -225,6 +243,7 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     bottom: -80 // Stretch button to match the parent's width
     // Remove bottom: -270 if you are using justifyContent: 'space-between'
+
   },
 
   connectButtonText: {
@@ -246,14 +265,31 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     margin: 10,
+    backgroundColor: 'white',
   },
   btnBackground: {
     backgroundColor: 'black',
     paddingVertical: 10,
     paddingHorizontal: 20,
     borderRadius: 20,
 
-  }
+  },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
+  userStuff:{
+    backgroundColor: 'white',
+    padding: 5,
+    margin: 5,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: '#6DB4CA',
+    top: 80,
+
+  },
   // ... additional styles as needed
 });
 

StudyBuddy2.0/src/screens/MessageDetailScreen.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, TextInput, StyleSheet, TouchableOpacity,KeyboardAvoidingView,
-    Platform } from 'react-native';
+    Platform, ImageBackground } from 'react-native';
 const MessageDetailScreen = ({ route }) => {
   const { name, message } = route.params;
 
@@ -13,6 +13,10 @@ const MessageDetailScreen = ({ route }) => {
       behavior={Platform.OS === "ios" ? "padding" : "height"}
       keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
     >
+    <ImageBackground
+      source={require('./images/HomePage.png')} // Replace with your image path
+      style={styles.backgroundImage}
+    >
     <View style={styles.container}>
       <View style={styles.header}>
         {/* <Text style={styles.headerTitle}>{name}</Text> */}
@@ -26,6 +30,7 @@ const MessageDetailScreen = ({ route }) => {
         // Add additional TextInput props as needed
       />
     </View>
+    </ImageBackground>
     </KeyboardAvoidingView>
   );
 };
@@ -63,11 +68,18 @@ const styles = StyleSheet.create({
   input: {
     borderWidth: 1,
     borderColor: '#ddd',
-    padding: 10,
+    padding: 15,
     borderRadius: 5,
     margin: 10,
+    backgroundColor: 'white',
     // Other styling properties
   },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
   // Add other styles as needed
 });
 

StudyBuddy2.0/src/screens/MessagesScreen.js

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, FlatList} from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, FlatList, ImageBackground} from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 const MessagesScreen = () => {
@@ -16,6 +16,10 @@ const MessagesScreen = () => {
   };
 
   return (
+    <ImageBackground
+      source={require('./images/HomePage.png')} // Replace with your image path
+      style={styles.backgroundImage}
+    >
     <View style={styles.container}>
       <View style={styles.header}>
         <TouchableOpacity onPress={() => navigation.goBack()}>
@@ -43,6 +47,7 @@ const MessagesScreen = () => {
         <Text style={styles.addButtonText}>+</Text>
       </TouchableOpacity>
     </View>
+    </ImageBackground>
   );
 };
 
@@ -56,21 +61,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 10,
     paddingTop: 30,
-    borderBottomWidth: 1,
-    borderBottomColor: '#ddd',
+    // borderBottomWidth: 1,
+    // borderBottomColor: '#ddd',
+    // backgroundColor: 'white',
   },
   title: {
-    fontSize: 20,
+    fontSize: 24,
     textDecorationLine: 'underline',
     fontWeight: 'bold',
+    color: 'white',
   },
   backButton: {
     fontSize: 18,
-    color: 'blue',
+    color: 'white',
   },
   logoutButton: {
     fontSize: 18,
-    color: 'blue',
+    color: 'white',
   },
   messageItem: {
     backgroundColor: 'white',
@@ -79,6 +86,13 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     borderWidth: 1,
     borderColor: '#ddd',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 5 },
+    shadowOpacity: .15,
+    shadowRadius: 3.84,
+
+    // Elevation for Android
+    elevation: 5,
   },
   messageName: {
     fontWeight: 'bold',
@@ -102,6 +116,12 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: 'blue',
   },
+  backgroundImage: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+  },
   // ... other styles you may need
 });