Merge branch 'main' of https://github.com/GenerateNU/nightlife into f…

…eature/final-venue
GenerateNU · Dec 5, 2024 · c02bc69 · c02bc69
2 parents 6e2c0e5 + 443f563
commit c02bc69
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 56 deletions.
diff --git a/frontend/components/Buttons/ProfileButtons.tsx b/frontend/components/Buttons/ProfileButtons.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { Pressable, Text, StyleSheet, ViewStyle, TextStyle, Dimensions } from 'react-native';
 
-// Get device width for dynamic sizing
 const { width } = Dimensions.get('window');
 
-// A function to scale size values dynamically based on the screen width
-const scaleSize = (size: number) => (width / 375) * size; // Assuming 375 is the base width for iPhone
+const scaleSize = (size: number) => (width / 375) * size;
 
 interface ProfileButtonProps {
     onPress: () => void;
@@ -21,7 +19,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({ onPress, title, buttonSty
             style={({ pressed }) => [
                 styles.button,
                 buttonStyle,
-                pressed && styles.buttonPressed, // Apply pressed style when active
+                pressed && styles.buttonPressed,
             ]}
         >
             <Text style={[styles.text, textStyle]}>{title}</Text>
@@ -31,12 +29,12 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({ onPress, title, buttonSty
 
 const styles = StyleSheet.create({
     button: {
-        backgroundColor: '#333', // Default background color
-        paddingVertical: scaleSize(12), // Scaled padding
-        paddingHorizontal: scaleSize(0), // Scaled padding for width
-        borderRadius: scaleSize(6), // Scaled border radius for rounded edges
-        borderWidth: 2, // Static 2px border
-        borderColor: 'gray', // No visible border
+        backgroundColor: '#3a3a54',
+        paddingVertical: scaleSize(12),
+        paddingHorizontal: scaleSize(0),
+        borderRadius: scaleSize(6),
+        borderWidth: 2,
+        borderColor: '#5656a6',
         alignItems: 'center',
         justifyContent: 'center',
         width: width * 0.435,

diff --git a/frontend/components/Buttons/ProfileTabButton.tsx b/frontend/components/Buttons/ProfileTabButton.tsx
@@ -33,24 +33,24 @@ const ProfileTab: React.FC<ProfileTabProps> = ({ onPress, icon, isActive = false
 
 const styles = StyleSheet.create({
     tab: {
-        backgroundColor: '#333',
-        paddingVertical: scaleSize(10), // Dynamically scale padding
-        borderRadius: scaleSize(8), // Dynamically scale border radius
+        backgroundColor: '#3a3a54',
+        paddingVertical: scaleSize(10),
+        borderRadius: scaleSize(8),
         alignItems: 'center',
         width: scaleSize(106),
         borderWidth: 2,
-        borderColor: "gray"
+        borderColor: "#5656a6"
     },
     tabActive: {
-        backgroundColor: '#000', // Darker background for active tab
+        backgroundColor: '#000',
     },
     tabPressed: {
-        backgroundColor: '#555', // Even darker background when tab is pressed
+        backgroundColor: '#3a3a54',
     },
     icon: {
-        width: scaleSize(30), // Dynamically scale icon size
-        height: scaleSize(30), // Dynamically scale icon size
-        resizeMode: 'contain', // Ensure icons fit well within their bounds
+        width: scaleSize(30),
+        height: scaleSize(30),
+        resizeMode: 'contain',
     },
 });
 

diff --git a/frontend/components/Map/SearchBar.tsx b/frontend/components/Map/SearchBar.tsx
@@ -6,13 +6,14 @@ type SearchBarProps = {
   placeholderText: string;
   icon?: boolean
   onSubmitEditing?: (text: string) => void;
+  style?: object;
 }
 
-const SearchBar = ({ placeholderText, icon, onSubmitEditing }: SearchBarProps) => {
+const SearchBar = ({ placeholderText, icon, onSubmitEditing, style }: SearchBarProps) => {
   const [searchText, setSearchText] = React.useState("");
 
   return (
-    <View style={styles.searchContainer}>
+    <View style={[styles.searchContainer, style]}>
       {icon && <MaterialCommunityIcons
         name="magnify"
         size={20}
@@ -40,23 +41,26 @@ const styles = StyleSheet.create({
     left: 20,
     right: 20,
     zIndex: 1,
-    backgroundColor: "#333",
-    borderRadius: 20,
-    padding: 10,
+    backgroundColor: "#3a3a54",
+    borderRadius: 12,
+    borderWidth: 2,
+    borderColor: "#5656a6",
     shadowColor: "#000",
     shadowOpacity: 0.2,
     shadowOffset: { width: 0, height: 3 },
     shadowRadius: 5,
+    paddingHorizontal: 12,
     elevation: 5,
+    marginTop: 40,
   },
   searchIcon: {
-    marginRight: 10,
+    marginRight: 2,
   },
   searchInput: {
     flex: 1,
     height: 40,
     color: "#fff",
-    backgroundColor: "#444",
+    backgroundColor: "#3a3a54",
     borderRadius: 10,
     paddingHorizontal: 10,
   },

diff --git a/frontend/components/VenueCards/ProfileVenueCard.tsx b/frontend/components/VenueCards/ProfileVenueCard.tsx
@@ -37,12 +37,12 @@ const ProfileVenueCard: React.FC<ProfileVenueCardProps> = ({ image, title, dista
 const styles = StyleSheet.create({
     card: {
         width: (width / 2.2) - scaleSize(10),
-        backgroundColor: '#333',
+        backgroundColor: '#3a3a54',
         borderRadius: 8,
         overflow: 'hidden',
         marginVertical: 4,
         borderWidth: 2,
-        borderColor: "gray"
+        borderColor: "#5656a6"
     },
     imageContainer: {
         height: width * 0.3,
@@ -66,7 +66,7 @@ const styles = StyleSheet.create({
     },
     infoContainer: {
         padding: scaleSize(8),
-        backgroundColor: '#333',
+        backgroundColor: '#3a3a54',
     },
     title: {
         color: '#fff',

diff --git a/frontend/navigation/BottomNavigator.tsx b/frontend/navigation/BottomNavigator.tsx
@@ -39,7 +39,7 @@ const bottomTabNavOptions: BottomTabNavigationOptions = {
     marginHorizontal: 12
   },
   headerStyle: {
-    backgroundColor: "#1c1c1c",
+    backgroundColor: "#1a1a2e",
     shadowColor: "transparent",
     height: 48,
   },
@@ -91,12 +91,37 @@ export function BottomNavigator() {
       <Tab.Screen
         name="Home"
         component={HomeStackNavigator}
-        options={createScreenOptions("Home", "home")}
+        options={{
+          tabBarLabel: "Home",
+          headerShown: true,
+          headerStyle: {
+            backgroundColor: "#1a1a2e",
+            shadowColor: "transparent",
+            height: 44,
+          },
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons
+              name="home"
+              color={color}
+              size={size}
+            />
+          ),
+        }}
       />
       <Tab.Screen
         name="Browse"
         component={MapScreen}
-        options={createScreenOptions("Search", "magnify")}
+        options={{
+          tabBarLabel: "Browse",
+          headerShown: false,
+          tabBarIcon: ({ color, size }) => (
+            <MaterialCommunityIcons
+              name="map-search"
+              color={color}
+              size={size}
+            />
+          ),
+        }}
       />
       <Tab.Screen
         name="Profile"

diff --git a/frontend/screens/HomeScreen.tsx b/frontend/screens/HomeScreen.tsx
@@ -29,7 +29,7 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ showSearchBar = true }) => {
     <View style={styles.container}>
       {showSearchBar && (
         <View style={styles.searchBarContainer}>
-          <SearchBar placeholderText="Search venues..." onSubmitEditing={handleSearch}/>
+          <SearchBar icon={true} placeholderText="Search venues..." onSubmitEditing={handleSearch} style={{marginTop: -8}}/>
         </View>
       )}
       <ScrollView contentContainerStyle={styles.scrollableContent}>
@@ -50,10 +50,10 @@ const HomeScreen: React.FC<HomeScreenProps> = ({ showSearchBar = true }) => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: "#1c1c1c",
+        backgroundColor: "#1a1a2e",
     },
     scrollableContent: {
-        paddingTop: 64,
+        paddingTop: 54,
         paddingHorizontal: 2
     },
     searchBarContainer: {

diff --git a/frontend/screens/MapScreen.tsx b/frontend/screens/MapScreen.tsx
@@ -13,6 +13,7 @@ import HomeScreen from "./HomeScreen";
 import EventCard from "./explore/EventCard";
 import CustomMarkerImage from "@/assets/custom-marker.png";
 import RatingStarImage from "@/assets/rating-star.png";
+import { useNavigation } from "@react-navigation/native";
 
 const MapScreen: React.FC = () => {
   const [allVenues, setAllVenues] = useState<Venue[]>([]);
@@ -113,13 +114,27 @@ const MapScreen: React.FC = () => {
     return venue[dayKey] || "Hours not available";
   };
 
+  const navigation = useNavigation();
+
+  const handleSearch = async (text: string) => {
+    const req = await fetch(`${API_DOMAIN}/venues/search?q=${encodeURIComponent(text)}`);
+
+    if (!req.ok) {
+      console.error("Failed to search for venues");
+      return;
+    }
+
+    const res = await req.json();
+    navigation.navigate("VenueCards", { venues: res });
+  };
+
   return (
+
     <GestureHandlerRootView style={{ flex: 1 }}>
       <View style={styles.container}>
-        {/* Floating Search Bar */}
-        <SearchBar placeholderText="Search for venues" />
 
-        {/* Map */}
+        <SearchBar placeholderText="Search for venues..." icon={true} onSubmitEditing={handleSearch} />
+
         <MapView
           key={mapKey}
           style={styles.map}
@@ -256,7 +271,9 @@ const styles = StyleSheet.create({
     transform: [{ translateX: -30 }],
     width: 60,
     height: 60,
-    backgroundColor: "#1c1c1e",
+    backgroundColor: "#3a3a54",
+    borderWidth: 2,
+    borderColor: "#5656a6",
     borderRadius: 30,
     justifyContent: "center",
     alignItems: "center",

diff --git a/frontend/screens/ProfileScreen.tsx b/frontend/screens/ProfileScreen.tsx
@@ -266,7 +266,7 @@ const ProfileScreen = () => {
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#1c1c1c',
+        backgroundColor: '#1a1a2e',
         paddingTop: scaleSize(20),
     },
     headerContainer: {
@@ -282,7 +282,7 @@ const styles = StyleSheet.create({
         borderRadius: scaleSize(40),
         backgroundColor: '#666',
         borderWidth: 3,
-        borderColor: "cornflowerblue"
+        borderColor: "#5656a6"
     },
     userInfo: {
         marginLeft: scaleSize(15),
@@ -319,10 +319,10 @@ const styles = StyleSheet.create({
         marginHorizontal: scaleSize(20),
         marginVertical: scaleSize(8),
         padding: scaleSize(10),
-        backgroundColor: '#333',
+        backgroundColor: '#3a3a54',
         borderRadius: scaleSize(8),
         borderWidth: 2,
-        borderColor: "gray",
+        borderColor: "#5656a6",
     },
     bioText: {
         color: '#fff',

diff --git a/frontend/screens/explore/VenueCard.tsx b/frontend/screens/explore/VenueCard.tsx
@@ -45,7 +45,7 @@ const styles = StyleSheet.create({
         borderRadius: 10,
         overflow: "hidden",
         marginRight: 10,
-        width: "auto",
+        width: "100%",
         height: "auto",
         borderWidth: 2,
         borderColor: "#735ad1",

diff --git a/frontend/screens/explore/VenueCardPage.tsx b/frontend/screens/explore/VenueCardPage.tsx
@@ -19,7 +19,7 @@ const VenueCardPage: React.FC<VenueCardPageProps> = () => {
 
     return (
         <View style={styles.container}>
-            <TouchableOpacity onPress={() => navigation.goBack()} style={{ display: "flex", borderColor: "gray", borderWidth: 2, borderRadius: 6, marginBottom: 4, marginHorizontal: 12}}>
+            <TouchableOpacity onPress={() => navigation.goBack()} style={{ display: "flex", borderColor: "#5656a6", borderWidth: 2, borderRadius: 6, marginTop: 10, marginHorizontal: 20}}>
                 <Text style={{ color: "#fff", padding: 10, marginLeft: 10 }}>Back</Text>
             </TouchableOpacity>
             <FlatList
@@ -29,7 +29,7 @@ const VenueCardPage: React.FC<VenueCardPageProps> = () => {
                 horizontal={false}
                 showsHorizontalScrollIndicator={false}
                 contentContainerStyle={styles.listContent}
-                style={{ flex: 1, marginTop: 10 }}
+                style={{ marginTop: 10, marginHorizontal: 10 }}
             />
         </View>
     );
@@ -46,7 +46,7 @@ const styles = StyleSheet.create({
     },
     container: {
         flex: 1,
-        backgroundColor: "#1c1c1e",
+        backgroundColor: "#1a1a2e",
         paddingVertical: 10,
     },
     listContent: {

diff --git a/frontend/screens/profile/EditProfile.tsx b/frontend/screens/profile/EditProfile.tsx
@@ -132,7 +132,7 @@ const EditProfile = ({ navigation }: EditProfileProps) => {
       <View style={styles.editThing}>
         <Text style={styles.aboutYouText}>Private?</Text>
         <Switch
-          trackColor={{ false: "#007bff", true: "#007bff" }}
+          trackColor={{ false: "#382873", true: "#382873" }}
           ios_backgroundColor="#3e3e3e"
           onValueChange={togglePrivacy}
           value={privacy}
@@ -155,7 +155,7 @@ const styles = StyleSheet.create({
   },
   goBackButton: {
     padding: 6,
-    backgroundColor: "#007bff",
+    backgroundColor: "#382873",
     borderRadius: 6,
     alignSelf: "flex-start",
     flexDirection: "row",
@@ -175,7 +175,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
   },
   editThing: {
-    backgroundColor: "#1c1c1c",
+    backgroundColor: "#1a1a2e",
     flexDirection: "row",
     justifyContent: "space-between",
     alignContent: "center",
@@ -210,7 +210,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     padding: 20,
-    backgroundColor: "#1c1c1c",
+    backgroundColor: "#1a1a2e",
   },
   title: {
     fontSize: 26,
@@ -219,7 +219,7 @@ const styles = StyleSheet.create({
   },
   button: {
     padding: 16,
-    backgroundColor: "#007bff",
+    backgroundColor: "#382873",
     borderRadius: 6,
     marginVertical: 16,
   },