Fix/event view

app/(tabs)/Event.tsx

@@ -88,6 +88,7 @@ export default function EventScreen() {
       index={index}
       onPress={handleEventPress}
       handleSave={handleSave}
+      saved={savedEventIds.has(item.eventId)}
     />
   );
 
@@ -183,7 +184,7 @@ export default function EventScreen() {
       )}
       <SafeAreaView style={styles.background}>
         {renderContent()}
-        {selectedEvent && <EventDetailModal visible={modalVisible} event={selectedEvent} onClose={() => setModalVisible(false)} handleSave={handleSave} />}
+        {selectedEvent && <EventDetailModal visible={modalVisible} event={selectedEvent} onClose={() => setModalVisible(false)} handleSave={handleSave} saved={savedEventIds.has(selectedEvent.eventId)} />}
 
       </SafeAreaView> 
     </SafeAreaView>

assets/event/Bookmark.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import Svg, { G, Path } from "react-native-svg";
+
+const Bookmark = ({ fill = "#ff0000", width = 24, height = 24 }) => (
+  <Svg
+    width={width}
+    height={height}
+    viewBox="-15 -15 60 60"
+    fill="none"
+  >
+    <G transform="translate(-417.000000, -151.000000)">
+      <Path
+        d="M437,177 C437,178.104 436.104,179 435,179 L428,172 L421,179 C419.896,179 419,178.104 419,177 L419,155 C419,153.896 419.896,153 421,153 L435,153 C436.104,153 437,153.896 437,155 L437,177 L437,177 Z M435,151 L421,151 C418.791,151 417,152.791 417,155 L417,177 C417,179.209 418.791,181 421,181 L428,174 L435,181 C437.209,181 439,179.209 439,177 L439,155 C439,152.791 437.209,151 435,151 L435,151 Z"
+        fill={fill}
+      />
+    </G>
+  </Svg>
+);
+
+export default Bookmark;

components/eventScreen/EventCard.tsx

@@ -1,11 +1,15 @@
-import { View, Text, StyleSheet, Pressable, Image, TouchableOpacity } from 'react-native';
+import { useState } from 'react';
+import { View, Text, StyleSheet, Pressable, TouchableOpacity } from 'react-native';
+import NotSaved from "../../assets/event/NotSaved.svg"
+import Saved from "../../assets/event/Saved.svg"
 import { Event } from '../../types';
 
 interface EventCardProps {
   event: Event;
   index: number;
   onPress: (event: Event) => void;
   handleSave: (eventId: string) => void;
+  saved: boolean;
 }
 
 const formatTime = (timestamp: number): string => {
@@ -17,17 +21,11 @@ const formatTime = (timestamp: number): string => {
   });
 };
 
-const formatDate = (timestamp: number): string => {
-  const date = new Date(timestamp * 1000);
-  return date.toLocaleDateString('en-US', { 
-    month: 'short', 
-    day: 'numeric' 
-  });
-};
-
-export function EventCard({ event, index, onPress, handleSave }: EventCardProps) {
+export function EventCard({ event, index, onPress, handleSave, saved }: EventCardProps) {
   const handlePress = () => onPress(event);
-  const handleSavePress = () => handleSave(event.eventId);
+  const handleSavePress = () => {
+    handleSave(event.eventId);
+  }
   {/*When actual design is sent out create actual press animations*/}
   return (
 
@@ -40,10 +38,14 @@ export function EventCard({ event, index, onPress, handleSave }: EventCardProps)
     >
       <View style={styles.header}>
         <Text style={styles.title}>{event.name}</Text>
-        <TouchableOpacity onPress={handleSavePress}>
-          {/* Once png is converted to svg we can add fill to red on click */}
-          <Image style={styles.date} source={require('../../assets/event/Bookmark.png')}/>
-        </TouchableOpacity>
+          <TouchableOpacity onPress={handleSavePress}>
+            {saved ? (
+              <Saved width={22} height={22} />
+            ) : (
+              <NotSaved width={22} height={22} />
+            )}
+          </TouchableOpacity>
+
       </View>
       <Text style={styles.time}>
         {formatTime(event.startTime)} - {formatTime(event.endTime)}
@@ -87,10 +89,6 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     width: 200
   },
-  date: {
-    tintColor: '#ff0000ff',
-  },
-
   time: {
     fontSize: 14,
     color: '#444',

components/eventScreen/EventDetailModal.tsx

@@ -1,12 +1,16 @@
-import { View, Text, StyleSheet, TouchableOpacity, Modal, Image, ScrollView } from 'react-native';
+import { useState } from 'react';
+import { Text, StyleSheet, TouchableOpacity, Modal, Image, ScrollView, View, Platform } from 'react-native';
 import { Event } from '../../types';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import Saved from "../../assets/event/Saved.svg";
+import NotSaved from "../../assets/event/NotSaved.svg";
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface FullScreenModalProps {
   visible: boolean;
   event: Event;
   onClose: () => void;
   handleSave: (eventId: string) => void;
+  saved: boolean;
 }
 
 const formatTime = (timestamp: number): string => {
@@ -18,8 +22,14 @@ const formatTime = (timestamp: number): string => {
   });
 };
 
-export default function FullScreenModal({ visible, event, onClose, handleSave }: FullScreenModalProps) {
-  const handlePressSave = () => handleSave(event.eventId);
+export default function FullScreenModal({ visible, event, onClose, handleSave, saved }: FullScreenModalProps) {
+  const insets = useSafeAreaInsets(); // ✅ ensures proper padding even inside Modal
+
+  const handlePressSave = () => {
+    console.log(saved);
+    handleSave(event.eventId);
+  };
+
   return (
     <Modal
       visible={visible}
@@ -28,23 +38,38 @@ export default function FullScreenModal({ visible, event, onClose, handleSave }:
       statusBarTranslucent
       onRequestClose={onClose}
     >
-      <SafeAreaView style={styles.overlay}>
-
-
+      <View
+        style={[
+          styles.overlay,
+          {
+            paddingTop: insets.top || (Platform.OS === 'android' ? 20 : 0),
+            paddingBottom: insets.bottom || 0,
+          },
+        ]}
+      >
         <ScrollView
           contentContainerStyle={styles.scrollContent}
           showsVerticalScrollIndicator={false}
         >
           <TouchableOpacity onPress={onClose} style={styles.closeButton}>
             <Text style={styles.closeText}>X</Text>
           </TouchableOpacity>
+
           <TouchableOpacity onPress={handlePressSave} style={styles.saveButton}>
-            <Image source={require('../../assets/event/Bookmark.png')} />
+            {saved ? (
+              <Saved width={22} height={22} />
+            ) : (
+              <NotSaved width={22} height={22} />
+            )}
           </TouchableOpacity>
+
           <Text style={styles.title}>{event?.name}</Text>
-          <Text style={styles.body}>{formatTime(event?.startTime)} - {formatTime(event?.endTime)}.</Text>
+          <Text style={styles.body}>
+            {formatTime(event?.startTime)} - {formatTime(event?.endTime)}.
+          </Text>
           {event?.sponsor && <Text style={styles.body}>{event?.sponsor}</Text>}
           <Text style={styles.body}>{event?.locations[0]?.description || 'TBA'}</Text>
+
           {event?.mapImageUrl && event.mapImageUrl.trim() !== '' && (
             <Image
               source={{ uri: event.mapImageUrl }}
@@ -54,21 +79,20 @@ export default function FullScreenModal({ visible, event, onClose, handleSave }:
           )}
           <Text style={styles.body}>{event?.description?.trim()}</Text>
         </ScrollView>
-      </SafeAreaView>
+      </View>
     </Modal>
   );
 }
 
-
 const styles = StyleSheet.create({
   overlay: {
     flex: 1,
     backgroundColor: '#1a0033',
-    paddingTop: 20,
+    paddingHorizontal: 10,
   },
   scrollContent: {
     paddingHorizontal: 25,
-    paddingTop: 60, 
+    paddingTop: 60,
     alignItems: 'flex-start',
     paddingBottom: 40,
   },
@@ -89,11 +113,6 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: '#fff',
   },
-  content: {
-    alignItems: 'flex-start',
-    paddingHorizontal: 30,
-    top: 80,
-  },
   title: {
     fontSize: 22,
     fontWeight: '600',
@@ -104,17 +123,17 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#ccc',
     textAlign: 'left',
-    marginBottom:10
+    marginBottom: 10,
   },
   map: {
-    width: 300, 
+    width: 300,
     height: 300,
-    backgroundColor: "#FFFFFF",
-    marginBottom: 15
+    backgroundColor: '#FFFFFF',
+    marginBottom: 15,
   },
   container: {
-    borderColor: "#6b3982ff", 
-    borderRadius: 10,         
-    borderWidth: 7,           
-  }
+    borderColor: "#6b3982ff",
+    borderRadius: 10,
+    borderWidth: 7,
+  },
 });

src/components/onboarding/ScreenFive.tsx

@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 16,
         color: "#000000",
-        lineHeight: 13,
+        lineHeight: 15,
         letterSpacing: 0
     },
     skipButton: {

src/components/onboarding/ScreenFour.tsx

@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 16,
         color: "#000000",
-        lineHeight: 13, 
+        lineHeight: 15, 
         letterSpacing: 0
     },
     skipButton: {

src/components/onboarding/ScreenOne.tsx

@@ -12,6 +12,7 @@ export default function ScreenOne() {
 
 const styles = StyleSheet.create({
     background: {
+        height: '100%',
         backgroundColor: '#FFFFFF'
     },
     logoTop: {

src/components/onboarding/ScreenSeven.tsx

@@ -112,7 +112,7 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 16,
         color: "#000000",
-        lineHeight: 13, 
+        lineHeight: 15, 
         letterSpacing: 0
     },
 });

src/components/onboarding/ScreenSix.tsx

@@ -115,7 +115,7 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 16,
         color: "#000000",
-        lineHeight: 13, 
+        lineHeight: 15, 
         letterSpacing: 0
     },
     skipButton: {

src/components/onboarding/ScreenThree.tsx

@@ -115,8 +115,8 @@ const styles = StyleSheet.create({
         textAlign: "center",
         fontSize: 16,
         color: "#000000",
-        lineHeight: 13, 
-        letterSpacing: 0
+        lineHeight: 15, 
+        letterSpacing: 0,
     },
     skipButton: {
         marginTop: 5,