Venue Styling/Bug Fixes

app.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "expo-font"
+  ]
+}

backend/internal/handlers/venues/venues.go

@@ -7,7 +7,7 @@ import (
 	"net/http"
 	"strconv"
 	"strings"
-
+	"sort"
 	"github.com/GenerateNU/nightlife/internal/errs"
 	"github.com/GenerateNU/nightlife/internal/models"
 	"github.com/GenerateNU/nightlife/internal/types"
@@ -196,26 +196,54 @@ func (s *Service) GetVenuePersona(c *fiber.Ctx) error {
 		fmt.Println("error: " + err.Error())
 		return fiber.NewError(fiber.StatusInternalServerError, "Could not get venue")
 	}
+
+	// Calculate weights
 	total := v.AvgEnergy + v.AvgExclusive + v.AvgMainstream + v.AvgPrice
 	priceWeight := v.AvgPrice / total
 	mainstreamWeight := v.AvgMainstream / total
 	energyWeight := v.AvgEnergy / total
 	exclusiveWeight := v.AvgExclusive / total
+
 	temp := models.ByRecommendation{}
-	persona := ``
-	minDistance := math.Inf(1)
+	allDists := []struct {
+		Persona  string
+		Distance float64
+	}{}
+
+	// Calculate distances and populate allDists
 	for key, value := range temp.CharacterMap() {
-		// energy, exclusive, mainstream, price
-		distance := math.Abs(float64(energyWeight)-float64(value[0])) + math.Abs(float64(exclusiveWeight)-float64(value[1])) + math.Abs(float64(mainstreamWeight)-float64(value[2])) + math.Abs(float64(priceWeight)-float64(value[3]))
-		if distance < minDistance {
-			persona = key
-			minDistance = distance
-		}
+		distance := math.Abs(float64(energyWeight)-float64(value[0])) +
+			math.Abs(float64(exclusiveWeight)-float64(value[1])) +
+			math.Abs(float64(mainstreamWeight)-float64(value[2])) +
+			math.Abs(float64(priceWeight)-float64(value[3]))
+
+		allDists = append(allDists, struct {
+			Persona  string
+			Distance float64
+		}{
+			Persona:  key,
+			Distance: distance,
+		})
 	}
-	if persona == `` {
+
+	// If no personas are available
+	if len(allDists) == 0 {
 		return c.Status(fiber.StatusOK).JSON("Not enough reviews to determine venue persona")
 	}
-	return c.Status(fiber.StatusOK).JSON(persona)
+
+	// Sort allDists by ascending distance
+	sort.Slice(allDists, func(i, j int) bool {
+		return allDists[i].Distance < allDists[j].Distance
+	})
+
+	// Collect the top 3 personas (or fewer if less than 3 exist)
+	top3Personas := []string{}
+	for i := 0; i < len(allDists) && i < 3; i++ {
+		top3Personas = append(top3Personas, allDists[i].Persona)
+	}
+
+	// Return the top 3 personas
+	return c.Status(fiber.StatusOK).JSON(top3Personas)
 }
 
 func (s *Service) GetVenuesByIDs(c *fiber.Ctx) error {

backend/internal/storage/postgres/userrating.go

@@ -38,11 +38,12 @@ WHERE
 
 func (db *DB) CreateReview(ctx context.Context, p models.Review) error {
 	query := `INSERT INTO review (overall_rating, energy_rating, mainstream_rating, price_rating, crowd_rating, hype_rating, 
-					exclusive_rating, review_text, venue_id, user_id) 
-				VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`
+	exclusive_rating, review_text, venue_id, user_id) 
+	VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`
 
 	_, err := db.conn.Query(ctx, query, p.OverallRating, p.EnergyRating,
-		p.MainstreamRating, p.PriceRating, p.CrowdRating,
-		p.HypeRating, p.ExclusiveRating, p.ReviewText, p.VenueID, p.UserID)
+	p.MainstreamRating, p.PriceRating, p.CrowdRating,
+	p.HypeRating, p.ExclusiveRating, p.ReviewText, p.VenueID, p.UserID)
+
 	return err
 }

backend/internal/storage/postgres/venues.go

@@ -110,7 +110,6 @@ func (db *DB) GetAllVenues(ctx context.Context) ([]models.Venue, error) {
 	saturday_hours, sunday_hours, ST_Y(location::geometry) AS latitude, ST_X(location::geometry) AS longitude FROM venue`
 	rows, err := db.conn.Query(ctx, query)
 	if err != nil {
-		fmt.Print("hello")
 		return []models.Venue{}, err
 	}
 	defer rows.Close()

frontend/App.tsx

@@ -12,8 +12,9 @@ import MusicPreferences from './components/OnboardingCards/MusicPreference';
 import PersonalityScreenReveal from './components/OnboardingCards/PersonalityScreenReveal'
 import PersonalityScreenReveal2 from './components/OnboardingCards/PersonalityScreenReveal2'
 import HowFarFromYou from './components/OnboardingCards/HowFarFromYou';
-
+import { RootSiblingParent } from 'react-native-root-siblings';
 import { Archivo_400Regular, Archivo_500Medium, Archivo_700Bold, useFonts } from "@expo-google-fonts/archivo";
+import { PlayfairDisplay_400Regular } from '@expo-google-fonts/playfair-display';
 
 const Stack = createNativeStackNavigator();
 
@@ -140,15 +141,18 @@ export default function App() {
     Archivo_400Regular,
     Archivo_500Medium,
     Archivo_700Bold,
+    PlayfairDisplay_400Regular
   });
 
   return (
     fontsLoaded && (
-      <AuthProvider>
-        <NavigationContainer>
-          <MainNavigator />
-        </NavigationContainer>
-      </AuthProvider>
+      <RootSiblingParent>
+        <AuthProvider>
+          <NavigationContainer>
+            <MainNavigator />
+          </NavigationContainer>
+        </AuthProvider>
+      </RootSiblingParent>
     )
   );
 }

frontend/app.json

@@ -12,6 +12,20 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ],
+      [
+        "expo-font",
+        {
+          "fonts": ["./assets/fonts/DTNightingale-Light.ttf"]
+        }
+      ]
+    ],
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.generate.nightlife"

frontend/components/Venue/BookmarkButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, Image, StyleSheet } from "react-native";
 import PropTypes from "prop-types";
-import Toast from "react-native-toast-message";
+import Toast from 'react-native-root-toast'
 
 const BookmarkButton = ({ venueID = "", userID = "" }) => {
   const bookmarkVenue = async () => {
@@ -25,41 +25,34 @@ const BookmarkButton = ({ venueID = "", userID = "" }) => {
       if (response.ok) {
         const data = await response.json();
         console.log("Bookmark submitted successfully:", data);
-
-        Toast.show({
-          type: "success",
-          text1: "Bookmark Saved!",
-          text2: "The venue has been successfully bookmarked.",
-          visibilityTime: 2000,
+        Toast.show("Venue Bookmarked!", {
+          duration: 800, 
+          position: Toast.positions.BOTTOM, 
+          backgroundColor: "#ffffff", 
+          textColor: "#000000", 
+          shadow: true,
+          animation: true,
+          hideOnPress: true,
         });
+
+
       } else {
         const errorData = await response.json();
         console.error("Error submitting review:", errorData);
 
-        Toast.show({
-          type: "error",
-          text1: "Error Saving Bookmark",
-          text2: "Unable to save the venue. Please try again.",
-          visibilityTime: 2000,
-        });
       }
     } catch (error) {
       console.error("Error:", error);
 
-      Toast.show({
-        type: "error",
-        text1: "Network Error",
-        text2: "An error occurred. Please check your connection.",
-        visibilityTime: 2000,
-      });
     }
   };
 
   return (
     <View>
       <TouchableOpacity onPress={bookmarkVenue}>
         <Image
-          //source={require("../assets/bookmark_button.png")}
+          // eslint-disable-next-line
+          source={require("../../assets/bookmark_button.png")}
           style={styles.buttonImage}
         />
       </TouchableOpacity>

frontend/components/Venue/Event.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 const Event = ({ event = { create_at: "", event_date: "", event_id: 0, event_time: "", image_path: "", name: "", venue_id: "" } }) => {
   const date = parseISO(event.event_date);
-  const displayDate = format(date, "MMMM do, yyyy");
+  const displayDate = format(date, "MMMM do");
   const displayTime = format(date, 'h:mm a');
 
   return (
@@ -17,8 +17,7 @@ const Event = ({ event = { create_at: "", event_date: "", event_id: 0, event_tim
         />
         <View style={styles.overlay}>
           <Text style={styles.eventText}>{event.name}</Text>
-          <Text style={styles.dateText}>{displayDate}</Text>
-          <Text style={styles.timeText}>{displayTime}</Text>
+          <Text style={styles.dateText}>{displayDate} + {displayTime}</Text>
         </View>
       </View>
     </View>
@@ -63,6 +62,7 @@ const styles = StyleSheet.create({
   dateText: {
     color: 'white',
     fontSize: 8,
+    paddingTop: 3
   },
   timeText: {
     color: 'white',

frontend/components/Venue/PersonaIcons.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Image, View, Text, StyleSheet } from 'react-native';
+import PropTypes from 'prop-types';
+
+const PersonaIcons = ({ personas = [] }) => {
+  const PersonaIconImages = {
+    // eslint-disable-next-line
+    roux: require('../../assets/roux.png'),
+    // eslint-disable-next-line
+    lumi: require('../../assets/lumi.png'),
+    // eslint-disable-next-line
+    sprig: require('../../assets/sprig.png'),
+    // eslint-disable-next-line
+    serafina: require('../../assets/serafina.png'),
+    // eslint-disable-next-line
+    buckley: require('../../assets/buckley.png'),
+    // eslint-disable-next-line
+    blitz: require('../../assets/blitz.png'),
+    // eslint-disable-next-line
+    plumehart: require('../../assets/plumehart.png'),
+  };
+
+  console.log("*************", personas);
+  return (
+    <View style={styles.container}>
+      {personas.length > 0 ? (
+        <View style={styles.iconContainer}>
+          {personas.map((persona, index) => (
+            <Image
+              key={index}
+              source={PersonaIconImages[persona]}
+              style={styles.icon}
+              resizeMode="contain"
+            />
+          ))}
+        </View>
+      ) : (
+        <Text style={styles.message}>Not enough reviews</Text>
+      )}
+    </View>
+  );
+};
+
+PersonaIcons.propTypes = {
+  personas: PropTypes.arrayOf(PropTypes.oneOf(['roux', 'lumi', 'sprig', 'serafina', 'buckley', 'blitz', 'plumehart'])).isRequired
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  iconContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  icon: {
+    width: 50,
+    height: 50,
+    marginLeft: 10
+  },
+  message: {
+    textAlign: 'center',
+    fontSize: 16,
+    color: '#666'
+  },
+});
+
+export default PersonaIcons;

frontend/components/Venue/RatingScrollBar.tsx

@@ -1,7 +1,7 @@
 import Slider from "@react-native-community/slider";
 import {Text, View, StyleSheet} from "react-native";
 import PropTypes from 'prop-types';
-import SoundWave from "./SoundWave";
+import SoundWave from "@/components/Venue/SoundWave";
 
 /**
  * Allows a user to submit a rating from 0 - 10 on a specific category
@@ -17,26 +17,28 @@ import SoundWave from "./SoundWave";
  */
 const RatingScrollBar = ({minTitle = "", maxTitle = "", value, onSliderChange, category, startColor, stopColor, avgValue}) => {
 
+  const adjustedRating = avgValue === 0 ? 1 : avgValue;
+
   return(
     <View style={styles.container}>
       <View style={{paddingBottom: 20}}>
         <View style={{position: 'absolute', opacity: 0.5}}>
           <SoundWave
             category={category}
-            rating={avgValue}
+            rating={adjustedRating}
             startColor={startColor}
             stopColor={stopColor}
           />
         </View>
         <Slider 
-          style={{ marginLeft: 5, width: 350, height: 40}}
+          style={{ marginLeft: 5, width: 355, marginTop: 2}}
           minimumValue={0}
           maximumValue={10}
           step={1}
           value={value}
           thumbTintColor="transparent" 
           // eslint-disable-next-line
-          thumbImage={require('../../assets/large_filled_star.png')}
+          thumbImage={require('../../assets/mid_size_star.png')}
           minimumTrackTintColor="white"
           maximumTrackTintColor="gray"
           onValueChange={onSliderChange}/>
@@ -62,7 +64,8 @@ RatingScrollBar.propTypes = {
 
 const styles = StyleSheet.create({
   container: {
-    alignItems: 'center'
+    alignItems: 'center',
+    backgroundColor: '#060019',
   },
   title: {
     fontSize: 18,