From b898a54152be37b20b4bb1d785a2e301c4a514d9 Mon Sep 17 00:00:00 2001 From: MeghP89 Date: Sun, 2 Nov 2025 17:47:13 -0600 Subject: [PATCH 1/2] [FIX] fixed onboarding screens to be compatible with IOS --- app/_layout.tsx | 2 +- package-lock.json | 8 ++++---- src/components/onboarding/ScreenFive.tsx | 2 +- src/components/onboarding/ScreenFour.tsx | 2 +- src/components/onboarding/ScreenOne.tsx | 1 + src/components/onboarding/ScreenSeven.tsx | 2 +- src/components/onboarding/ScreenSix.tsx | 2 +- src/components/onboarding/ScreenThree.tsx | 4 ++-- 8 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/_layout.tsx b/app/_layout.tsx index 893904a7..bc0ab60e 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout() { const hasCompleted = await AsyncStorage.getItem("hasCompletedOnboarding"); const jwt = await SecureStore.getItemAsync("jwt"); setIsLoggedIn(!!jwt); - setShowOnboarding(!hasCompleted); + setShowOnboarding(true); } catch (e) { console.error("Error checking onboarding status:", e); setShowOnboarding(true); diff --git a/package-lock.json b/package-lock.json index fb1676ab..5c3558e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9506,10 +9506,10 @@ "license": "CC0-1.0" }, "node_modules/tar": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz", - "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==", - "license": "ISC", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz", + "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==", + "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", diff --git a/src/components/onboarding/ScreenFive.tsx b/src/components/onboarding/ScreenFive.tsx index 89935764..ee77d835 100644 --- a/src/components/onboarding/ScreenFive.tsx +++ b/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: { diff --git a/src/components/onboarding/ScreenFour.tsx b/src/components/onboarding/ScreenFour.tsx index a4754405..bb463198 100644 --- a/src/components/onboarding/ScreenFour.tsx +++ b/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: { diff --git a/src/components/onboarding/ScreenOne.tsx b/src/components/onboarding/ScreenOne.tsx index e52ade7a..e2bfad6b 100644 --- a/src/components/onboarding/ScreenOne.tsx +++ b/src/components/onboarding/ScreenOne.tsx @@ -12,6 +12,7 @@ export default function ScreenOne() { const styles = StyleSheet.create({ background: { + height: '100%', backgroundColor: '#FFFFFF' }, logoTop: { diff --git a/src/components/onboarding/ScreenSeven.tsx b/src/components/onboarding/ScreenSeven.tsx index a19a4cdf..43567710 100644 --- a/src/components/onboarding/ScreenSeven.tsx +++ b/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 }, }); diff --git a/src/components/onboarding/ScreenSix.tsx b/src/components/onboarding/ScreenSix.tsx index 750394b0..57d405eb 100644 --- a/src/components/onboarding/ScreenSix.tsx +++ b/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: { diff --git a/src/components/onboarding/ScreenThree.tsx b/src/components/onboarding/ScreenThree.tsx index d6f74696..e70d57e5 100644 --- a/src/components/onboarding/ScreenThree.tsx +++ b/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, From 28d3a50101223b4786c0e976ecda0f7254ccaad3 Mon Sep 17 00:00:00 2001 From: MeghP89 Date: Tue, 4 Nov 2025 16:44:25 -0600 Subject: [PATCH 2/2] [FIX] events screen now has a proper saving svg and easier to press the save button --- app/(tabs)/Event.tsx | 3 +- app/_layout.tsx | 2 +- assets/event/Bookmark.png | Bin 370 -> 0 bytes assets/event/Bookmark.tsx | 20 ++++++ assets/event/NotSaved.svg | 7 ++ assets/event/Saved.svg | 7 ++ components/eventScreen/EventCard.tsx | 36 +++++----- components/eventScreen/EventDetailModal.tsx | 71 +++++++++++++------- 8 files changed, 99 insertions(+), 47 deletions(-) delete mode 100644 assets/event/Bookmark.png create mode 100644 assets/event/Bookmark.tsx create mode 100644 assets/event/NotSaved.svg create mode 100644 assets/event/Saved.svg diff --git a/app/(tabs)/Event.tsx b/app/(tabs)/Event.tsx index b9e5a8a9..ed67f294 100644 --- a/app/(tabs)/Event.tsx +++ b/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() { )} {renderContent()} - {selectedEvent && setModalVisible(false)} handleSave={handleSave} />} + {selectedEvent && setModalVisible(false)} handleSave={handleSave} saved={savedEventIds.has(selectedEvent.eventId)} />} diff --git a/app/_layout.tsx b/app/_layout.tsx index bc0ab60e..893904a7 100644 --- a/app/_layout.tsx +++ b/app/_layout.tsx @@ -19,7 +19,7 @@ export default function RootLayout() { const hasCompleted = await AsyncStorage.getItem("hasCompletedOnboarding"); const jwt = await SecureStore.getItemAsync("jwt"); setIsLoggedIn(!!jwt); - setShowOnboarding(true); + setShowOnboarding(!hasCompleted); } catch (e) { console.error("Error checking onboarding status:", e); setShowOnboarding(true); diff --git a/assets/event/Bookmark.png b/assets/event/Bookmark.png deleted file mode 100644 index 33df1a5c497348b9ec3294837efdff01ba5cfa78..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 370 zcmeAS@N?(olHy`uVBq!ia0vp^LO?9e!3HGRnB|`UDb50q$YKTtZeb8+WSBKa0w~B> z9OUlAuw}||zZ7}>H;~^h0G&LhYwk8l8ByP{i--ecSFYj#pOCi(Hy! z{$$$k-{J<6ZIOLaqVjFbLc2fQTejBz!d+j1r(bSAOqNez-*SG{Nq&y4$>pD{pG*S= O5re0zpUXO@geCxE>Xc0Y diff --git a/assets/event/Bookmark.tsx b/assets/event/Bookmark.tsx new file mode 100644 index 00000000..b546f42c --- /dev/null +++ b/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 }) => ( + + + + + +); + +export default Bookmark; \ No newline at end of file diff --git a/assets/event/NotSaved.svg b/assets/event/NotSaved.svg new file mode 100644 index 00000000..3fb89146 --- /dev/null +++ b/assets/event/NotSaved.svg @@ -0,0 +1,7 @@ + + + + + + bookmark Created with Sketch Beta. + \ No newline at end of file diff --git a/assets/event/Saved.svg b/assets/event/Saved.svg new file mode 100644 index 00000000..465074b7 --- /dev/null +++ b/assets/event/Saved.svg @@ -0,0 +1,7 @@ + + + + + + bookmark Created with Sketch Beta. + \ No newline at end of file diff --git a/components/eventScreen/EventCard.tsx b/components/eventScreen/EventCard.tsx index 621cbded..582ecfce 100644 --- a/components/eventScreen/EventCard.tsx +++ b/components/eventScreen/EventCard.tsx @@ -1,4 +1,7 @@ -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 { @@ -6,6 +9,7 @@ interface EventCardProps { 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) > {event.name} - - {/* Once png is converted to svg we can add fill to red on click */} - - + + {saved ? ( + + ) : ( + + )} + + {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', diff --git a/components/eventScreen/EventDetailModal.tsx b/components/eventScreen/EventDetailModal.tsx index 3a3b2bf2..70c916b4 100644 --- a/components/eventScreen/EventDetailModal.tsx +++ b/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 ( - - - + X + - + {saved ? ( + + ) : ( + + )} + {event?.name} - {formatTime(event?.startTime)} - {formatTime(event?.endTime)}. + + {formatTime(event?.startTime)} - {formatTime(event?.endTime)}. + {event?.sponsor && {event?.sponsor}} {event?.locations[0]?.description || 'TBA'} + {event?.mapImageUrl && event.mapImageUrl.trim() !== '' && ( {event?.description?.trim()} - + ); } - 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, + }, });