fix(map,venue-search): map fill, colorscheme updates (#86)

GenerateNU · Dec 4, 2024 · 443f563 · 443f563
1 parent 1a7cdbb
commit 443f563
Show file tree

Hide file tree

Showing 15 changed files with 1,700 additions and 8,421 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"