reorganized calendar page, fixes

components/pages/calendar/CalendarHeader.tsx

@@ -75,8 +75,8 @@ export const CalendarHeader = memo(() => {
                 borderBottomLeftRadius: 0,
                 borderBottomRightRadius: 0,
                 backgroundColor: "white",
-                marginBottom: 10,
             }}
+            centerV
         >
             <View row centerV gap-3>
                 <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>

components/pages/calendar/DetailedCalendar.tsx

@@ -9,6 +9,7 @@ import {useFormattedEvents} from "@/components/pages/calendar/useFormattedEvents
 import {useCalendarControls} from "@/components/pages/calendar/useCalendarControls";
 import {EventCell} from "@/components/pages/calendar/EventCell";
 import {isToday} from "date-fns";
+import { View } from "react-native-ui-lib";
 
 interface EventCalendarProps {
     calendarHeight: number;
@@ -84,7 +85,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
             {...containerProps}
             numberOfDays={numberOfDays}
             calendarWidth={calendarWidth}
-
+            
             onDateChanged={debouncedOnDateChanged}
             firstDay={firstDay}
             events={formattedEvents ?? []}
@@ -96,6 +97,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = ({calendarHeight,
                 {...bodyProps}
                 renderEvent={renderEvent}
             />
+            <View marginB-45/>
         </CalendarContainer>
     );
 };

components/pages/calendar/EventCell.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {StyleSheet, TouchableOpacity, View} from 'react-native';
 import {Text} from 'react-native-ui-lib';
 import CachedImage from 'expo-cached-image';
 import {format} from 'date-fns';
-import {colorMap} from '@/constants/colorMap';
+import {colorMap, getEventTextColor} from '@/constants/colorMap';
+
 
 interface EventCellProps {
     event: any;
@@ -17,15 +18,21 @@ export const EventCell: React.FC<EventCellProps> = React.memo((
         onPress,
         attendees
     }) => {
+        const [textColor, setTextColor] = useState<string>(getEventTextColor(event.color)); // Add optional chaining
+    
+        useEffect(() => {
+          setTextColor(getEventTextColor(event?.color))
+        }, [event])
+    
     return (
         <TouchableOpacity
             onPress={() => onPress(event)}
             style={[styles.eventCell, {backgroundColor: event.eventColor}]}
         >
-            <Text style={styles.eventTitle} numberOfLines={1}>
+            <Text style={[styles.eventTitle, {color: textColor}]} numberOfLines={1}>
                 {event.title}
             </Text>
-            <Text style={[styles.eventTitle, {fontSize: 10, opacity: 0.8}]}>
+            <Text style={[styles.eventTitle, {fontSize: 9, opacity: 0.95, color: textColor}]}>
                 {format(new Date(event.start.dateTime), 'h:mm a')} - {format(new Date(event.end.dateTime), 'h:mm a')}
             </Text>
 
@@ -71,7 +78,6 @@ const styles = StyleSheet.create({
         height: '100%',
     },
     eventTitle: {
-        color: 'white',
         fontSize: 12,
         fontFamily: "PlusJakartaSans_500Medium",
     },

components/pages/calendar/InnerCalendar.tsx

@@ -30,7 +30,6 @@ export const InnerCalendar = () => {
                 onLayout={onLayout}
                 paddingB-15
             >
-                <CalendarHeader/>
                 {calendarHeight > 0 && (
                     <EventCalendar
                         calendarHeight={calendarHeight}

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -40,7 +40,7 @@ import DeleteEventDialog from "./DeleteEventDialog";
 import {useDeleteEvent} from "@/hooks/firebase/useDeleteEvent";
 import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 import {addHours, format, startOfHour, startOfMinute} from "date-fns";
-import {useAuthContext} from "@/contexts/AuthContext";
+import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
 import {Calendar} from "react-native-calendars";
 
 const daysOfWeek = [
@@ -55,7 +55,7 @@ const daysOfWeek = [
 
 export const ManuallyAddEventModal = () => {
     const insets = useSafeAreaInsets();
-    const {user} = useAuthContext();
+    const {user, profileData} = useAuthContext();
 
     const [selectedNewEventDate, setSelectedNewEndDate] = useAtom(
         selectedNewEventDateAtom
@@ -419,14 +419,23 @@ export const ManuallyAddEventModal = () => {
                     <View right marginR-30>
                         <DateTimePicker
                             value={startTime}
+                            is24Hour={profileData?.userType === ProfileType.PARENT ? false : true}
                             onChange={(time) => {
-                                if (time <= endTime) {
-                                    setStartTime(time);
-                                }
+                                if (endDate.getDate() === startDate.getDate() &&
+                                time.getHours() >= endTime.getHours()) 
+                            {
+                                const newEndDate = new Date(endDate);
+
+                                setStartTime(time);
+
+                                newEndDate.setDate(newEndDate.getDate() + 1);
+                                setEndDate(newEndDate);
+                            }
+                            else setStartTime(time);
                             }}
                             minuteInterval={5}
                             mode="time"
-                            timeFormat="HH:mm"
+                            timeFormat={profileData?.userType === ProfileType.PARENT ? "hh:mm" : "HH:mm"}
                             style={[styles.timePicker]}
                         />
                     </View>
@@ -447,6 +456,7 @@ export const ManuallyAddEventModal = () => {
                     <View right marginR-30>
                         <DateTimePicker
                             value={endTime}
+                            is24Hour={profileData?.userType === ProfileType.PARENT ? false : true}
                             onChange={(time) => {
                                 setEndTime(time);
                                 if (
@@ -460,7 +470,7 @@ export const ManuallyAddEventModal = () => {
                             }}
                             minuteInterval={5}
                             mode="time"
-                            timeFormat="HH:mm"
+                            timeFormat={profileData?.userType === ProfileType.PARENT ? "hh:mm" : "HH:mm"}
                             style={[styles.timePicker]}
                         />
                     </View>