fixed some calendar bugs

components/pages/calendar/EventCalendar.tsx

@@ -6,6 +6,7 @@ import {useAtom, useSetAtom} from "jotai";
 import {
   editVisibleAtom,
   eventForEditAtom,
+  isAllDayAtom,
   modeAtom,
   selectedDateAtom,
   selectedNewEventDateAtom,
@@ -34,6 +35,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
     const [mode, setMode] = useAtom(modeAtom);
 
     const setEditVisible = useSetAtom(editVisibleAtom);
+    const [isAllDay, setIsAllDay] = useAtom(isAllDayAtom);
     const setEventForEdit = useSetAtom(eventForEditAtom);
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
@@ -67,6 +69,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       [mode, setSelectedNewEndDate, setSelectedDate]
     );
 
+    const handlePressDayHeader = useCallback(
+      (date: Date) => {
+        setIsAllDay(true);
+        console.log(isAllDay);
+        setSelectedNewEndDate(date);
+        setEditVisible(true);
+      },
+      [setSelectedNewEndDate]
+    );
+
     const handleSwipeEnd = useCallback(
       (date: Date) => {
         setSelectedDate(date);
@@ -84,7 +96,10 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       [profileData]
     );
 
-        console.log({memoizedWeekStartsOn, profileData: profileData?.firstDayOfWeek})
+    console.log({
+      memoizedWeekStartsOn,
+      profileData: profileData?.firstDayOfWeek,
+    });
 
     const isSameDate = useCallback((date1: Date, date2: Date) => {
       return (
@@ -117,32 +132,34 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       }
     }, [mode]);
 
-
     const { enrichedEvents, filteredEvents } = useMemo(() => {
       const startTime = Date.now(); // Start timer
 
       const startOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
       const endOffset = mode === "month" ? 40 : mode === "week" ? 10 : 1;
 
-            const filteredEvents = events?.filter(event =>
+      const filteredEvents =
-                event.start && event.end &&
+        events?.filter(
+          (event) =>
+            event.start &&
+            event.end &&
             isWithinInterval(event.start, {
               start: subDays(selectedDate, startOffset),
-                    end: addDays(selectedDate, endOffset)
+              end: addDays(selectedDate, endOffset),
             }) &&
             isWithinInterval(event.end, {
               start: subDays(selectedDate, startOffset),
-                    end: addDays(selectedDate, endOffset)
+              end: addDays(selectedDate, endOffset),
             })
         ) ?? [];
 
       const enrichedEvents = filteredEvents.reduce((acc, event) => {
-                const dateKey = event.start.toISOString().split('T')[0];
+        const dateKey = event.start.toISOString().split("T")[0];
         acc[dateKey] = acc[dateKey] || [];
         acc[dateKey].push({
           ...event,
           overlapPosition: false,
-                    overlapCount: 0
+          overlapCount: 0,
         });
 
         acc[dateKey].sort((a, b) => compareAsc(a.start, b.start));
@@ -151,7 +168,11 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
       }, {} as Record<string, CalendarEvent[]>);
 
       const endTime = Date.now();
-            console.log("memoizedEvents computation time:", endTime - startTime, "ms");
+      console.log(
+        "memoizedEvents computation time:",
+        endTime - startTime,
+        "ms"
+      );
 
       return { enrichedEvents, filteredEvents };
     }, [events, selectedDate, mode]);
@@ -262,6 +283,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
         dayHeaderHighlightColor={"white"}
         showAdjacentMonths
         hourStyle={styles.hourStyle}
+        onPressDateHeader={handlePressDayHeader}
         ampm
         // renderCustomDateForMonth={renderCustomDateForMonth}
       />

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -29,8 +29,12 @@ import LockIcon from "@/assets/svgs/LockIcon";
 import MenuIcon from "@/assets/svgs/MenuIcon";
 import CameraIcon from "@/assets/svgs/CameraIcon";
 import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
-import {useAtom} from "jotai";
+import { useAtom, useAtomValue } from "jotai";
-import {eventForEditAtom, selectedNewEventDateAtom,} from "@/components/pages/calendar/atoms";
+import {
+  eventForEditAtom,
+  selectedNewEventDateAtom,
+  isAllDayAtom,
+} from "@/components/pages/calendar/atoms";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import BinIcon from "@/assets/svgs/BinIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
@@ -53,8 +57,9 @@ export const ManuallyAddEventModal = () => {
     selectedNewEventDateAtom
   );
   const [editEvent, setEditEvent] = useAtom(eventForEditAtom);
+  const [allDayAtom, setAllDayAtom] = useAtom(isAllDayAtom);
   const [deleteModalVisible, setDeleteModalVisible] = useState<boolean>(false);
-    const {mutateAsync: deleteEvent, isLoading: isDeleting} = useDeleteEvent()
+  const { mutateAsync: deleteEvent, isLoading: isDeleting } = useDeleteEvent();
 
   const { show, close, initialDate } = {
     show: !!selectedNewEventDate || !!editEvent,
@@ -74,22 +79,51 @@ export const ManuallyAddEventModal = () => {
   const [isPrivate, setIsPrivate] = useState<boolean>(
     editEvent?.private || false
   );
+
+  useEffect(() => {
+    console.log(allDayAtom);
+    return () => {
+      setAllDayAtom(false);
+    };
+  }, []);
+
   const [startTime, setStartTime] = useState(() => {
     const date = initialDate ?? new Date();
-        date.setSeconds(0, 0);
+    if (
+      date.getMinutes() > 0 ||
+      date.getSeconds() > 0 ||
+      date.getMilliseconds() > 0
+    ) {
+      date.setHours(date.getHours() + 1);
+    }
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
     return date;
   });
+
   const [endTime, setEndTime] = useState(() => {
     if (editEvent?.end) {
       const date = new Date(editEvent.end);
       date.setSeconds(0, 0);
       return date;
     }
-        const date =
+
-            editEvent?.end ?? initialDate
+    const baseDate = editEvent?.end ?? initialDate ?? new Date();
-                ? addHours(editEvent?.end ?? initialDate!, 1)
+    const date = new Date(baseDate);
-                : addHours(new Date(), 1);
+
-        date.setSeconds(0, 0);
+    if (
+      date.getMinutes() > 0 ||
+      date.getSeconds() > 0 ||
+      date.getMilliseconds() > 0
+    ) {
+      date.setHours(date.getHours() + 1);
+    }
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+
+    date.setHours(date.getHours() + 1);
     return date;
   });
   const [startDate, setStartDate] = useState(initialDate ?? new Date());
@@ -101,35 +135,57 @@ export const ManuallyAddEventModal = () => {
   );
   const [repeatInterval, setRepeatInterval] = useState<PickerMultiValue>([]);
 
-    const {mutateAsync: createEvent, isLoading: isAdding, isError} = useCreateEvent();
+  const {
+    mutateAsync: createEvent,
+    isLoading: isAdding,
+    isError,
+  } = useCreateEvent();
   const { data: members } = useGetFamilyMembers(true);
-    const titleRef = useRef<TextFieldRef>(null)
+  const titleRef = useRef<TextFieldRef>(null);
 
-    const isLoading = isDeleting || isAdding
+  const isLoading = isDeleting || isAdding;
 
   useEffect(() => {
     setTitle(editEvent?.title || "");
     setDetails(editEvent?.notes || "");
     setIsAllDay(editEvent?.allDay || false);
     setIsPrivate(editEvent?.private || false);
+
     setStartTime(() => {
-            const date = initialDate ?? new Date();
+      const date = new Date(initialDate ?? new Date());
-            date.setSeconds(0, 0);
+      const minutes = date.getMinutes();
+      date.setMinutes(0, 0, 0);
+      if (minutes >= 30) {
+        date.setHours(date.getHours() + 1);
+      }
       return date;
     });
+
     setEndTime(() => {
       if (editEvent?.end) {
         const date = new Date(editEvent.end);
         date.setSeconds(0, 0);
         return date;
       }
-            const date =
+
-                editEvent?.end ?? initialDate
+      const baseDate = editEvent?.end ?? initialDate ?? new Date();
-                    ? addHours(editEvent?.end ?? initialDate!, 1)
+      const date = new Date(baseDate);
-                    : addHours(new Date(), 1);
+
-            date.setSeconds(0, 0);
+      if (
+        date.getMinutes() > 0 ||
+        date.getSeconds() > 0 ||
+        date.getMilliseconds() > 0
+      ) {
+        date.setHours(date.getHours() + 1);
+      }
+      date.setMinutes(0);
+      date.setSeconds(0);
+      date.setMilliseconds(0);
+
+      date.setHours(date.getHours() + 1);
       return date;
     });
+
     setStartDate(initialDate ?? new Date());
     setEndDate(editEvent?.end ?? initialDate ?? new Date());
     setSelectedAttendees(editEvent?.participants ?? []);
@@ -139,7 +195,7 @@ export const ManuallyAddEventModal = () => {
   useEffect(() => {
     if (show && !editEvent) {
       setTimeout(() => {
-                titleRef?.current?.focus()
+        titleRef?.current?.focus();
       }, 500);
     }
   }, [selectedNewEventDate]);
@@ -160,8 +216,8 @@ export const ManuallyAddEventModal = () => {
   };
 
   const handleDeleteEvent = async () => {
-        await deleteEvent({eventId: `${editEvent?.id}`})
+    await deleteEvent({ eventId: `${editEvent?.id}` });
-        close()
+    close();
   };
 
   const hideDeleteEventModal = () => {
@@ -246,7 +302,10 @@ export const ManuallyAddEventModal = () => {
         onRequestClose={close}
         transparent={false}
       >
-                <LoaderScreen message={isDeleting ? "Deleting event..." : "Saving event..."} color={Colors.grey40}/>
+        <LoaderScreen
+          message={isDeleting ? "Deleting event..." : "Saving event..."}
+          color={Colors.grey40}
+        />
       </Modal>
     );
   }
@@ -345,7 +404,6 @@ export const ManuallyAddEventModal = () => {
               />
             )}
           </View>
-
         </View>
         {/*)}*/}
         <ScrollView style={{ minHeight: "85%" }}>

components/pages/calendar/atoms.ts

@@ -2,6 +2,7 @@ import { atom } from "jotai";
 import { CalendarEvent } from "@/components/pages/calendar/interfaces";
 
 export const editVisibleAtom = atom<boolean>(false);
+export const isAllDayAtom = atom<boolean>(false);
 export const eventForEditAtom = atom<CalendarEvent | undefined>(undefined);
 export const isFamilyViewAtom = atom<boolean>(false);
 export const modeAtom = atom<"week" | "month" | "day">("week");

components/pages/settings/user_components/DeleteProfileDialogs.tsx

@@ -25,7 +25,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
         containerStyle={styles.dialog}
       >
         <View centerH>
-          <Feather name="alert-triangle" size={70} color="#FF5449" />
+          <Feather name="alert-triangle" size={70} color="#ff1637" />
         </View>
         <Text center style={styles.title}>
           Are you sure?
@@ -101,7 +101,7 @@ const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
 // Empty stylesheet for future styles
 const styles = StyleSheet.create({
   confirmBtn: {
-    backgroundColor: "#FF5449",
+    backgroundColor: "#ff1637",
   },
   cancelBtn: {
     backgroundColor: "white",

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -217,7 +217,7 @@ const MyProfile = () => {
       </View>
       <Button
         size="large"
-        backgroundColor="#FF5449"
+        backgroundColor="#ff1637"
         label="Delete Profile"
         style={{ marginTop: 10 }}
         labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}

components/pages/todos/ToDoItem.tsx

@@ -111,7 +111,7 @@ const ToDoItem = (props: {
           height={0.7}
           width={"100%"}
           style={{
-            backgroundColor: props.item.done ? "#b8b8b8" : "#e7e7e7",
+            backgroundColor: "#e7e7e7",
           }}
           centerH
         />