Notifications sorting, modal fixes

app/_layout.tsx

@@ -209,8 +209,6 @@ export default function RootLayout() {
 
     useEffect(() => {
         if (loaded) {
-            SplashScreen.hideAsync();
-
             const typographies: Partial<Record<TextStyle, FontStyle>> = {};
             (
                 [

components/pages/calendar/DetailedCalendar.tsx

@@ -50,7 +50,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
     }), []);
 
     const containerProps = useMemo(() => ({
-        hourWidth: 60,
+        hourWidth: 70,
         allowPinchToZoom: true,
         useHaptic: true,
         scrollToNow: true,
@@ -84,6 +84,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
             {...containerProps}
             numberOfDays={numberOfDays}
             calendarWidth={calendarWidth}
+
             onDateChanged={debouncedOnDateChanged}
             firstDay={firstDay}
             events={formattedEvents ?? []}

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -113,7 +113,7 @@ export const ManuallyAddEventModal = () => {
         }
 
         const baseDate = editEvent?.end ?? initialDate ?? new Date();
-        return addHours(startOfHour(baseDate), 1);
+        return addHours(baseDate, 1);
     });
     const [startDate, setStartDate] = useState(initialDate ?? new Date());
     const [endDate, setEndDate] = useState(
@@ -162,7 +162,7 @@ export const ManuallyAddEventModal = () => {
             }
 
             const baseDate = editEvent?.end ?? initialDate ?? new Date();
-            return addHours(startOfHour(baseDate), 1);
+            return addHours(baseDate, 1);
         });
 
         setStartDate(initialDate ?? new Date());
@@ -356,6 +356,14 @@ export const ManuallyAddEventModal = () => {
                             newDate.setHours(currentDate.getHours());
                             newDate.setMinutes(currentDate.getMinutes());
                             setDate(newDate);
+
+                            if (isStart && newDate > endDate) {
+                                const newEndDate = new Date(newDate);
+                                newEndDate.setHours(endDate.getHours());
+                                newEndDate.setMinutes(endDate.getMinutes());
+                                setEndDate(newEndDate);
+                            }
+
                             onDismiss();
                         }}
                         theme={{
@@ -397,18 +405,18 @@ export const ManuallyAddEventModal = () => {
                 </View>
             </View>
 
-            <TouchableOpacity
+            <View row marginB-10 spread centerV>
-                onPress={() => setShowStartDatePicker(true)}
-                style={styles.dateButton}
-            >
-                <View row centerV spread paddingR-30>
                 <View row centerV>
                     <Feather name="calendar" size={25} color="#919191"/>
+                    <TouchableOpacity onPress={() => setShowStartDatePicker(true)}>
                         <Text marginL-8 style={styles.dateText}>
                             {format(startDate, 'MMM d, yyyy')}
                         </Text>
+                    </TouchableOpacity>
                 </View>
+
                 {!isAllDay && (
+                    <View right marginR-30>
                         <DateTimePicker
                             value={startTime}
                             onChange={(time) => {
@@ -419,24 +427,24 @@ export const ManuallyAddEventModal = () => {
                             minuteInterval={5}
                             mode="time"
                             timeFormat="HH:mm"
-                            style={styles.timePicker}
+                            style={[styles.timePicker]}
                         />
+                    </View>
                 )}
             </View>
-            </TouchableOpacity>
 
             {!isAllDay && (
-                <TouchableOpacity
+                <View row marginB-10 spread centerV>
-                    onPress={() => setShowEndDatePicker(true)}
-                    style={styles.dateButton}
-                >
-                    <View row centerV spread paddingR-30>
                     <View row centerV>
                         <Feather name="calendar" size={25} color="#919191"/>
+                        <TouchableOpacity onPress={() => setShowEndDatePicker(true)}>
                             <Text marginL-8 style={styles.dateText}>
                                 {format(endDate, 'MMM d, yyyy')}
                             </Text>
+                        </TouchableOpacity>
                     </View>
+
+                    <View right marginR-30>
                         <DateTimePicker
                             value={endTime}
                             onChange={(time) => {
@@ -453,15 +461,16 @@ export const ManuallyAddEventModal = () => {
                             minuteInterval={5}
                             mode="time"
                             timeFormat="HH:mm"
-                            style={styles.timePicker}
+                            style={[styles.timePicker]}
                         />
                     </View>
-                </TouchableOpacity>
+                </View>
             )}
 
             {renderCalendarPicker(true, showStartDatePicker, () => setShowStartDatePicker(false))}
             {renderCalendarPicker(false, showEndDatePicker, () => setShowEndDatePicker(false))}
-        </View>)
+        </View>
+    )
 
     return (
         <>
@@ -533,9 +542,8 @@ export const ManuallyAddEventModal = () => {
                                 Cancel
                             </Text>
                         </TouchableOpacity>
-                        <View row center>
+
-                            <DropModalIcon onPress={close}/>
+
-                        </View>
                         <View flexS row gap-10>
                             <TouchableOpacity onPress={handleSave}>
                                 <Text
@@ -822,4 +830,15 @@ const styles = StyleSheet.create({
         marginBottom: 10,
         marginTop: 25,
     },
+    timePicker: {
+        fontFamily: "PlusJakartaSans_500Medium",
+        fontSize: 16,
+    },
+    dateText: {
+        fontFamily: "PlusJakartaSans_500Medium",
+        fontSize: 16,
+    },
+    dateButton: {
+        marginTop: 10,
+    }
 });

components/pages/calendar/useFormattedEvents.ts

@@ -31,7 +31,7 @@ interface FormattedEvent {
 
 // Precompute time constants
 const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const PERIOD_IN_MS = 5 * DAY_IN_MS;
+const PERIOD_IN_MS = 45 * DAY_IN_MS;
 const TIME_ZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 // Memoize date range calculations

hooks/firebase/useGetNotifications.ts

@@ -35,11 +35,11 @@ export const useGetNotifications = () => {
             const snapshot = await firestore()
                 .collection("Notifications")
                 .where("familyId", "==", profileData?.familyId)
+                .orderBy("timestamp", "desc")
                 .get();
 
             return snapshot.docs.map((doc) => {
                 const data = doc.data() as NotificationFirestore;
-
                 return {
                     id: doc.id,
                     ...data,